-
Notifications
You must be signed in to change notification settings - Fork 449
/
Data-Driven Styling.html
121 lines (99 loc) · 5.48 KB
/
Data-Driven Styling.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data-Driven Styling - 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 shows some basics around data-driven styling of layers in Azure Maps." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, circle, bubble, layers, data-driven, bubblelayer, geojson, data driven styling" />
<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>
<script>
var map, datasource;
var testData = [
//Has myRadius and category value.
new atlas.data.Feature(new atlas.data.Point([-122.3802, 47.54384]), {
myRadius: 30,
category: 'cat1'
}),
//Has myRadius and category value.
new atlas.data.Feature(new atlas.data.Point([-122.1842, 47.61123]), {
myRadius: 40,
category: 'cat2'
}),
//Has radius value (not myRadius), no category. Since the expression doesn't use "radius" this value will be ignored.
new atlas.data.Feature(new atlas.data.Point([-122.3514, 47.66606]), {
radius: 25
}),
//Has no myRadius or category value.
new atlas.data.Feature(new atlas.data.Point([-122.1601, 47.54059]))
];
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 10,
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 data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Load the test data.
datasource.add(testData);
//Create a layer that defines how to render the shapes in the data source and add it to the map.
map.layers.add(new atlas.layer.BubbleLayer(datasource, null, {
createIndicators: true, // to enable bubble layer a11y feature
//Define an expression to match on the category property and assign a value based on its color.
color: [
'match',
['get', 'category'],
'cat1', 'Purple',
'cat2', 'Green',
//Specify a default color if no match found.
'red'
],
//Define an expression that checks to see if a custom property is defined on a feature, and if it is, use it as the setting for the radius.
radius: [
'case',
//Check to see if the feature has a myRadius property.
['has', 'myRadius'],
['get', 'myRadius'],
//Specify a default radius if the feature doesn't have a myRadius property.
10
]
}));
});
}
</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>Data-Driven Styling</legend>
This sample shows some basics around data-driven styling of layers in Azure Maps.
Under the covers Azure Maps converts data from a data source into a vector tile layer for better rendering performance.
As part of this, many styling options in the rendering layers support expressions which apply business logic to determine
an options value based on properties on the feature being rendered. All of this happens are render time for better performance.
</fieldset>
</body>
</html>