Skip to content
Permalink
master
Switch branches/tags

AzureMapsGovCloudCodeSamples/AzureMapsCodeSamples/Vector tiles/Vector tile bubble layer.html

Go to file
 
 
Cannot retrieve contributors at this time
177 lines (148 sloc) 8.35 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vector tile bubble 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 shows how to how to use a vector tile service to render point data on the map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, markers, pins, pushpins, symbols, layer, bubbles, clustering, vector tiles, mbtiles, traffic, layer, flow, incidents" />
<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>
<script type='text/javascript'>
var map, datasource, 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: [-74, 40.723],
style: 'grayscale_dark',
zoom: 12,
view: 'Auto',
//Add your Azure Maps subscription client ID to the map SDK. Get an Azure Maps client ID at https://azure.com/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();
//Create a vector tile source and add it to the map.
datasource = new atlas.source.VectorTileSource(null, {
tiles: ['https://{azMapsDomain}/traffic/incident/tile/pbf?api-version=1.0&zoom={z}&x={x}&y={y}'],
maxZoom: 22
});
map.sources.add(datasource);
//Create a layer for clustered points.
var clusterLayer = new atlas.layer.BubbleLayer(datasource, null, {
//The name of the data layer within the data source to pass into this rendering layer.
sourceLayer: 'Traffic incident POI',
//Scale the size of the clustered bubble based on the size of the cluster.
radius: [
'step',
['get', 'cluster_size'],
15, //Default of 15 pixel radius.
10, 20, //If cluster_size >= 10, radius is 20 pixels.
20, 25 //If cluster_size >= 20, radius is 25 pixels.
],
//Make clusters a single color.
color: 'purple',
strokeWidth: 0,
//Only rendered data points which have a cluster_size property.
filter: ['has', 'cluster_size']
});
//Add a click event to the layer so we can zoom in when a user clicks a cluster.
map.events.add('click', clusterLayer, clusterClicked);
//Create a layer for individual incident points.
var incidentLayer = new atlas.layer.BubbleLayer(datasource, null, {
//The name of the data layer within the data source to pass into this rendering layer.
sourceLayer: 'Traffic incident POI',
//Color the bubble based on the magnitude of the incident.
color: [
'match',
['get', 'magnitude'],
1, 'green', //Minor
2, 'orange', //Moderate
3, 'red', //Major
'gray' //Unknown or undefined
],
//Filter out clustered points from this layer.
filter: ['all', ['!', ['has', 'cluster_size']]]//, ['!', ['get', 'poi_type'], 'end_poi']]
});
//Add a click event to the layer to display details about the incident.
map.events.add('click', incidentLayer, featureClicked);
map.layers.add([
clusterLayer,
//Create a symbol layer to render the size of clusters.
new atlas.layer.SymbolLayer(datasource, null, {
//The name of the data layer within the data source to pass into this rendering layer.
sourceLayer: 'Traffic incident POI',
iconOptions: {
image: 'none' //Hide the icon image.
},
textOptions: {
textField: ['get', 'cluster_size'],
offset: [0, 0.4],
color: 'white'
}
}),
incidentLayer
]);
});
}
function featureClicked(e) {
//Make sure the event occurred on a shape feature.
if (e.shapes && e.shapes.length > 0) {
//Since the data is coming from a vector tile source, it will be a raw GeoJSON feature and not a Shape class.
var f = e.shapes[0];
//If the shape is a Point, use its coordinates to position the popup, otherwise use the mouse location.
var pos = (f.geometry.type === 'Point') ? f.geometry.coordinates : e.position;
//Update the content and position of the popup.
popup.setOptions({
//Apply a template to the properties of the shape feature.
content: atlas.PopupTemplate.applyTemplate(f.properties),
position: pos
});
//Open the popup.
popup.open(map);
}
}
function clusterClicked(e) {
//Zoom the map in one zoom level where the mouse was clicked. Animate the transition.
map.setCamera({
center: e.position,
zoom: map.getCamera().zoom + 1,
type: 'ease',
duration: 250
});
}
</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">Vector tile bubble layer</h1></legend>
This sample shows how to how to use a vector tile service to render point data on the map.
In this case traffic incident data is rendered as clusters and points on the map using bubble and symbol layers.
<br /><br />
This sample uses the <a href="https://docs.microsoft.com/en-us/rest/api/maps/traffic/gettrafficincidenttile">Azure Maps vector tile traffic incident service</a>.
Detailed information about the format of the traffic incident vector tiles can be found
<a href="https://developer.tomtom.com/traffic-api/traffic-api-documentation-traffic-incidents/vector-incident-tiles">here</a>.
</fieldset>
</body>
</html>