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>
