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">
      <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"),{
                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)

         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


         function POICallback(response)

            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);

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

9 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






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

      You can 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: https://rbrundritt.wordpress.com/2012/04/02/get-entity-by-property-in-bing-maps-v7/

  2. Using the same library version and the code, whenever I do Microsoft.Maps.Events.addThrottledHandler(map, ‘viewchangeend’, UpdatePOIData, 250); it always gives the message in the console of Cannot set property ‘throttleInterval’ of null. Any ideas?

      • In case anyone else runs into this, it turns out that addThrottledHandler cannot do a callback function that passes an object (UpdatePOIData({test: true}). So what I did to get it to run is that I setup another function for it to call and that function calls another function and passes the object.

  3. Pingback: Migrating “My Map” from Google to Bing - Ricky's Bing Maps Blog - Site Home - MSDN Blogs

  4. Sir I am working on a project – a windows store app i am new to windows development,i need to find nearby locations i found some JavaScript references but cannot include it in my project so any way to do it in c# can you help me?

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