locked
URL parameters RRS feed

Answers

  • The following code uses different query parameters but can do pretty much the same thing. You can modify it to suit your needs

    Code Snippet

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
        <title>Map Query</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
        <script>
        // C = center of map
        // Z = zoom level
        // MM = map mode, values - "2D", "3D"
        // MS = map style, values - {Aerial, Road, Shaded, Hybrid, Oblique, Birdseye, BirdseyeHybrid}
        //  P = push pin (value has comma seperated latlong
        // RS = route start - can take in eithe ran address or a latlong
        // RE == route end - can take in eithe ran address or a latlong
       
        //Examples
        // customPrintScreen.html?C=45,-110&Z=15&MS=Aerial  -  centers map at 45, -110 and zoom level 15 and aerial
        //customPrintScreen.html?MS=Aerial&RS=toronto&RE=45,-110  - sets the map style to Aerial and draws a route from toronto to the latlong coordinates 45,-110.
        //customPrintScreen.html?P=45.52135,-110.0003&P=40.52145,-100.21&P=43.04324,-111.43 - will display three pushpins on the map
       
            var map = null;
            var queryTypes = new Array("C","Z","MM","MS","P","RS","RE");
            var key = new Array();
            var val = new Array();
           
            function HandleQueryString()
            {
                var query = window.location.search.substring(1);
                var parms = query.split('&');
                for (var i=0; i<parms.length; i++)
                {
                    var pos = parms[i].indexOf('=');
                    if (pos > 0)
                    {
                        key.push(parms[i].substring(0,pos));
                        val.push(parms[i].substring(pos+1));
                    }
                }
               
                var center = indexOf(queryTypes[0]);
                var zoomLevel = indexOf(queryTypes[1]);
               
                if(center!=null)
                    center = parseLatLong(center[0]);
               
                if(zoomLevel!=null)
                    zoomLevel = parseInt(zoomLevel[0]);
                   
                var mapStyle = indexOf(queryTypes[3]);
               
                if(mapStyle!=null)
                    mapStyle = mapStyle[0];
                   
                var mapMode = indexOf(queryTypes[2]);
               
                if(mapMode!=null)
                    mapMode = mapStyle[0];
               
                GetMap(center, zoomLevel, mapStyle, mapMode);
            }

            function processRestOfQuery()
            {
                var pushpins = indexOf(queryTypes[4]);
               
                if(pushpins!=null)
                {
                    for(var i=0;i<pushpins.length;i++)
                    {
                        AddPin(parseLatLong(pushpins[i]));
                    }
                }
               
                var routeStart = indexOf(queryTypes[5]);
                var routeEnd = indexOf(queryTypes[6]);
               
                if(routeStart!= null && routeEnd!=null)
                {
                    if(routeStart!=""&&routeEnd!="")
                    {
                        var routeStart = routeStart[0];
                        var routeEnd = routeEnd[0];
                       
                        if(isLatLong(routeStart))
                        {
                            routeStart = parseLatLong(routeStart);
                        }
                       
                        if(isLatLong(routeEnd))
                        {
                            routeEnd = parseLatLong(routeEnd);
                        }
                       
                        loadRoute(routeStart, routeEnd);
                    }               
                }
            }
           
            function indexOf(token)
            {
                var index = new Array();
               
                for(var i=0;i<key.length;i++)
                {
                    if(token==key[i])
                        index.push(val[i]);
                }
               
                if(index.length<1)
                    return null;
                   
                return index;
            }
           
            function parseLatLong(stringLatLong)
            {
                 var points = stringLatLong.split(',');
                 
                 return new VELatLong(parseFloat(points[0]),parseFloat(points[1]));
            }
           
            function GetMap(origin, zoomLevel, mapStyle, mapMode)
            {
                if(mapMode=="2D")
                    mapMode = VEMapMode.Mode2D;
                else if(mapMode=="3D")
                    mapMode = VEMapMode.Mode3D;
                else mapMode = null;
                   
                if(mapStyle=="Road")
                    mapStyle = VEMapStyle.Road;
                else if(mapStyle=="Shaded")
                    mapMode = VEMapStyle.Shaded;
                else if(mapStyle=="Aerial")
                    mapStyle = VEMapStyle.Aerial;
                else if(mapStyle=="Hybrid")
                    mapStyle = VEMapStyle.Hybrid;
                else if(mapStyle=="Oblique")
                    mapStyle = VEMapStyle.Oblique;
                else if(mapStyle=="Birdseye")
                    mapStyle = VEMapStyle.Birdseye;
                else if(mapStyle=="BirdseyeHybrid")
                    mapStyle = VEMapStyle.BirdseyeHybrid;
                else
                    mapStyle = null;
           
                map = new VEMap('myMap');
                map.onLoadMap = function(){processRestOfQuery();};
                map.LoadMap(origin, zoomLevel, mapStyle, true, mapMode, false);

                var options = new VEPrintOptions(true);
                map.SetPrintOptions(options);
            }  
            
              function AddPin(ll)
              { 
                var customIcon = new VECustomIconSpecification();
                customIcon.TextContent = " ";
                customIcon.Image = "crosshairs.png";
                customIcon.ImageOffset= new VEPixel(4,-24);
           
                   pin = new VEShape(VEShapeType.Pushpin,ll);
                pin.SetCustomIcon(customIcon);
                map.AddShape(pin);
              } 
       
            function loadRoute(start, end)
            {
                map.GetDirections([start,end]);
            }
           
            function isLatLong(string)
            {
                //determines is string is a latlong through regular expressions
                var RE = /-?\d*\.?\d+,-?\d*\.?\d+/;
               
                return string.match(RE);
            }
        </script>
    </head>
    <body onload="HandleQueryString();">
        <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
    </body>
    </html>


    Tuesday, July 15, 2008 1:20 AM
    Moderator

All replies

  • There are a couple of resons. One is that http://www.mysite.com/maps/index.htm does not appear to map to anywhere. Two, if you are adding this query string to your own map on you web page it will do nothing unless you are parsing the query string and set the map accordingly. Three, if you are expecting to see a different birdseye image when you change the coordinates from 37.814692,-122.477339 to 37.8146,-122.4773  you will have to change the scene to 13245125 which is the id of the birdseye scene when centered over 37.8146,-122.4773.
    Sunday, July 13, 2008 7:06 PM
    Moderator
  •  

    I'm a newbie, sorry I didn't explain myself more clearer.

     

    When I place the parameters ?cp=37.814692~-122.477339&style=o&lvl=1&tilt=-90&dir=0&alt=-1000&scene=1140291

    after the URL http://maps.live.com/default.aspx it produces an image (Golden Gate Bridge) but if I place the same parameters after http://www.mysite.com/maps/index.htm (where mysite.com could be anywhere and index.htm contains a Virtual Earth map) it does't work. I understand the parameters but why don't they work on 'mysite'. Is it something to do with, you said "it will do nothing unless you are parsing the query string and set the map accordingly", could you explain this fully.
    Monday, July 14, 2008 5:37 AM
  • Basically what Richard is trying to explain is that on maps.live.com it takes these parameters and parses them out for the application to use.  In this case I could guess that:

     

    cp=37.814692 - The center point of the map.  Probably maps.live.com does a map.GetCenter() call when it retrieves this value.

     

    style=o - Map style is set to oblique (bird's eye).  maps.live.com probably does a map.SetMapStyle() passing in this value

     

    scene=1140291 - The bird's eye scene ID.

     

    and so forth.  So maps.live.com is doing some JavaScript magic to get these values from the parameter and then uses them on the VE front end.  Your application will also need to use the same technique if you want the same behaviour.

     

    Might clarify some more if you look at the following link on how this JS magic is done:

    http://www.eggheadcafe.com/articles/20020107.asp

     

    Hope that helps,

    Monday, July 14, 2008 4:11 PM
  • Thanks for that, I now see how it is done.

     

    Where can I get examples of the code used specifically for those few parameters?

    Monday, July 14, 2008 10:39 PM
  • The following code uses different query parameters but can do pretty much the same thing. You can modify it to suit your needs

    Code Snippet

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
        <title>Map Query</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
        <script>
        // C = center of map
        // Z = zoom level
        // MM = map mode, values - "2D", "3D"
        // MS = map style, values - {Aerial, Road, Shaded, Hybrid, Oblique, Birdseye, BirdseyeHybrid}
        //  P = push pin (value has comma seperated latlong
        // RS = route start - can take in eithe ran address or a latlong
        // RE == route end - can take in eithe ran address or a latlong
       
        //Examples
        // customPrintScreen.html?C=45,-110&Z=15&MS=Aerial  -  centers map at 45, -110 and zoom level 15 and aerial
        //customPrintScreen.html?MS=Aerial&RS=toronto&RE=45,-110  - sets the map style to Aerial and draws a route from toronto to the latlong coordinates 45,-110.
        //customPrintScreen.html?P=45.52135,-110.0003&P=40.52145,-100.21&P=43.04324,-111.43 - will display three pushpins on the map
       
            var map = null;
            var queryTypes = new Array("C","Z","MM","MS","P","RS","RE");
            var key = new Array();
            var val = new Array();
           
            function HandleQueryString()
            {
                var query = window.location.search.substring(1);
                var parms = query.split('&');
                for (var i=0; i<parms.length; i++)
                {
                    var pos = parms[i].indexOf('=');
                    if (pos > 0)
                    {
                        key.push(parms[i].substring(0,pos));
                        val.push(parms[i].substring(pos+1));
                    }
                }
               
                var center = indexOf(queryTypes[0]);
                var zoomLevel = indexOf(queryTypes[1]);
               
                if(center!=null)
                    center = parseLatLong(center[0]);
               
                if(zoomLevel!=null)
                    zoomLevel = parseInt(zoomLevel[0]);
                   
                var mapStyle = indexOf(queryTypes[3]);
               
                if(mapStyle!=null)
                    mapStyle = mapStyle[0];
                   
                var mapMode = indexOf(queryTypes[2]);
               
                if(mapMode!=null)
                    mapMode = mapStyle[0];
               
                GetMap(center, zoomLevel, mapStyle, mapMode);
            }

            function processRestOfQuery()
            {
                var pushpins = indexOf(queryTypes[4]);
               
                if(pushpins!=null)
                {
                    for(var i=0;i<pushpins.length;i++)
                    {
                        AddPin(parseLatLong(pushpins[i]));
                    }
                }
               
                var routeStart = indexOf(queryTypes[5]);
                var routeEnd = indexOf(queryTypes[6]);
               
                if(routeStart!= null && routeEnd!=null)
                {
                    if(routeStart!=""&&routeEnd!="")
                    {
                        var routeStart = routeStart[0];
                        var routeEnd = routeEnd[0];
                       
                        if(isLatLong(routeStart))
                        {
                            routeStart = parseLatLong(routeStart);
                        }
                       
                        if(isLatLong(routeEnd))
                        {
                            routeEnd = parseLatLong(routeEnd);
                        }
                       
                        loadRoute(routeStart, routeEnd);
                    }               
                }
            }
           
            function indexOf(token)
            {
                var index = new Array();
               
                for(var i=0;i<key.length;i++)
                {
                    if(token==key[i])
                        index.push(val[i]);
                }
               
                if(index.length<1)
                    return null;
                   
                return index;
            }
           
            function parseLatLong(stringLatLong)
            {
                 var points = stringLatLong.split(',');
                 
                 return new VELatLong(parseFloat(points[0]),parseFloat(points[1]));
            }
           
            function GetMap(origin, zoomLevel, mapStyle, mapMode)
            {
                if(mapMode=="2D")
                    mapMode = VEMapMode.Mode2D;
                else if(mapMode=="3D")
                    mapMode = VEMapMode.Mode3D;
                else mapMode = null;
                   
                if(mapStyle=="Road")
                    mapStyle = VEMapStyle.Road;
                else if(mapStyle=="Shaded")
                    mapMode = VEMapStyle.Shaded;
                else if(mapStyle=="Aerial")
                    mapStyle = VEMapStyle.Aerial;
                else if(mapStyle=="Hybrid")
                    mapStyle = VEMapStyle.Hybrid;
                else if(mapStyle=="Oblique")
                    mapStyle = VEMapStyle.Oblique;
                else if(mapStyle=="Birdseye")
                    mapStyle = VEMapStyle.Birdseye;
                else if(mapStyle=="BirdseyeHybrid")
                    mapStyle = VEMapStyle.BirdseyeHybrid;
                else
                    mapStyle = null;
           
                map = new VEMap('myMap');
                map.onLoadMap = function(){processRestOfQuery();};
                map.LoadMap(origin, zoomLevel, mapStyle, true, mapMode, false);

                var options = new VEPrintOptions(true);
                map.SetPrintOptions(options);
            }  
            
              function AddPin(ll)
              { 
                var customIcon = new VECustomIconSpecification();
                customIcon.TextContent = " ";
                customIcon.Image = "crosshairs.png";
                customIcon.ImageOffset= new VEPixel(4,-24);
           
                   pin = new VEShape(VEShapeType.Pushpin,ll);
                pin.SetCustomIcon(customIcon);
                map.AddShape(pin);
              } 
       
            function loadRoute(start, end)
            {
                map.GetDirections([start,end]);
            }
           
            function isLatLong(string)
            {
                //determines is string is a latlong through regular expressions
                var RE = /-?\d*\.?\d+,-?\d*\.?\d+/;
               
                return string.match(RE);
            }
        </script>
    </head>
    <body onload="HandleQueryString();">
        <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
    </body>
    </html>


    Tuesday, July 15, 2008 1:20 AM
    Moderator