Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
173 lines (141 sloc) 7.49 KB
<!DOCTYPE html>
<html lang="en">
<title>Draw and search polygon area - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to use the drawing tools to search for points of interests within drawn areas." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, drawing tools, circle, rectangle, polygon, paint, events, services, module, search, points of interest, POI" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
<script src=""></script>
<script type='text/javascript'>
var map, searchURL, datasource, drawingManager, popup;
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
//Use SubscriptionKeyCredential with a subscription key
var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());
//Use subscriptionKeyCredential to create a pipeline
var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential, {
retryOptions: { maxTries: 4 }, // Retry options
//Create an instance of the SearchURL client.
searchURL = new atlas.service.SearchURL(pipeline);
//Wait until the map resources are ready.'ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
//Create a layer to render the POI results.
var layer = new atlas.layer.BubbleLayer(datasource);
//Add a click event to the poi layer.'click', layer, poiClicked);
//Create a reusable popup.
popup = new atlas.Popup();
//Create an instance of the drawing manager and display the drawing toolbar.
drawingManager = new atlas.drawing.DrawingManager(map, {
toolbar: new atlas.control.DrawingToolbar({
buttons: ['draw-polygon', 'draw-rectangle', 'draw-circle'],
position: 'top-right',
style: 'light'
//Hide the polygon fill area as only want to show outline of search area.
drawingManager.getLayers().polygonLayer.setOptions({ visible: false });
//Clear the map and drawing canvas when the user enters into a drawing mode.'drawingmodechanged', drawingManager, drawingModeChanged);
//Monitor for when a polygon drawing has been completed.'drawingcomplete', drawingManager, searchPolygon);
function drawingModeChanged(mode) {
//Clear the map and drawing canvas when the user enters into a drawing mode.
if (mode.startsWith('draw')) {
function searchPolygon(searchArea) {
//TODO: Work around: unwrap timeout once race condition bug is fixed.
setTimeout(function () {
//Exit drawing mode.
drawingManager.setOptions({ mode: 'idle' });
}, 1);
//Get the POI query value.
var query = document.getElementById('queryTbx').value;
//If the search area is a circle, use its center and radius to search.
if (searchArea.isCircle()) {
var center = searchArea.getCoordinates();
//Search for POI's within a radius.
searchURL.searchPOI(atlas.service.Aborter.timeout(3000), query, {
lon: center[0],
lat: center[1],
radius: searchArea.getProperties().radius,
limit: 100,
view: 'Auto'
}).then(showResults, error => {
} else {
var body = searchArea.toJson();
//Search for points of interest inside the search area.
searchURL.searchInsideGeometry(atlas.service.Aborter.timeout(3000), query, body, {
limit: 100,
view: 'Auto'
}).then(showResults, error => {
function showResults(results) {
var data = results.geojson.getFeatures();
//Add the results to the data source.
function poiClicked(e) {
//Set the popup options.
//Update the content of the popup.
content: atlas.PopupTemplate.applyTemplate(e.shapes[0].getProperties(), {
//Since there is a lot of content, and we trust the content, don't sandbox it. Sandboxing limits the amount of data that can be rendered in the popup.
sandboxContent: false
//Update the position of the popup with the pins coordinate.
position: e.shapes[0].getCoordinates()
//Open the popup.;
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div style="position:absolute;top:10px;left:10px;background-color:white;border-radius:10px;padding:10px;">
POI Query: <input type="text" id="queryTbx" value="pizza"/>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Draw and search polygon area</h1></legend>
This sample shows how to use the drawing tools to search for points of interests within drawn areas.
Update the type of point of interest in the text box to filter what results are returned.
You can’t perform that action at this time.