Dynamically updating data in Bing Maps V7

One common request I get is for information on how to dynamically update the map with data as the user moves the map. Many people will attach to the viewchange event which will result in a large number of requests being made to a very poor performance. A better method is to use the viewchangeend event, but with a throttled event handler. This will then only update the data when the map is done moving. The throttled part will help reduce  the number of events fired. For example, if a user were to continuously pan the map they would for an instance stop panning to move the mouse back to the other side of the map. this would fire a viewchangeend event. By adding a throttle the event will be delayed before being fired, and if the user does not continue moving the map before this delay is up, the event will fire.

Here is a full working sample that uses the NavteqEU data source and updates the map with nearby ATM’s as you move the map. This uses the Bing Spatial Data Services Query API.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
         var map = null;

         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{
                credentials:"YOUR_BING_MAPS_KEY",
                center : new Microsoft.Maps.Location(51.5, 0),
                zoom : 10
            }); 

            //Use a trottled event to reduce the number of unwanted events being fired.
            Microsoft.Maps.Events.addThrottledHandler(map, 'viewchangeend', UpdatePOIData, 250);
         }

         function UpdatePOIData(credentials)
         {
            map.getCredentials(MakePOIRequest);
         }

         function MakePOIRequest(credentials)
         {
            var bbox = map.getBounds();

            var poiRequest = "http://spatial.virtualearth.net/REST/v1/data/c2ae584bbccc4916a0acf75d1e6947b4/NavteqEU/NavteqPOIs?"
                + "spatialFilter=bbox(" + bbox.getSouth() + "," + bbox.getWest() + "," + bbox.getNorth() + "," + bbox.getEast() + ")"
                + "&$format=json&jsonp=POICallback&key=" + credentials
                + "&$filter=EntityTypeID Eq '3578'";

            //EntityType 3578 = ATM
            //List of Entity types: http://msdn.microsoft.com/en-us/library/hh478191.aspx

            CallRestService(poiRequest);
         }

         function POICallback(response)
         {
            map.entities.clear();

            if (response != null &&
               response.d != null &&
               response.d.results != null &&
               response.d.results.length > 0)
            {
                //add the POI data to the map
               for(var i = 0; i < response.d.results.length; i++){
                    var location = new Microsoft.Maps.Location(response.d.results[i].Latitude, response.d.results[i].Longitude);
                    var pushpin = new Microsoft.Maps.Pushpin(location);
                    map.entities.push(pushpin);
               }
            }
         }

         function CallRestService(request)
         {
            var script = document.createElement("script");
            script.setAttribute("type", "text/javascript");
            script.setAttribute("src", request);
            document.body.appendChild(script);
         }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:800px; height:600px;"></div>
   </body>
</html>
About these ads

3 thoughts on “Dynamically updating data in Bing Maps V7

  1. I am using Bing Map and there are several pushpins in the map. I have one table and on clicking on any row one javascript function executes and in that javascript function i am having latitude and longitude of pushpin based on selected row. Now i want to change the color of that pushpin whose latitude and longitude i have got from that row? Thanks in advance.

    function func()
    {
    var latitude;
    var longitude;
    //code to change color of pushpin already in map for these latitude and longitude
    }

    • I wouldn’t use the lat/long values to do a comparison. Coordinates are not unique. Instead I would give each pushpin a unique ID and then use that in the list to link back to the pushpin. For example, you can create a pushpin like this:

      var id = 0;
      var html = [‘

      ‘];

      for(var I=0;i<numPins;i++){
      var pin = new Microsoft.Maps.Pushpin(latlong, options);
      pin.ID = id+'';

      //Create list item
      html.push('

      ‘);

      id++;
      }

      html.push(‘

      info

      ‘);

      document.getElementByID(‘listLocation’).innnerHTML = html.join(”);

      You can then add then add an event to the list item and use jQuery to get the value of rel. This will get you the id value. Once you have the ID you can then use this method for getting the pushpin: http://rbrundritt.wordpress.com/2012/04/02/get-entity-by-property-in-bing-maps-v7/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s