Morning All,
We're just starting to branch out into the 'Mobile World' and would like to start using the Mobile Viewer.
I've done some reading, and it looks like I've done everything I need to do in order to have the map display however I seem to get a TOKEN error.
http://gis.wellandhydro.com:7502/mapserver2013/mobileviewer/
I've attached the .HTML file to this post to see if maybe someone can see something I have missed?
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welland Hydro Mobile Viewer</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" /> <link rel="apple-touch-icon" href="mobileviewericon.png"/> <!--link rel="apple-touch-startup-image" href="mobileviewerstartup.png" --> <!-- For debugging, use these links <link href="css/mobileviewer.css" rel="stylesheet" media="screen" type="text/css" /> <script type="text/javascript" src="lib/mobileviewer.js"></script> --> <!-- For optimized startup time, use the compressed, single-file links --> <link href="css/mobileviewerSF-compressed.css" rel="stylesheet" media="screen" type="text/css" /> <script type="text/javascript" src="lib/mobileviewerSF-compressed.js"></script> <script type="text/javascript"> var mgMap = null; var initTimeout = null; var splashScreenLoaded = true; var defaultMapDef = 'Library://Viewer/Pole Conditions/Map.MapDefinition'; var splashTimer=setInterval(function(){ if (document.readyState=="loaded" || document.readyState=="complete"){ clearInterval(splashTimer); loadSplashScreen(); }}, 10) window.onorientationchange = function(){ // 0=portrait // 90=landscape counter clockwise, // -90=landscape clockwise, // 180=upside down if(false == splashScreenLoaded) { loadSplashScreen(); } } function loadSplashScreen() { var width = (navigator.userAgent.indexOf("MSIE")>0) ? document.body.clientWidth : document.width; var orientation = window.orientation; if( 0 == orientation || 180 == orientation || undefined == orientation) { if(width < 320) { loadSplashScreenImages("240X320"); } else if(width < 640) { loadSplashScreenImages("320X480"); } else if(width < 768) { loadSplashScreenImages("640X960"); } else { loadSplashScreenImages("768X1024"); } } else if(90 == orientation || -90 == orientation) { if(width <1024) { loadSplashScreenImages("480X320"); } else { loadSplashScreenImages("1024X768"); } } } function loadSplashScreenImages(resolution) { document.getElementById('backgroundImage').className = "backgroundImage" + resolution; document.getElementById('messageWindow').className = "messageWindow" + resolution; document.getElementById('messageLarge').className = "messageLarge" + resolution; document.getElementById('messageSmall').className = "messageSmall" + resolution; document.getElementById('progressIndicator').className = "progressIndicator" +resolution; } function init() { initTimeout = setTimeout(initializeMobileViewer, 0); } function initializeMobileViewer() { clearTimeout(initTimeout); var options = { mgURL: '..\mapagent\mapagent.fcgi', onComplete: createMap }; var baseLayers = mobileViewer.getQueryParam('baselayers'); if(baseLayers != null) { baseLayers = baseLayers.toLowerCase(); if(baseLayers.indexOf('google') != -1) { options.googleAPIKey = ''; } if(baseLayers.indexOf('bing') != -1) { options.bingAPI = 'true'; } if(baseLayers.indexOf('yahoo') != -1) { options.yahooAPIKey = ''; } if(baseLayers.indexOf('osm') != -1) { options.osmAPI = "true"; } } var locale = mobileViewer.getQueryParam('locale'); if(locale != null && locale.length > 0) { options.locale = locale; } mobileViewer.initialize(options); } function createMap() { var commercialBaseLayers = []; // TODO The order is currently determined by this code, it would be better to process the layers in the order // that they're included in the 'baselayers' URL parameter var baseLayers = mobileViewer.getQueryParam('baselayers').toLowerCase(); if(baseLayers.indexOf('bing') != -1) { commercialBaseLayers.push(['VirtualEarth', 'VEMapStyle.Shaded', mobileViewer.getString('BING_SHADED')]); commercialBaseLayers.push(['VirtualEarth', 'VEMapStyle.Hybrid', mobileViewer.getString('BING_HYBRID')]); commercialBaseLayers.push(['VirtualEarth', 'VEMapStyle.Aerial', mobileViewer.getString('BING_AERIAL')]); } if(baseLayers.indexOf('google') != -1) { commercialBaseLayers.push(['Google', 'google.maps.MapTypeId.ROADMAP', mobileViewer.getString('GOOGLE_STREET_MAP')]); commercialBaseLayers.push(['Google', 'google.maps.MapTypeId.SATELLITE', mobileViewer.getString('GOOGLE_SATELLITE_MAP')]); commercialBaseLayers.push(['Google', 'google.maps.MapTypeId.HYBRID', mobileViewer.getString('GOOGLE_HYBRID_MAP')]); commercialBaseLayers.push(['Google', 'google.maps.MapTypeId.TERRAIN', mobileViewer.getString('GOOGLE_PHYSICAL_MAP')]); } if(baseLayers.indexOf('yahoo') != -1) { commercialBaseLayers.push(['Yahoo', 'YAHOO_MAP_REG', mobileViewer.getString('YAHOO_STREET_MAP')]); commercialBaseLayers.push(['Yahoo', 'YAHOO_MAP_SAT', mobileViewer.getString('YAHOO_SATELLITE_MAP')]); commercialBaseLayers.push(['Yahoo', 'YAHOO_MAP_HYB', mobileViewer.getString('YAHOO_HYBRID_MAP')]); } if(baseLayers.indexOf('osm') != -1) { commercialBaseLayers.push(['OSM', 'null', mobileViewer.getString('OPEN_STREET_MAP')]); } // Create the map object var mapDef = mobileViewer.getQueryParam('map'); if(mapDef == null || mapDef.length == 0) { mapDef = defaultMapDef; } mgMap = new mobileViewer.Map({ mapDiv: document.getElementById('mapContent'), fullWorldExtent: true, mapResourceId: mapDef, onComplete: createUserInterface, commercialBaseLayers: commercialBaseLayers }); } function createUserInterface() { // Add in an OpenLayers controls //mgMap.getMapOL().addControl(new OpenLayers.Control.ScaleLine()); //mgMap.getMapOL().addControl(new OpenLayers.Control.LayerSwitcher()); // Create the controls var mgPan = new mobileViewer.Pan(mgMap); var mgPinchZoom = new mobileViewer.PinchZoom(mgMap); var mgTapSelect = new mobileViewer.TapSelect(mgMap); var mgPinchSelect = new mobileViewer.PinchSelect(mgMap); var mgDragSelect = new mobileViewer.DragSelect(mgMap); var mgProperties = new mobileViewer.Properties(mgMap, {div: document.getElementById('propertiesPane')}); var mgLegend = new mobileViewer.Legend(mgMap, {div: document.getElementById('legendPane')}); var mgZoomInitial = new mobileViewer.ZoomInitial(mgMap); var mgDragZoomRect = new mobileViewer.DragZoomRectangle(mgMap); var mgPinchZoomRect = new mobileViewer.PinchZoomRectangle(mgMap); var mgLocation = new mobileViewer.Location(mgMap); var mgWheelZoom = new mobileViewer.WheelZoom(mgMap); var mgGeolocate = new mobileViewer.Geolocate(mgMap); var mgTapShowLatLon = new mobileViewer.TapShowLatLon(mgMap); var mgClearSelection = new mobileViewer.ClearSelection(mgMap); var mgReload = new mobileViewer.Reload(mgMap); var mgDoubleTapZoom = new mobileViewer.DoubleTapZoom(mgMap); // Create the toolbar buttons var mgNavigateButton = new mobileViewer.Button({map: mgMap, imageSrc: 'images/zoom-icon.png', label: mobileViewer.getString('PAN_ZOOM'), buttonId: 'navigateBtn', activeControls: [mgTapSelect, mgPan, mgPinchZoom, mgProperties, mgDoubleTapZoom]}); var mgSelectButton = new mobileViewer.Button({map: mgMap, imageSrc: 'images/select-icon.png', label: mobileViewer.getString('MULTI_SELECT'), buttonId: 'selectBtn', activeControls: [mgTapSelect, mgDragSelect, mgPinchSelect, mgProperties, mgDoubleTapZoom]}); var mgZoomRectButton = new mobileViewer.Button({map: mgMap, imageSrc: 'images/zoom-rectangle-icon.png', label: mobileViewer.getString('ZOOM_RECTANGLE'), buttonId: 'zoomRectBtn', activeControls: [mgTapSelect, mgProperties, mgDragZoomRect, mgPinchZoomRect, mgDoubleTapZoom]}); var mgLegendButton = new mobileViewer.Button({map: mgMap, imageSrc: 'images/legend-icon.png', label: mobileViewer.getString('LEGEND_TITLE'), buttonId: 'legendBtn', activeControls: [mgLegend], exclusive: false}); var mgZoomInitialButton = new mobileViewer.Button({map: mgMap, imageSrc: 'images/zoom-initial-icon.png', label: mobileViewer.getString('INITIAL_VIEW'), buttonId: 'zoomInitialBtn', activeControls: [mgZoomInitial], exclusive: false}); var mgClearSelectionButton = new mobileViewer.Button({map: mgMap, imageSrc: 'images/clear-selection-icon.png', label: mobileViewer.getString('CLEAR_SELECTION'), buttonId: 'clearSelBtn', activeControls: [mgClearSelection], exclusive: false}); var mgFindMeButton = new mobileViewer.Button({map: mgMap, imageSrc: 'images/geolocate-icon.png', label: mobileViewer.getString('MY_LOCATION'), buttonId: 'findMeBtn', activeControls: [mgGeolocate], exclusive: false}); var mgReloadButton = new mobileViewer.Button({map: mgMap, imageSrc: 'images/reload-icon.png', label: mobileViewer.getString('RELOAD'), buttonId: 'reloadBtn', activeControls: [mgReload], exclusive: false}); // Create the left toolbar var mgToolbarLeft = new mobileViewer.Toolbar({map: mgMap, div: document.getElementById('toolbarLeft'), buttons:[mgNavigateButton, mgZoomRectButton, mgZoomInitialButton, mgSelectButton, mgClearSelectionButton]}); // Create the right toolbar var mgToolbarRight = new mobileViewer.Toolbar({map: mgMap, div: document.getElementById('toolbarRight'), buttons:[mgLegendButton, mgFindMeButton, mgReloadButton]}); // Create a toolbar manager to control expand/collapse behavior of the toolbars var mgToolbarManager = new mobileViewer.ToolbarManager(); mgToolbarManager.addToolbar(mgToolbarLeft); mgToolbarManager.addToolbar(mgToolbarRight); // Hide splash screen document.getElementById('splashScreen').style.display = "none", splashScreenLoaded = true; // Activate the default action mgNavigateButton.activate(); } </script> </head> <body onLoad="init()" class="mobileViewerPhone"> <div id="container" class="mainContainer"> <div id="splashScreen" class="splashScreen"> <div class="splashScreenCenter"> <div id="backgroundImage"></div> <div id="messageWindow"><span id="messageLarge">Loading Data<br></span><span id="messageSmall">Please Wait</span></div> <div id="progressIndicator"></div> </div> </div> <div id="toolbarLeft" class="toolbar toolbarLeft"></div> <div id="toolbarRight" class="toolbar toolbarRight"></div> <div id="mapContainer" class="mapContainer"> <div id="mapContent" class="mapContent"></div> </div> </div> </body> </html>
Thank you in advance! I'd really love to show my manager this feature for AIMS!
Cheers,
Tom
It seems ok in Chrome. Are you trying it in Internet Explorer? (that browser is not supported)
- Everything else works, including Safari, Chrome, Firefox, Opera, etc.
It is an error that is not catch in js. Try to pass nothing to the map parameter and make the default map to null, the error will show.