Infrastructure Map Server Developer

Infrastructure Map Server Developer

Reply
Contributor
TomWilga3310
Posts: 18
Registered: ‎06-10-2008
Message 1 of 4 (5,483 Views)

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

5483 Views, 3 Replies
07-17-2013 05:54 AM

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

 

 

Valued Mentor
gluckett
Posts: 426
Registered: ‎10-10-2003
Message 2 of 4 (5,455 Views)

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

07-29-2013 05:21 AM in reply to: TomWilga3310

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.

 

 

 

Contributor
TomWilga3310
Posts: 18
Registered: ‎06-10-2008
Message 3 of 4 (5,435 Views)

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

08-01-2013 04:36 AM 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!
Valued Contributor
swimming123
Posts: 87
Registered: ‎04-12-2012
Message 4 of 4 (5,143 Views)

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

11-06-2013 01:52 PM in reply to: TomWilga3310

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.

Post to the Community

Have questions about Autodesk products? Ask the community.

New Post
Announcements
Do you have 60 seconds to spare? The Autodesk Community Team is revamping our site ranking system and we want your feedback! Please click here to launch the 5 question survey. As always your input is greatly appreciated.