Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
140 lines (111 sloc) 5.2 KB
<!DOCTYPE html>
<html lang="en">
<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="Microsoft maps, 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="" type="text/css" />
<script src=""></script>
<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
<script src=""></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
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
//Wait until the map resources are ready.'ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.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"
// 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();
// set camera to bounds to show the results
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.'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>',,
'</b></div><div>', p.address.freeformAddress,
'</div><div>', position[1], ', ', position[0], '</div></div>'];
//Update the content and position of the popup.
content: html.join(''),
position: position
//Open the popup.;
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
#myMap {
width: 100%;
height: 100%;
<body onload="GetMap()">
<div id="myMap"></div>
You can’t perform that action at this time.