-
Notifications
You must be signed in to change notification settings - Fork 451
/
Add arrows to end of paths.html
147 lines (120 loc) · 6.91 KB
/
Add arrows to end of paths.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add arrows to end of paths - 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 add arrow icons along a line on the map. " />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, linestring, arrows, path, symbols, linelayer" />
<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;
//Sample line data.
var lineData = [
new atlas.data.LineString([[-70.13671, 37.23032], [-74.09179, 40.71395]]),
new atlas.data.LineString([[-73.91601, 28.99853], [-80.59570, 24.36711], [-88.33007, 24.44714], [-95.00976, 29.30556]]),
new atlas.data.LineString([[-156.00585, 20.79720], [-142.38281, 20.46818], [-127.00195, 31.65338], [-118.82812, 33.65120]]),
new atlas.data.LineString([[-136.49414, 57.23150], [-143.17382, 53.80065], [-130.78125, 46.31658], [-124.27734, 46.07323]])
];
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-100, 40],
zoom: 3,
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 an arrow icon from one of the built-in templates
map.imageSprite.createFromTemplate('arrow-icon', 'triangle-arrow-up', 'DarkOrchid', 'DarkOrchid').then(function () {
//Create a data source to add your data to.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add line data to the data source.
datasource.add(lineData);
//Calculate the end points of the lines and add them to the data source.
datasource.add(calculateLineEndPoints(lineData));
//Add a layers for rendering data.
map.layers.add([
//Add a line layer for displaying the line.
new atlas.layer.LineLayer(datasource, null, {
strokeColor: 'DarkOrchid',
strokeWidth: 3
}),
//Add a symbol layer for rendering the arrow along the line.
new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'arrow-icon', //Reference the custom created icon.
allowOverlap: true, //Allow icons to overlay.
anchor: 'top', //Want the top of the image to align with the end of the line.
rotationAlignment: 'map', //Lock icon rotation to the map.
rotation: ['get', 'heading'], //Rotate the icon based on the heading property of each data point.
size: 0.7 //Scale the size of the icon.
},
filter: ['==', ['geometry-type'], 'Point'] //Only render point data in this layer and not the coordinates of lines.
})
]);
});
});
}
function calculateLineEndPoints(lines) {
var points = [];
for (var i = 0; i < lines.length; i++) {
var p = calculateLineEndPoint(lines[i]);
if (p) {
points.push(p);
}
}
return points;
}
function calculateLineEndPoint(line) {
var l = null;
if (line instanceof atlas.Shape) {
l = line.getCoordinates();
} else if (line.type === 'Feature') {
l = line.geometry.coordinates;
} else if (line.type === 'LineString') {
l = line.coordinates;
}
if (l && l.length >= 2) {
//Calculate the heading from the second last coordinate to the last coordinate.
//Since we want them to be pixel accurate rather than spatialy accurate, convert them to pixels (any zoom level will do but 20 will likely be more than accurate enough) and get the pixel heading.
var pixels = atlas.math.mercatorPositionsToPixels([l[l.length - 2], l[l.length - 1]], 20);
var heading = atlas.Pixel.getHeading(pixels[0], pixels[1]);
//Use the last coordinate of the line for the point of the end.
return new atlas.data.Feature(new atlas.data.Point(l[l.length - 1]), {
heading: heading
});
}
return null;
}
</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>Add Arrow along a Path</legend>
This sample shows how to add arrow icons along a line on the map.
When using a symbol layer, set the "placement" option to "line", this will render the symbols along the line and rotate the icons (0 degrees = right).
</fieldset>
</body>
</html>