-
Notifications
You must be signed in to change notification settings - Fork 456
/
Copy pathData-driven stroke gradient.html
181 lines (149 loc) · 9.03 KB
/
Data-driven stroke gradient.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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data-driven stroke gradient - 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 how to create a path between a set of data points can apply a stroke gradient based on properties in each data point." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, line, linestring, polyline, layer, stroke gradient, gradient, linelayer, data-driven, 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;
//Data points for a path, could be from a GPS device.
var points = [
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.18822, 47.63208] }, properties: { speed: 55 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.18204, 47.63196] }, properties: { speed: 57 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.17243, 47.62976] }, properties: { speed: 58 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.16419, 47.63023] }, properties: { speed: 60 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.15852, 47.62942] }, properties: { speed: 62 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.15183, 47.62988] }, properties: { speed: 63 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.14256, 47.63451] }, properties: { speed: 61 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.13483, 47.64041] }, properties: { speed: 65 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.13466, 47.64422] }, properties: { speed: 67 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.13844, 47.65440] }, properties: { speed: 68 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.13277, 47.66515] }, properties: { speed: 70 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.12779, 47.66712] }, properties: { speed: 73 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.11595, 47.66712] }, properties: { speed: 75 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.11063, 47.66735] }, properties: { speed: 68 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.10668, 47.67035] }, properties: { speed: 64 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-122.10565, 47.67498] }, properties: { speed: 60 } }
];
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.135, 47.65],
zoom: 12,
style: 'grayscale_dark',
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 popup.
popup = new atlas.Popup({
pixelOffset: [0, -18]
});
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource(null, {
lineMetrics: true //Enable line metrics on the data source. This is needed to enable support for strokeGradient.
});
map.sources.add(datasource);
//Optional. Add the data points to the map. This will allow us to see the individual points on the map on top of the stroked line.
datasource.add(points);
//Create a line from the points and add it to the data source.
var line = createLineFrom(points);
datasource.add(line);
//Calculate a color gradient expression based on the speed of each data point.
var speedGradient = calculateGradientExpression(points, line);
//Create a line layer and pass in a gradient expression for the strokeGradient property.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
strokeWidth: 6,
strokeGradient: speedGradient
}));
//Create a layer to render each data point along the path.
var pointLayer = new atlas.layer.SymbolLayer(datasource, null, {
//Only render point data in this layer, not the points of the line.
filter: ['==', ['geometry-type'], 'Point']
});
//Open/close the popup when hovered.
map.events.add('mousemove', pointLayer, pointClicked);
map.events.add('mouseout', pointLayer, closePopup);
map.layers.add(pointLayer);
});
}
function createLineFrom(points) {
var coords = [];
for (var i = 0; i < points.length; i++) {
coords.push(points[i].geometry.coordinates);
}
return new atlas.data.LineString(coords);
}
function calculateGradientExpression(points, line) {
var exp = [
'interpolate', //This will cause the colors from each data point to create a gradient between points.
['linear'],
['line-progress']
];
//Get the total length of the path.
var totalLength = atlas.math.getLengthOfPath(line);
//The line progress will be a fraction of the total length of the path,
//so we can calculate the line progress value of each data point and set the color accordingly.
var progress = 0;
for (var i = 0; i < points.length; i++) {
//The line progress value is a value between 0 and 1.
//Taking the travelled distance and dividing it by the total distance of the path, will give us the line progress value.
exp.push(progress / totalLength);
//Add our business logic on how a data point should be colored based on the speed.
if (points[i].properties.speed <= 60) {
exp.push('green');
} else if (points[i].properties.speed < 70) {
exp.push('yellow');
} else {
exp.push('red');
}
if (i < points.length - 1) {
progress += atlas.math.getDistanceTo(points[i], points[i + 1]);
}
}
return exp;
}
function pointClicked(e) {
var prop = e.shapes[0].getProperties();
popup.setOptions({
content: '<div style="padding:10px;">Speed: ' + prop.speed + 'mph</div>',
position: e.shapes[0].getCoordinates()
});
popup.open(map);
}
function closePopup() {
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>Data-driven stroke gradient</legend>
This sample shows how to create a path between a set of data points can apply a stroke gradient based on properties in each data point.
In this case the sample uses the speed of each data point to define the stroke gradient.
</fieldset>
</body>
</html>