Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@rbrundritt @walsehgal
140 lines (111 sloc) 5.15 KB
<!DOCTYPE html>
<html>
<head>
<title>Search for points of interest - 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 tutorial shows how to search for points of interest and display them on the map." />
<meta name="keywords" content="map, gis, API, SDK, services, module, tutorials, search" />
<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 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>
function GetMap() {
// Instantiate a map object
var map = new atlas.Map('myMap', {
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//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);
//Add a layer for rendering point data.
var resultLayer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'pin-round-darkblue',
anchor: 'center',
allowOverlap: true
},
textOptions: {
anchor: "top"
}
});
map.layers.add(resultLayer);
// 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);
// Construct the SearchURL object
var searchURL = new atlas.service.SearchURL(pipeline);
var query = 'gasoline-station';
var radius = 9000;
var lat = 47.64452336193245;
var lon = -122.13687658309935;
searchURL.searchPOI(atlas.service.Aborter.timeout(10000), query, {
limit: 10,
lat: lat,
lon: lon,
radius: radius,
view: 'Auto'
}).then((results) => {
// Extract GeoJSON feature collection from the response and add it to the datasource
var data = results.geojson.getFeatures();
datasource.add(data);
// set camera to bounds to show the results
map.setCamera({
bounds: data.bbox,
zoom: 10,
padding: 15
});
});
//Create a popup but leave it closed so we can update it and display it later.
popup = new atlas.Popup();
//Add a mouse over event to the result layer and display a popup when this event fires.
map.events.add('mouseover', resultLayer, showPopup);
function showPopup(e) {
//Get the properties and coordinates of the first shape that the event occurred on.
var p = e.shapes[0].getProperties();
var position = e.shapes[0].getCoordinates();
//Create HTML from properties of the selected result.
var html = ['<div style="padding:5px"><div><b>', p.poi.name,
'</b></div><div>', p.address.freeformAddress,
'</div><div>', position[1], ', ', position[0], '</div></div>'];
//Update the content and position of the popup.
popup.setPopupOptions({
content: html.join(''),
position: position
});
//Open the popup.
popup.open(map);
}
});
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#myMap {
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="GetMap()">
<div id="myMap"></div>
</body>
</html>
You can’t perform that action at this time.