-
Notifications
You must be signed in to change notification settings - Fork 452
/
HTML Marker Layer.html
158 lines (134 loc) · 6.85 KB
/
HTML Marker Layer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!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 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" />
<meta name="version" content="1.0" />
<meta name="screenshot" content="screenshot.jpg" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<!-- Add a reference to the HTML Marker layer module. -->
<script src="/lib/azure-maps/azure-maps-html-marker-layer.min.js"></script>
<script>
var map, datasource, markerLayer, popup;
//GeoJSON feed that contains the data we want to map.
var geojsonFeed = "/data/geojson/SamplePoiDataSet.json";
function getMap() {
//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 Microsoft Entra ID authentication.
authType: 'anonymous',
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Microsoft Entra ID Token.
var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsToken';
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>HTML Marker Layer</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>