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?
Go to file
 
 
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Marker Layer - 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 provides a layer which renders point data from a data source as HTML markers on the map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, markers, pins, pushpins, symbols, layer, clustering, superclusterer, html marker layer" />
<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 HTML Marker layer module. -->
<script src="../Common/scripts/azure-maps-html-marker-layer.min.js"></script>
<script type='text/javascript'>
var map, datasource, markerLayer, popup;
//GeoJSON feed that contains the data we want to map.
var geojsonFeed = "../Common/data/geojson/SamplePoiDataSet.json";
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: [-97, 39],
zoom: 3,
style: 'night',
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>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a reusable popup.
popup = new atlas.Popup({
pixelOffset: [0, -20],
closeButton: false
});
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource(null, {
//Tell the data source to cluster point data.
cluster: true
});
map.sources.add(datasource);
//Create a HTML marker layer for rendering data points.
markerLayer = new atlas.layer.HtmlMarkerLayer(datasource, null, {
markerCallback: (id, position, properties) => {
//Check to see if marker represents a cluster.
if (properties.cluster) {
return new atlas.HtmlMarker({
position: position,
color: 'DarkViolet',
text: properties.point_count_abbreviated
});
}
//Business logic to define color of marker.
var color = 'blue';
switch (properties.EntityType) {
case 'Gas Station':
color = '#3366CC';
break;
case 'Grocery Store':
color = '#DC3912';
break;
case 'Restaurant':
color = '#FF9900';
break;
case 'School':
color = '#109618';
break;
default:
break;
}
//Create an HtmlMarker with a random color.
return new atlas.HtmlMarker({
position: position,
color: color
});
}
});
//Add mouse events to the layer to show/hide a popup when hovering over a marker.
map.events.add('mouseover', markerLayer, markerHovered);
map.events.add('mouseout', markerLayer, hidePopup);
//Add marker layer to the map.
map.layers.add(markerLayer);
//Import the GeoJSON data into the data source.
datasource.importDataFromUrl(geojsonFeed);
});
}
function markerHovered(e) {
var content;
var marker = e.target;
if (marker.properties.cluster) {
content = `Cluster of ${marker.properties.point_count_abbreviated} markers`;
} else {
content = marker.properties.Name;
}
//Update the content and position of the popup.
popup.setOptions({
content: `<div style="padding:10px;">${content}</div>`,
position: marker.getOptions().position
});
//Open the popup.
popup.open(map);
}
function hidePopup() {
popup.close();
}
</script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">HTML Marker Layer</h1></legend>
This sample provides a layer which renders point data from a data source as HTML markers on the map.
Note that the more DOM elements that exist on a page, the slower it becomes.
As such, rendering upwards of 1,000 HTML markers on the map can cause performance issues.
Enable clustering on the data source to support larger data sets.
This samples uses the open source <a href="https://github.com/Azure-Samples/azure-maps-html-marker-layer" target="_blank">Azure Maps HTML Marker Layer module</a>.
</fieldset>
</body>
</html>