-
Notifications
You must be signed in to change notification settings - Fork 435
/
Tropical Storm Locations.html
145 lines (116 loc) · 6.32 KB
/
Tropical Storm Locations.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tropical Storm Locations - 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="Get information of tropical storms, this includes; location coordinates, geometry, basin ID, date, wind details and wind radii." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, tiles, layer, weather, AccuWeather" />
<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>
<!-- Add a reference to the Azure Maps Rest Helper JavaScript file. -->
<script src="https://samples.azuremaps.com/lib/azure-maps/azure-maps-helper.min.js"></script>
<script>
var map, datasource, popup;
var weatherUrl = 'https://{azMapsDomain}/weather/tropical/storms/locations/json?api-version=1.1&year=2021&basinId=NP&govId=2';
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [135, 17],
zoom: 4,
view: 'Auto',
style: 'satellite',
//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 () {
//Load the custom image icon into the map resources.
map.imageSprite.add('arrow-icon', '/images/icons/purpleArrowRight.png').then(function () {
//Create a data source to add your data to.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Get Tropical Storm Locations
processRequest(weatherUrl).then(response => {
var line = createLineFrom(response.results);
datasource.add(line);
var circle = createCircleFrom(response.results);
datasource.add(circle);
//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, {
lineSpacing: 100,
placement: 'line',
iconOptions: {
image: 'arrow-icon',
allowOverlap: true,
anchor: 'center',
size: 0.8
}
}),
new atlas.layer.BubbleLayer(datasource, null, {
createIndicators: true, // to enable bubble layer a11y feature
color: 'yellow',
strokeColor: 'yellow',
opacity: 0.1,
strokeOpacity: 0.2,
radius: ['case', ['has', 'myRadius'], ['get', 'myRadius'], 10],
filter: ['==', 'layer', 'myLayer']
})
]);
});
});
});
}
function createLineFrom(points) {
var coords = [];
for (var i = 0; i < points.length; i++) {
coords.push([points[i].location.longitude, points[i].location.latitude]);
}
console.log(coords);
return new atlas.data.LineString(coords);
}
function createCircleFrom(items) {
var circles = [];
for (var i = 0; i < items.length; i++) {
var data = new atlas.data.Feature(new atlas.data.Point([items[i].location.longitude, items[i].location.latitude]), {
myRadius: items[i].maxWindGust.value / 5,
layer: 'myLayer'
});
circles.push(data);
}
return circles;
}
</script>
</head>
<body >
<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>Tropical Storm Locations</legend>
This sample shows how to retrieve tropical storms data using the <a href="https://docs.microsoft.com/en-us/rest/api/maps/weather/get-tropical-storm-locations" target="_blank">Azure Maps Weather - Get Tropical Storm Locations</a> REST API.
</fieldset>
</body>
</html>