Search Boundary Example
Note
Bing Maps Web Control SDK retirement
Bing Maps Web Control SDK is deprecated and will be retired. Free (Basic) account customers can continue to use Bing Maps Web Control SDK until June 30th, 2025. Enterprise account customers can continue to use Bing Maps Web Control SDK until June 30th, 2028. To avoid service disruptions, all implementations using Bing Maps Web Control SDK will need to be updated to use Azure Maps Web SDK by the retirement date that applies to your Bing Maps for Enterprise account type. For detailed migration guidance, see Migrate from Bing Maps Web Control SDK and Migrate Bing Maps Enterprise applications to Azure Maps with GitHub Copilot.
Azure Maps is Microsoft's next-generation maps and geospatial services for developers. Azure Maps has many of the same features as Bing Maps for Enterprise, and more. To get started with Azure Maps, create a free Azure subscription and an Azure Maps account. For more information about azure Maps, see Azure Maps Documentation. For migration guidance, see Bing Maps Migration Overview.
In common uses of this module, developers will retrieve boundaries when the entity type of the boundary to return is specified. This is useful to get the boundary of a location that has a different entity type than your input data.
However, what if you want to get the boundary of a location and don't know what it's entity type is? In this code sample, the search module is used to geocode a user's inputted location. If the geocoded result has an entity type value that is supported by the GeoData API, a boundary will then be requested and rendered on the map if available. In this sample, the level of detail of the polygons is set to 1 so that they are more detailed. If a location is passed in that does not have a supported boundary or a boundary can't be found, a pushpin will be displayed on the map instead.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'>
var map, searchManager;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: ‘Your Bing Maps Key’
});
map = map;
//Load the Bing Spatial Data Services and Search modules, then create an instance of the search manager.
Microsoft.Maps.loadModule(['Microsoft.Maps.SpatialDataService',
'Microsoft.Maps.Search'], function () {
searchManager = new Microsoft.Maps.Search.SearchManager(map);
});
}
function Search() {
//Remove all data from the map.
map.entities.clear();
//Create the geocode request.
var geocodeRequest = {
where: document.getElementById('inputTbx').value,
callback: getBoundary,
errorCallback: function (e) {
//If there is an error, alert the user about it.
alert("No results found.");
}
};
//Make the geocode request.
searchManager.geocode(geocodeRequest);
}
function getBoundary(geocodeResult){
//Add the first result to the map and zoom into it.
if (geocodeResult && geocodeResult.results && geocodeResult.results.length > 0) {
//Zoom into the location.
map.setView({ bounds: geocodeResult.results[0].bestView });
//Create the request options for the GeoData API.
var geoDataRequestOptions = {
lod: 1,
getAllPolygons: true
};
//Verify that the geocoded location has a supported entity type.
switch (geocodeResult.results[0].entityType) {
case "CountryRegion":
case "AdminDivision1":
case "AdminDivision2":
case "Postcode1":
case "Postcode2":
case "Postcode3":
case "Postcode4":
case "Neighborhood":
case "PopulatedPlace":
geoDataRequestOptions.entityType = geocodeResult.results[0].entityType;
break;
default:
//Display a pushpin if GeoData API does not support EntityType.
var pin = new Microsoft.Maps.Pushpin(geocodeResult.results[0].location);
map.entities.push(pin);
return;
}
//Use the GeoData API manager to get the boundaries of the zip codes.
Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(
geocodeResult.results[0].location,
geoDataRequestOptions,
map,
function (data) {
//Add the polygons to the map.
if (data.results && data.results.length > 0) {
map.entities.push(data.results[0].Polygons);
} else {
//Display a pushpin if a boundary isn't found.
var pin = new Microsoft.Maps.Pushpin(data.location);
map.entities.push(pin);
}
});
}
}
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
<input type="text" id="inputTbx"/>
<input type="button" value="Search" onclick="Search()"/>
<br/>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
Running this code will load a textbox, a button and a map. Type in a location into the textbox and press search. If the location has an entity type value that is supported by the GeoData API, a boundary will be requested and if available, displayed on the map. Here is an example when searching for New York City.
