forked from earthdaily/Examples-and-showcases
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmaps.html
150 lines (124 loc) · 5.31 KB
/
maps.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display a MP product</title>
<style>
/* Important styles to be sure that map height > 0px */
.map {
width: 100%;
height: 400px;
}
/* Only for this example*/
.container {
display: flex;
width: 100%;
}
.container-column {
display: flex;
flex-flow: column;
width: 50%;
}
.vertical-line {
display: inline-block;
border-left: 1px solid #ccc;
margin: 0 10px;
height: 400px;
}
</style>
<!-- OPENLAYERS CSS & JS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<!-- LEAFLET CSS & JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<!-- Scripts with MapProduct calls -->
<script src="mapproduct.js"></script>
<!-- Scripts with OPenlayers and Leaflet management -->
<script src="maps.js"></script>
</head>
<body>
<div class="container">
<!-- DIV to display the Openlayers map -->
<div class="container-column">
<p>OPENLAYERS</p>
<div id="map_ol" class="map"></div>
</div>
<span class="vertical-line"></span>
<!-- DIV to display the Leaflet map -->
<div class="container-column">
<p>LEAFLET</p>
<div id="map_leaflet" class="map"></div>
</div>
</div>
<script>
(function () {
// Parameters to get the access token from the identity server.
const tokenParams = {
URL: 'https://identity.preprod.geosys-na.com/v2.1/connect/token',
CLIENT_ID: 'mapproduct_api',
USER_NAME: 'my_user_name',
PASSWORD: 'my_password_name',
CLIENT_SECRET: 'mapproduct_api.secret'
}
// URL used to get a map product example.
const apiParams = {
URL: 'https://api-pp.geosys-na.net:443/field-level-maps/v4/season-fields/w313g6n/coverage/2020-08-08/base-reference-map/INSEASON_NDVI'
}
var token, productLinks;
// STEP 1
// Firstly get the access token
mapProduct.getToken(tokenParams)
// STEP 2
// Store the token to use it in the next API calls in the token variable.
// Get the map product links: image, world file, legend, colormap, etc.
// See getProductLinks in mapproduct.js for details.
.then((result) => {
token = result.access_token;
return mapProduct.getProductLinks(apiParams, token);
})
// STEP 3
// Store the links to use them in the next API calls in the productLinks variable.
// Get the map product: image and image extent to use them in OPENLAYERS.
// FOR OPENLAYERS, EPSG = 3857.
// See getProduct in mapproduct.js for details.
.then((result) => {
productLinks = result;
const params = {
linkWorldFile: productLinks._links.worldFile,
linkImage: productLinks._links['image:image/png'],
epsg: 3857
}
return mapProduct.getProduct(params, token);
})
// STEP 4
// Create the Openlayers map.
// See createOpenlayersMap in maps.js for details.
.then(result => maps.createOpenlayersMap(result))
// STEP 5
// Get the map product: image and image extent to use them in LEAFLET
// FOR OPENLAYERS, EPSG = 4326.
// See getProduct in mapproduct.js for details.
.then(() => {
const params = {
linkWorldFile: productLinks._links.worldFile,
linkImage: productLinks._links['image:image/png'],
epsg: 4326
}
return mapProduct.getProduct(params, token);
})
// STEP 6
// Create the Leaflet map.
// See createLeafletMap in maps.js for details.
.then(result => maps.createLeafletMap(result))
.catch((error) => console.log(error));
})();
</script>
</body>
</html>