Infrastructure Map Server Forum
Welcome to Autodesk’s Infrastructure Map Server Forums. Share your knowledge, ask questions, and explore popular Infrastructure Map Server topics.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

AIMS Mobile Viewer 'TOKEN' Error - ** LINK and .HTML file attached

3 REPLIES 3
Reply
Message 1 of 4
TomWilgaWH
6994 Views, 3 Replies

AIMS Mobile Viewer 'TOKEN' Error - ** LINK and .HTML file attached

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

 

 

--------------------------------------------------
Thomas Wilga
Engineering Technician
GIS Coordinator
Field Inspector

Welland Hydro-Electric Systems Corp.
3 REPLIES 3
Message 2 of 4
gluckett
in reply to: TomWilgaWH

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.

 

 

 

Message 3 of 4
TomWilgaWH
in reply to: gluckett

I think that may have been the issue. Tried it out again and it all worked! Now to get the bing base map to show up...

Thanks for the response gluckett!
--------------------------------------------------
Thomas Wilga
Engineering Technician
GIS Coordinator
Field Inspector

Welland Hydro-Electric Systems Corp.
Message 4 of 4
swimming123
in reply to: TomWilgaWH

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.

Can't find what you're looking for? Ask the community or share your knowledge.

Post to forums  

Autodesk Design & Make Report