Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

AzureMapsGovCloudCodeSamples/AzureMapsCodeSamples/Drawing Tools Module/Draw and search polygon area.html

Go to file
 
 
Cannot retrieve contributors at this time
180 lines (146 sloc) 8.13 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<title>Draw and search polygon area - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico"/>
<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, within, intersects, intersection" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
<script type='text/javascript'>
var map, searchURL, datasource, drawingManager, popup;
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
atlas.setDomain('atlas.azure.us');
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//Use Azure Active Directory authentication.
authType: 'anonymous',
clientId: 'c9f2f391-13f1-407b-a4a5-f0a241bacfbf', //Your Azure Active Directory client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Azure Active Directory Token.
var tokenServiceUrl = 'https://azuremapscodesamples.azurewebsites.us/Common/TokenService.ashx';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
}
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
//authType: 'subscriptionKey',
//subscriptionKey: '<Your Azure Maps Key>'
}
});
//Use MapControlCredential to share authentication between a map control and the service module.
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));
//Create an instance of the SearchURL client.
searchURL = new atlas.service.SearchURL(pipeline, 'atlas.azure.us');
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create a layer to render the POI results.
var layer = new atlas.layer.BubbleLayer(datasource);
map.layers.add(layer);
//Add a click event to the poi layer.
map.events.add('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.
map.events.add('drawingmodechanged', drawingManager, drawingModeChanged);
//Monitor for when a polygon drawing has been completed.
map.events.add('drawingcomplete', drawingManager, searchPolygon);
});
}
function drawingModeChanged(mode) {
//Clear the drawing canvas when the user enters into a drawing mode.
if (mode.startsWith('draw')) {
popup.close();
datasource.clear();
drawingManager.getSource().clear();
}
}
function searchPolygon(searchArea) {
//Exit drawing mode.
drawingManager.setOptions({ mode: 'idle' });
//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 => {
alert(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 => {
alert(error);
});
}
}
function showResults(results) {
var data = results.geojson.getFeatures();
//Add the results to the data source.
datasource.add(data);
}
function poiClicked(e) {
//Set the popup options.
popup.setOptions({
//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.
popup.open(map);
}
</script>
</head>
<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"/>
</div>
<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.
</fieldset>
</body>
</html>