Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
168 lines (139 sloc) 8.21 KB
<!DOCTYPE html>
<html>
<head>
<title>Data-driven stroke gradient - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<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 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="map, gis, API, SDK, line, linestring, polyline, layer, stroke gradient, gradient, linelayer, data-driven, data driven styling" />
<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;
//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 your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
authOptions: {
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>
You can’t perform that action at this time.