Hugging Face's logo

Spaces:
giswqs
/
voila-geospatial
Running

App Files Community
4
giswqs commited on
Commit
cc4c8ba
·
1 Parent(s): 873af12

Added mapwidget

Browse files
Files changed (9) hide show
  1. Dockerfile +1 -1
  2. notebooks/cesium.ipynb +138 -0
  3. notebooks/esm.ipynb +354 -0
  4. notebooks/geemap.ipynb +121 -0
  5. notebooks/leaflet.ipynb +159 -0
  6. notebooks/leafmap.ipynb +28 -61
  7. notebooks/mapbox.ipynb +295 -0
  8. notebooks/maplibre.ipynb +288 -0
  9. notebooks/openlayers.ipynb +112 -0
Dockerfile CHANGED
@@ -1,6 +1,6 @@
1
  FROM jupyter/base-notebook:latest
2
 
3
- RUN mamba install -c conda-forge leafmap geemap geopandas localtileserver voila nodejs -y && \
4
  fix-permissions "${CONDA_DIR}" && \
5
  fix-permissions "/home/${NB_USER}"
6
 
 
1
  FROM jupyter/base-notebook:latest
2
 
3
+ RUN mamba install -c conda-forge leafmap geemap mapwidget geopandas localtileserver voila nodejs -y && \
4
  fix-permissions "${CONDA_DIR}" && \
5
  fix-permissions "/home/${NB_USER}"
6
 
notebooks/cesium.ipynb ADDED
@@ -0,0 +1,138 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "cells": [
3
+ {
4
+ "cell_type": "markdown",
5
+ "metadata": {},
6
+ "source": [
7
+ "[![image](https://studiolab.sagemaker.aws/studiolab.svg)](https://studiolab.sagemaker.aws/import/github/giswqs/mapwidget/blob/master/docs/examples/cesium.ipynb)\n",
8
+ "[![image](https://img.shields.io/badge/Open-Planetary%20Computer-black?style=flat&logo=microsoft)](https://pccompute.westeurope.cloudapp.azure.com/compute/hub/user-redirect/git-pull?repo=https://github.com/giswqs/mapwidget&urlpath=lab/tree/mapwidget/docs/examples/cesium.ipynb&branch=master)\n",
9
+ "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/giswqs/mapwidget/blob/master/docs/examples/cesium.ipynb)"
10
+ ]
11
+ },
12
+ {
13
+ "cell_type": "code",
14
+ "execution_count": null,
15
+ "metadata": {},
16
+ "outputs": [],
17
+ "source": [
18
+ "# %pip install mapwidget"
19
+ ]
20
+ },
21
+ {
22
+ "cell_type": "code",
23
+ "execution_count": null,
24
+ "metadata": {},
25
+ "outputs": [],
26
+ "source": [
27
+ "import os\n",
28
+ "import mapwidget.cesium as mapwidget"
29
+ ]
30
+ },
31
+ {
32
+ "cell_type": "markdown",
33
+ "metadata": {},
34
+ "source": [
35
+ "You need a Cesium access token to use the Cesium widget. First, [sign up](https://ion.cesium.com/signup/) for a free Cesium account. Then, you can create a token by following the instructions [here](https://cesium.com/learn/ion/cesium-ion-access-tokens/). Set `CESIUM_TOKEN` as an environment variable to use the Cesium widget. Alternatively, uncomment the following code block and replace `YOUR-CESIUM-TOKEN` with your Cesium access token."
36
+ ]
37
+ },
38
+ {
39
+ "cell_type": "code",
40
+ "execution_count": null,
41
+ "metadata": {},
42
+ "outputs": [],
43
+ "source": [
44
+ "if os.environ.get('CESIUM_TOKEN') is None:\n",
45
+ " token = 'YOUR-CESIUM-TOKEN'\n",
46
+ "else:\n",
47
+ " token = os.environ.get('CESIUM_TOKEN')"
48
+ ]
49
+ },
50
+ {
51
+ "cell_type": "markdown",
52
+ "metadata": {},
53
+ "source": [
54
+ "San Francisco"
55
+ ]
56
+ },
57
+ {
58
+ "cell_type": "code",
59
+ "execution_count": null,
60
+ "metadata": {},
61
+ "outputs": [],
62
+ "source": [
63
+ "m = mapwidget.Map(center=[37.655, -122.4175], altitude=400, height='600px', token=token)\n",
64
+ "m"
65
+ ]
66
+ },
67
+ {
68
+ "cell_type": "markdown",
69
+ "metadata": {},
70
+ "source": [
71
+ "![](https://i.imgur.com/gK2wA4p.gif)"
72
+ ]
73
+ },
74
+ {
75
+ "cell_type": "markdown",
76
+ "metadata": {},
77
+ "source": [
78
+ "New York City"
79
+ ]
80
+ },
81
+ {
82
+ "cell_type": "code",
83
+ "execution_count": null,
84
+ "metadata": {},
85
+ "outputs": [],
86
+ "source": [
87
+ "m = mapwidget.Map(center=[40.70605, -74.01177], altitude=600, height='600px', token=token)\n",
88
+ "m"
89
+ ]
90
+ },
91
+ {
92
+ "cell_type": "markdown",
93
+ "metadata": {},
94
+ "source": [
95
+ "![](https://i.imgur.com/6quoDtN.gif)"
96
+ ]
97
+ },
98
+ {
99
+ "cell_type": "code",
100
+ "execution_count": null,
101
+ "metadata": {},
102
+ "outputs": [],
103
+ "source": [
104
+ "m.center"
105
+ ]
106
+ },
107
+ {
108
+ "cell_type": "code",
109
+ "execution_count": null,
110
+ "metadata": {},
111
+ "outputs": [],
112
+ "source": [
113
+ "m.zoom"
114
+ ]
115
+ }
116
+ ],
117
+ "metadata": {
118
+ "kernelspec": {
119
+ "display_name": "Python 3",
120
+ "language": "python",
121
+ "name": "python3"
122
+ },
123
+ "language_info": {
124
+ "codemirror_mode": {
125
+ "name": "ipython",
126
+ "version": 3
127
+ },
128
+ "file_extension": ".py",
129
+ "mimetype": "text/x-python",
130
+ "name": "python",
131
+ "nbconvert_exporter": "python",
132
+ "pygments_lexer": "ipython3",
133
+ "version": "3.10.8"
134
+ }
135
+ },
136
+ "nbformat": 4,
137
+ "nbformat_minor": 4
138
+ }
notebooks/esm.ipynb ADDED
@@ -0,0 +1,354 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "cells": [
3
+ {
4
+ "attachments": {},
5
+ "cell_type": "markdown",
6
+ "metadata": {},
7
+ "source": [
8
+ "[![image](https://studiolab.sagemaker.aws/studiolab.svg)](https://studiolab.sagemaker.aws/import/github/giswqs/mapwidget/blob/master/docs/examples/esm.ipynb)\n",
9
+ "[![image](https://img.shields.io/badge/Open-Planetary%20Computer-black?style=flat&logo=microsoft)](https://pccompute.westeurope.cloudapp.azure.com/compute/hub/user-redirect/git-pull?repo=https://github.com/giswqs/mapwidget&urlpath=lab/tree/mapwidget/docs/examples/esm.ipynb&branch=master)\n",
10
+ "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/giswqs/mapwidget/blob/master/docs/examples/esm.ipynb)"
11
+ ]
12
+ },
13
+ {
14
+ "cell_type": "code",
15
+ "execution_count": null,
16
+ "metadata": {},
17
+ "outputs": [],
18
+ "source": [
19
+ "# %pip install mapwidget"
20
+ ]
21
+ },
22
+ {
23
+ "cell_type": "code",
24
+ "execution_count": null,
25
+ "metadata": {},
26
+ "outputs": [],
27
+ "source": [
28
+ "import os\n",
29
+ "import anywidget\n",
30
+ "import traitlets"
31
+ ]
32
+ },
33
+ {
34
+ "attachments": {},
35
+ "cell_type": "markdown",
36
+ "metadata": {},
37
+ "source": [
38
+ "## Leaflet"
39
+ ]
40
+ },
41
+ {
42
+ "cell_type": "code",
43
+ "execution_count": null,
44
+ "metadata": {},
45
+ "outputs": [],
46
+ "source": [
47
+ "class MapWidget(anywidget.AnyWidget):\n",
48
+ " _esm = \"\"\"\n",
49
+ " import * as L from \"https://esm.sh/[email protected]\";\n",
50
+ " export function render(view) {\n",
51
+ " \n",
52
+ " let center = view.model.get(\"center\");\n",
53
+ " let zoom = view.model.get(\"zoom\");\n",
54
+ " let width = view.model.get(\"width\");\n",
55
+ " let height = view.model.get(\"height\");\n",
56
+ " \n",
57
+ " const container = document.createElement(\"div\"); \n",
58
+ " container.style.width = width; \n",
59
+ " container.style.height = height;\n",
60
+ " \n",
61
+ " const map = L.map(container).setView(center, zoom);\n",
62
+ " L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n",
63
+ " attribution: 'Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors',\n",
64
+ " maxZoom: 24,\n",
65
+ " }).addTo(map);\n",
66
+ " \n",
67
+ " view.el.appendChild(container);\n",
68
+ " }\n",
69
+ " \"\"\"\n",
70
+ "\n",
71
+ " _css = \"https://unpkg.com/[email protected]/dist/leaflet.css\"\n",
72
+ "\n",
73
+ " center = traitlets.List([20, 0]).tag(sync=True, o=True)\n",
74
+ " zoom = traitlets.Int(2).tag(sync=True, o=True)\n",
75
+ " width = traitlets.Unicode(\"100%\").tag(sync=True, o=True)\n",
76
+ " height = traitlets.Unicode(\"600px\").tag(sync=True, o=True)\n",
77
+ "\n",
78
+ "\n",
79
+ "m = MapWidget(center=[20, 0], zoom=2, height='600px')\n",
80
+ "m"
81
+ ]
82
+ },
83
+ {
84
+ "attachments": {},
85
+ "cell_type": "markdown",
86
+ "metadata": {},
87
+ "source": [
88
+ "## Maplibre"
89
+ ]
90
+ },
91
+ {
92
+ "cell_type": "code",
93
+ "execution_count": null,
94
+ "metadata": {},
95
+ "outputs": [],
96
+ "source": [
97
+ "class MapWidget(anywidget.AnyWidget):\n",
98
+ " _esm = \"\"\"\n",
99
+ " import maplibregl from \"https://esm.sh/[email protected]\";\n",
100
+ "\n",
101
+ " export function render(view) {\n",
102
+ " \n",
103
+ " let center = view.model.get(\"center\");\n",
104
+ " center.reverse();\n",
105
+ " let zoom = view.model.get(\"zoom\");\n",
106
+ " let width = view.model.get(\"width\");\n",
107
+ " let height = view.model.get(\"height\");\n",
108
+ "\n",
109
+ " const div = document.createElement(\"div\");\n",
110
+ " div.style.width = width;\n",
111
+ " div.style.height = height;\n",
112
+ "\n",
113
+ " const map = new maplibregl.Map({\n",
114
+ " container: div,\n",
115
+ " style: 'https://demotiles.maplibre.org/style.json', // stylesheet location\n",
116
+ " center: center, // starting position [lng, lat]\n",
117
+ " zoom: zoom // starting zoom\n",
118
+ " });\n",
119
+ " view.el.appendChild(div);\n",
120
+ " }\n",
121
+ " \"\"\"\n",
122
+ " _css = \"https://esm.sh/[email protected]?css\"\n",
123
+ "\n",
124
+ " center = traitlets.List([20, 0]).tag(sync=True, o=True)\n",
125
+ " zoom = traitlets.Int(2).tag(sync=True, o=True)\n",
126
+ " width = traitlets.Unicode(\"100%\").tag(sync=True, o=True)\n",
127
+ " height = traitlets.Unicode(\"600px\").tag(sync=True, o=True)\n",
128
+ "\n",
129
+ "\n",
130
+ "m = MapWidget(center=[20, 0], zoom=2)\n",
131
+ "m"
132
+ ]
133
+ },
134
+ {
135
+ "attachments": {},
136
+ "cell_type": "markdown",
137
+ "metadata": {},
138
+ "source": [
139
+ "## Mapbox"
140
+ ]
141
+ },
142
+ {
143
+ "cell_type": "code",
144
+ "execution_count": null,
145
+ "metadata": {},
146
+ "outputs": [],
147
+ "source": [
148
+ "class MapWidget(anywidget.AnyWidget):\n",
149
+ " _esm = \"\"\"\n",
150
+ " import mapboxgl from \"https://esm.sh/[email protected]\";\n",
151
+ "\n",
152
+ " export function render(view) {\n",
153
+ " let center = view.model.get(\"center\");\n",
154
+ " center.reverse();\n",
155
+ " let zoom = view.model.get(\"zoom\");\n",
156
+ " let width = view.model.get(\"width\");\n",
157
+ " let height = view.model.get(\"height\");\n",
158
+ "\n",
159
+ " const div = document.createElement(\"div\");\n",
160
+ " div.style.width = width;\n",
161
+ " div.style.height = height;\n",
162
+ "\n",
163
+ " let token = view.model.get(\"token\");\n",
164
+ "\n",
165
+ " mapboxgl.accessToken = token;\n",
166
+ " const map = new mapboxgl.Map({\n",
167
+ " container: div,\n",
168
+ " style: \"mapbox://styles/mapbox/streets-v12\",\n",
169
+ " center: center,\n",
170
+ " zoom: zoom,\n",
171
+ " });\n",
172
+ " view.el.appendChild(div);\n",
173
+ " }\n",
174
+ "\n",
175
+ " \"\"\"\n",
176
+ " _css = \"https://esm.sh/[email protected]?css\"\n",
177
+ "\n",
178
+ " default_token = os.environ.get('MAPBOX_TOKEN')\n",
179
+ " token = traitlets.Unicode(default_token).tag(sync=True)\n",
180
+ " center = traitlets.List([20, 0]).tag(sync=True, o=True)\n",
181
+ " zoom = traitlets.Int(2).tag(sync=True, o=True)\n",
182
+ " width = traitlets.Unicode('100%').tag(sync=True, o=True)\n",
183
+ " height = traitlets.Unicode('600px').tag(sync=True, o=True)\n",
184
+ "\n",
185
+ "\n",
186
+ "m = MapWidget(center=[20, 0], zoom=2)\n",
187
+ "m"
188
+ ]
189
+ },
190
+ {
191
+ "attachments": {},
192
+ "cell_type": "markdown",
193
+ "metadata": {},
194
+ "source": [
195
+ "## Cesium"
196
+ ]
197
+ },
198
+ {
199
+ "cell_type": "code",
200
+ "execution_count": null,
201
+ "metadata": {},
202
+ "outputs": [],
203
+ "source": [
204
+ "class MapWidget(anywidget.AnyWidget):\n",
205
+ " _esm = \"\"\"\n",
206
+ " function loadScript(src) {\n",
207
+ " return new Promise((resolve, reject) => {\n",
208
+ " let script = Object.assign(document.createElement(\"script\"), {\n",
209
+ " type: \"text/javascript\",\n",
210
+ " async: true,\n",
211
+ " src: src,\n",
212
+ " });\n",
213
+ " script.addEventListener(\"load\", resolve);\n",
214
+ " script.addEventListener(\"error\", reject);\n",
215
+ " document.body.appendChild(script);\n",
216
+ " });\n",
217
+ " };\n",
218
+ " \n",
219
+ " await loadScript(\"https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Cesium.js\");\n",
220
+ " \n",
221
+ " export function render(view) {\n",
222
+ " \n",
223
+ " let width = view.model.get(\"width\");\n",
224
+ " let height = view.model.get(\"height\");\n",
225
+ " \n",
226
+ " const div = document.createElement(\"div\");\n",
227
+ " div.style.width = width;\n",
228
+ " div.style.height = height;\n",
229
+ " \n",
230
+ " Cesium.Ion.defaultAccessToken = view.model.get(\"token\");\n",
231
+ "\n",
232
+ " const viewer = new Cesium.Viewer(div, {\n",
233
+ " terrainProvider: Cesium.createWorldTerrain()\n",
234
+ " }); \n",
235
+ "\n",
236
+ " const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings()); \n",
237
+ "\n",
238
+ " viewer.camera.flyTo({\n",
239
+ " destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),\n",
240
+ " orientation : {\n",
241
+ " heading : Cesium.Math.toRadians(0.0),\n",
242
+ " pitch : Cesium.Math.toRadians(-15.0),\n",
243
+ " }\n",
244
+ " });\n",
245
+ " \n",
246
+ " view.el.appendChild(div);\n",
247
+ " }\n",
248
+ " \"\"\"\n",
249
+ " # make sure to include styles\n",
250
+ " _css = \"https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Widgets/widgets.css\"\n",
251
+ " default_token = os.environ.get('CESIUM_TOKEN')\n",
252
+ " token = traitlets.Unicode(default_token).tag(sync=True)\n",
253
+ " width = traitlets.Unicode('100%').tag(sync=True, o=True)\n",
254
+ " height = traitlets.Unicode('600px').tag(sync=True, o=True)\n",
255
+ "\n",
256
+ "\n",
257
+ "m = MapWidget()\n",
258
+ "m"
259
+ ]
260
+ },
261
+ {
262
+ "attachments": {},
263
+ "cell_type": "markdown",
264
+ "metadata": {},
265
+ "source": [
266
+ "## OpenLayers"
267
+ ]
268
+ },
269
+ {
270
+ "cell_type": "code",
271
+ "execution_count": null,
272
+ "metadata": {},
273
+ "outputs": [],
274
+ "source": [
275
+ "class MapWidget(anywidget.AnyWidget):\n",
276
+ " _esm = \"\"\"\n",
277
+ " function loadScript(src) {\n",
278
+ " return new Promise((resolve, reject) => {\n",
279
+ " let script = Object.assign(document.createElement(\"script\"), {\n",
280
+ " type: \"text/javascript\",\n",
281
+ " async: true,\n",
282
+ " src: src,\n",
283
+ " });\n",
284
+ " script.addEventListener(\"load\", resolve);\n",
285
+ " script.addEventListener(\"error\", reject);\n",
286
+ " document.body.appendChild(script);\n",
287
+ " });\n",
288
+ " };\n",
289
+ " \n",
290
+ " await loadScript(\"https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js\");\n",
291
+ " \n",
292
+ " export function render(view) {\n",
293
+ " \n",
294
+ " let center = view.model.get(\"center\");\n",
295
+ " center.reverse();\n",
296
+ " let zoom = view.model.get(\"zoom\");\n",
297
+ " let width = view.model.get(\"width\");\n",
298
+ " let height = view.model.get(\"height\");\n",
299
+ "\n",
300
+ " const div = document.createElement(\"div\");\n",
301
+ " div.style.width = width;\n",
302
+ " div.style.height = height;\n",
303
+ " \n",
304
+ " var map = new ol.Map({\n",
305
+ " target: div,\n",
306
+ " layers: [\n",
307
+ " new ol.layer.Tile({\n",
308
+ " source: new ol.source.OSM()\n",
309
+ " })\n",
310
+ " ],\n",
311
+ " view: new ol.View({\n",
312
+ " center: ol.proj.fromLonLat(center),\n",
313
+ " zoom: zoom\n",
314
+ " })\n",
315
+ " });\n",
316
+ " view.el.appendChild(div);\n",
317
+ " }\n",
318
+ " \"\"\"\n",
319
+ " # make sure to include styles\n",
320
+ " _css = \"https://cdn.jsdelivr.net/npm/[email protected]/ol.css\"\n",
321
+ " center = traitlets.List([20, 0]).tag(sync=True, o=True)\n",
322
+ " zoom = traitlets.Int(2).tag(sync=True, o=True)\n",
323
+ " width = traitlets.Unicode('100%').tag(sync=True, o=True)\n",
324
+ " height = traitlets.Unicode('600px').tag(sync=True, o=True)\n",
325
+ "\n",
326
+ "\n",
327
+ "m = MapWidget(center=[20, 0], zoom=2)\n",
328
+ "m"
329
+ ]
330
+ }
331
+ ],
332
+ "metadata": {
333
+ "kernelspec": {
334
+ "display_name": "geo",
335
+ "language": "python",
336
+ "name": "python3"
337
+ },
338
+ "language_info": {
339
+ "codemirror_mode": {
340
+ "name": "ipython",
341
+ "version": 3
342
+ },
343
+ "file_extension": ".py",
344
+ "mimetype": "text/x-python",
345
+ "name": "python",
346
+ "nbconvert_exporter": "python",
347
+ "pygments_lexer": "ipython3",
348
+ "version": "3.10.8"
349
+ },
350
+ "orig_nbformat": 4
351
+ },
352
+ "nbformat": 4,
353
+ "nbformat_minor": 2
354
+ }
notebooks/geemap.ipynb ADDED
@@ -0,0 +1,121 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "cells": [
3
+ {
4
+ "cell_type": "markdown",
5
+ "id": "a8d8ad8e",
6
+ "metadata": {},
7
+ "source": [
8
+ "<a href=\"https://githubtocolab.com/gee-community/geemap/blob/master/examples/notebooks/03_inspector_tool.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open in Colab\"/></a>"
9
+ ]
10
+ },
11
+ {
12
+ "cell_type": "markdown",
13
+ "id": "ff3af8c3",
14
+ "metadata": {},
15
+ "source": [
16
+ "Uncomment the following line to install [geemap](https://geemap.org) if needed."
17
+ ]
18
+ },
19
+ {
20
+ "cell_type": "code",
21
+ "execution_count": null,
22
+ "id": "c23972e6",
23
+ "metadata": {},
24
+ "outputs": [],
25
+ "source": [
26
+ "# !pip install geemap"
27
+ ]
28
+ },
29
+ {
30
+ "cell_type": "code",
31
+ "execution_count": null,
32
+ "id": "1ae5f776",
33
+ "metadata": {},
34
+ "outputs": [],
35
+ "source": [
36
+ "import ee\n",
37
+ "import geemap"
38
+ ]
39
+ },
40
+ {
41
+ "cell_type": "markdown",
42
+ "id": "f482e496",
43
+ "metadata": {},
44
+ "source": [
45
+ "## Create an interactive map"
46
+ ]
47
+ },
48
+ {
49
+ "cell_type": "code",
50
+ "execution_count": null,
51
+ "id": "3d7e1415",
52
+ "metadata": {},
53
+ "outputs": [],
54
+ "source": [
55
+ "Map = geemap.Map(center=(40, -100), zoom=4)"
56
+ ]
57
+ },
58
+ {
59
+ "cell_type": "markdown",
60
+ "id": "0c851740",
61
+ "metadata": {},
62
+ "source": [
63
+ "## Add Earth Engine Python script"
64
+ ]
65
+ },
66
+ {
67
+ "cell_type": "code",
68
+ "execution_count": null,
69
+ "id": "20c791e2",
70
+ "metadata": {},
71
+ "outputs": [],
72
+ "source": [
73
+ "# Add Earth Engine dataset\n",
74
+ "dem = ee.Image('USGS/SRTMGL1_003')\n",
75
+ "landsat7 = ee.Image('LANDSAT/LE7_TOA_5YEAR/1999_2003').select(\n",
76
+ " ['B1', 'B2', 'B3', 'B4', 'B5', 'B7']\n",
77
+ ")\n",
78
+ "states = ee.FeatureCollection(\"TIGER/2018/States\")\n",
79
+ "\n",
80
+ "# Set visualization parameters.\n",
81
+ "vis_params = {\n",
82
+ " 'min': 0,\n",
83
+ " 'max': 4000,\n",
84
+ " 'palette': ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5'],\n",
85
+ "}\n",
86
+ "\n",
87
+ "# Add Earth Engine layers to Map\n",
88
+ "Map.addLayer(dem, vis_params, 'SRTM DEM', True, 0.5)\n",
89
+ "Map.addLayer(\n",
90
+ " landsat7,\n",
91
+ " {'bands': ['B4', 'B3', 'B2'], 'min': 20, 'max': 200, 'gamma': 2.0},\n",
92
+ " 'Landsat 7',\n",
93
+ ")\n",
94
+ "Map.addLayer(states, {}, \"US States\")\n",
95
+ "\n",
96
+ "Map"
97
+ ]
98
+ }
99
+ ],
100
+ "metadata": {
101
+ "kernelspec": {
102
+ "display_name": "Python 3",
103
+ "language": "python",
104
+ "name": "python3"
105
+ },
106
+ "language_info": {
107
+ "codemirror_mode": {
108
+ "name": "ipython",
109
+ "version": 3
110
+ },
111
+ "file_extension": ".py",
112
+ "mimetype": "text/x-python",
113
+ "name": "python",
114
+ "nbconvert_exporter": "python",
115
+ "pygments_lexer": "ipython3",
116
+ "version": "3.10.8"
117
+ }
118
+ },
119
+ "nbformat": 4,
120
+ "nbformat_minor": 5
121
+ }
notebooks/leaflet.ipynb ADDED
@@ -0,0 +1,159 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "cells": [
3
+ {
4
+ "attachments": {},
5
+ "cell_type": "markdown",
6
+ "metadata": {},
7
+ "source": [
8
+ "[![image](https://studiolab.sagemaker.aws/studiolab.svg)](https://studiolab.sagemaker.aws/import/github/giswqs/mapwidget/blob/master/docs/examples/leaflet.ipynb)\n",
9
+ "[![image](https://img.shields.io/badge/Open-Planetary%20Computer-black?style=flat&logo=microsoft)](https://pccompute.westeurope.cloudapp.azure.com/compute/hub/user-redirect/git-pull?repo=https://github.com/giswqs/mapwidget&urlpath=lab/tree/mapwidget/docs/examples/leaflet.ipynb&branch=master)\n",
10
+ "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/giswqs/mapwidget/blob/master/docs/examples/leaflet.ipynb)"
11
+ ]
12
+ },
13
+ {
14
+ "cell_type": "code",
15
+ "execution_count": null,
16
+ "metadata": {},
17
+ "outputs": [],
18
+ "source": [
19
+ "# %pip install mapwidget"
20
+ ]
21
+ },
22
+ {
23
+ "cell_type": "code",
24
+ "execution_count": null,
25
+ "metadata": {},
26
+ "outputs": [],
27
+ "source": [
28
+ "import mapwidget"
29
+ ]
30
+ },
31
+ {
32
+ "cell_type": "code",
33
+ "execution_count": null,
34
+ "metadata": {},
35
+ "outputs": [],
36
+ "source": [
37
+ "m = mapwidget.Map()\n",
38
+ "m"
39
+ ]
40
+ },
41
+ {
42
+ "cell_type": "code",
43
+ "execution_count": null,
44
+ "metadata": {},
45
+ "outputs": [],
46
+ "source": [
47
+ "m.basemap"
48
+ ]
49
+ },
50
+ {
51
+ "cell_type": "code",
52
+ "execution_count": null,
53
+ "metadata": {},
54
+ "outputs": [],
55
+ "source": [
56
+ "m.add_basemap('HYBRID')"
57
+ ]
58
+ },
59
+ {
60
+ "cell_type": "code",
61
+ "execution_count": null,
62
+ "metadata": {},
63
+ "outputs": [],
64
+ "source": [
65
+ "m.add_basemap('OpenTopoMap')"
66
+ ]
67
+ },
68
+ {
69
+ "cell_type": "code",
70
+ "execution_count": null,
71
+ "metadata": {},
72
+ "outputs": [],
73
+ "source": [
74
+ "from mapwidget.basemaps import get_basemap_list\n",
75
+ "\n",
76
+ "print(len(get_basemap_list()))"
77
+ ]
78
+ },
79
+ {
80
+ "cell_type": "code",
81
+ "execution_count": null,
82
+ "metadata": {},
83
+ "outputs": [],
84
+ "source": [
85
+ "get_basemap_list()[:10]"
86
+ ]
87
+ },
88
+ {
89
+ "cell_type": "code",
90
+ "execution_count": null,
91
+ "metadata": {},
92
+ "outputs": [],
93
+ "source": [
94
+ "m.clicked_latlng"
95
+ ]
96
+ },
97
+ {
98
+ "cell_type": "code",
99
+ "execution_count": null,
100
+ "metadata": {},
101
+ "outputs": [],
102
+ "source": [
103
+ "m.center"
104
+ ]
105
+ },
106
+ {
107
+ "cell_type": "code",
108
+ "execution_count": null,
109
+ "metadata": {},
110
+ "outputs": [],
111
+ "source": [
112
+ "m.bounds"
113
+ ]
114
+ },
115
+ {
116
+ "cell_type": "code",
117
+ "execution_count": null,
118
+ "metadata": {},
119
+ "outputs": [],
120
+ "source": [
121
+ "m.zoom"
122
+ ]
123
+ },
124
+ {
125
+ "attachments": {},
126
+ "cell_type": "markdown",
127
+ "metadata": {},
128
+ "source": [
129
+ "![](https://i.imgur.com/4zt3wUk.gif)"
130
+ ]
131
+ }
132
+ ],
133
+ "metadata": {
134
+ "kernelspec": {
135
+ "display_name": "Python 3 (ipykernel)",
136
+ "language": "python",
137
+ "name": "python3"
138
+ },
139
+ "language_info": {
140
+ "codemirror_mode": {
141
+ "name": "ipython",
142
+ "version": 3
143
+ },
144
+ "file_extension": ".py",
145
+ "mimetype": "text/x-python",
146
+ "name": "python",
147
+ "nbconvert_exporter": "python",
148
+ "pygments_lexer": "ipython3",
149
+ "version": "3.10.8"
150
+ },
151
+ "vscode": {
152
+ "interpreter": {
153
+ "hash": "31f05ea183a4718249d13ada7f166c6bdba1d00716247af5c11c23af8d5923f1"
154
+ }
155
+ }
156
+ },
157
+ "nbformat": 4,
158
+ "nbformat_minor": 4
159
+ }
notebooks/leafmap.ipynb CHANGED
@@ -2,6 +2,7 @@
2
  "cells": [
3
  {
4
  "cell_type": "markdown",
 
5
  "metadata": {},
6
  "source": [
7
  "[![image](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://demo.leafmap.org/lab/index.html?path=notebooks/02_using_basemaps.ipynb)\n",
@@ -18,6 +19,7 @@
18
  {
19
  "cell_type": "code",
20
  "execution_count": null,
 
21
  "metadata": {},
22
  "outputs": [],
23
  "source": [
@@ -27,6 +29,7 @@
27
  {
28
  "cell_type": "code",
29
  "execution_count": null,
 
30
  "metadata": {},
31
  "outputs": [],
32
  "source": [
@@ -35,6 +38,7 @@
35
  },
36
  {
37
  "cell_type": "markdown",
 
38
  "metadata": {},
39
  "source": [
40
  "Create an interactive map."
@@ -43,6 +47,7 @@
43
  {
44
  "cell_type": "code",
45
  "execution_count": null,
 
46
  "metadata": {},
47
  "outputs": [],
48
  "source": [
@@ -52,6 +57,7 @@
52
  },
53
  {
54
  "cell_type": "markdown",
 
55
  "metadata": {},
56
  "source": [
57
  "Specify a Google basemap to use, can be one of [\"ROADMAP\", \"TERRAIN\", \"SATELLITE\", \"HYBRID\"]."
@@ -60,6 +66,7 @@
60
  {
61
  "cell_type": "code",
62
  "execution_count": null,
 
63
  "metadata": {},
64
  "outputs": [],
65
  "source": [
@@ -70,6 +77,7 @@
70
  {
71
  "cell_type": "code",
72
  "execution_count": null,
 
73
  "metadata": {},
74
  "outputs": [],
75
  "source": [
@@ -79,6 +87,7 @@
79
  },
80
  {
81
  "cell_type": "markdown",
 
82
  "metadata": {},
83
  "source": [
84
  "Add a basemap using the `add_basemap()` function."
@@ -87,6 +96,7 @@
87
  {
88
  "cell_type": "code",
89
  "execution_count": null,
 
90
  "metadata": {},
91
  "outputs": [],
92
  "source": [
@@ -98,6 +108,7 @@
98
  },
99
  {
100
  "cell_type": "markdown",
 
101
  "metadata": {},
102
  "source": [
103
  "Add an XYZ tile layer."
@@ -106,6 +117,7 @@
106
  {
107
  "cell_type": "code",
108
  "execution_count": null,
 
109
  "metadata": {},
110
  "outputs": [],
111
  "source": [
@@ -120,6 +132,7 @@
120
  },
121
  {
122
  "cell_type": "markdown",
 
123
  "metadata": {},
124
  "source": [
125
  "Add a WMS tile layer."
@@ -128,6 +141,7 @@
128
  {
129
  "cell_type": "code",
130
  "execution_count": null,
 
131
  "metadata": {},
132
  "outputs": [],
133
  "source": [
@@ -141,6 +155,7 @@
141
  },
142
  {
143
  "cell_type": "markdown",
 
144
  "metadata": {},
145
  "source": [
146
  "Add a legend to the map."
@@ -149,6 +164,7 @@
149
  {
150
  "cell_type": "code",
151
  "execution_count": null,
 
152
  "metadata": {},
153
  "outputs": [],
154
  "source": [
@@ -167,67 +183,6 @@
167
  "m.add_legend(builtin_legend=\"NWI\")\n",
168
  "m"
169
  ]
170
- },
171
- {
172
- "cell_type": "markdown",
173
- "metadata": {},
174
- "source": [
175
- "Add a layer from [xyzservices](https://github.com/geopandas/xyzservices) provider object"
176
- ]
177
- },
178
- {
179
- "cell_type": "code",
180
- "execution_count": null,
181
- "metadata": {},
182
- "outputs": [],
183
- "source": [
184
- "import os\n",
185
- "import xyzservices.providers as xyz"
186
- ]
187
- },
188
- {
189
- "cell_type": "code",
190
- "execution_count": null,
191
- "metadata": {},
192
- "outputs": [],
193
- "source": [
194
- "basemap = xyz.HEREv3.basicMap\n",
195
- "basemap"
196
- ]
197
- },
198
- {
199
- "cell_type": "markdown",
200
- "metadata": {},
201
- "source": [
202
- "Pass the api key to the xyzservices provider object or set it as an environment variable."
203
- ]
204
- },
205
- {
206
- "cell_type": "code",
207
- "execution_count": null,
208
- "metadata": {},
209
- "outputs": [],
210
- "source": [
211
- "basemap['apiKey'] = os.environ[\"HEREMAPS_API_KEY\"]"
212
- ]
213
- },
214
- {
215
- "cell_type": "markdown",
216
- "metadata": {},
217
- "source": [
218
- "Add the xyzservices provider object as a layer to the map."
219
- ]
220
- },
221
- {
222
- "cell_type": "code",
223
- "execution_count": null,
224
- "metadata": {},
225
- "outputs": [],
226
- "source": [
227
- "m = leafmap.Map()\n",
228
- "m.add_basemap(basemap)\n",
229
- "m"
230
- ]
231
  }
232
  ],
233
  "metadata": {
@@ -235,6 +190,18 @@
235
  "display_name": "Python 3",
236
  "language": "python",
237
  "name": "python3"
 
 
 
 
 
 
 
 
 
 
 
 
238
  }
239
  },
240
  "nbformat": 4,
 
2
  "cells": [
3
  {
4
  "cell_type": "markdown",
5
+ "id": "6527891f",
6
  "metadata": {},
7
  "source": [
8
  "[![image](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://demo.leafmap.org/lab/index.html?path=notebooks/02_using_basemaps.ipynb)\n",
 
19
  {
20
  "cell_type": "code",
21
  "execution_count": null,
22
+ "id": "d2c546a9",
23
  "metadata": {},
24
  "outputs": [],
25
  "source": [
 
29
  {
30
  "cell_type": "code",
31
  "execution_count": null,
32
+ "id": "a058f796",
33
  "metadata": {},
34
  "outputs": [],
35
  "source": [
 
38
  },
39
  {
40
  "cell_type": "markdown",
41
+ "id": "88961a9f",
42
  "metadata": {},
43
  "source": [
44
  "Create an interactive map."
 
47
  {
48
  "cell_type": "code",
49
  "execution_count": null,
50
+ "id": "b9c9302e",
51
  "metadata": {},
52
  "outputs": [],
53
  "source": [
 
57
  },
58
  {
59
  "cell_type": "markdown",
60
+ "id": "1fbc670a",
61
  "metadata": {},
62
  "source": [
63
  "Specify a Google basemap to use, can be one of [\"ROADMAP\", \"TERRAIN\", \"SATELLITE\", \"HYBRID\"]."
 
66
  {
67
  "cell_type": "code",
68
  "execution_count": null,
69
+ "id": "3cabfa3f",
70
  "metadata": {},
71
  "outputs": [],
72
  "source": [
 
77
  {
78
  "cell_type": "code",
79
  "execution_count": null,
80
+ "id": "a5b34cbd",
81
  "metadata": {},
82
  "outputs": [],
83
  "source": [
 
87
  },
88
  {
89
  "cell_type": "markdown",
90
+ "id": "5f88fc6a",
91
  "metadata": {},
92
  "source": [
93
  "Add a basemap using the `add_basemap()` function."
 
96
  {
97
  "cell_type": "code",
98
  "execution_count": null,
99
+ "id": "80eb3571",
100
  "metadata": {},
101
  "outputs": [],
102
  "source": [
 
108
  },
109
  {
110
  "cell_type": "markdown",
111
+ "id": "aacb1f95",
112
  "metadata": {},
113
  "source": [
114
  "Add an XYZ tile layer."
 
117
  {
118
  "cell_type": "code",
119
  "execution_count": null,
120
+ "id": "cbe08c0b",
121
  "metadata": {},
122
  "outputs": [],
123
  "source": [
 
132
  },
133
  {
134
  "cell_type": "markdown",
135
+ "id": "fb33bb83",
136
  "metadata": {},
137
  "source": [
138
  "Add a WMS tile layer."
 
141
  {
142
  "cell_type": "code",
143
  "execution_count": null,
144
+ "id": "c294d2b2",
145
  "metadata": {},
146
  "outputs": [],
147
  "source": [
 
155
  },
156
  {
157
  "cell_type": "markdown",
158
+ "id": "3661053f",
159
  "metadata": {},
160
  "source": [
161
  "Add a legend to the map."
 
164
  {
165
  "cell_type": "code",
166
  "execution_count": null,
167
+ "id": "968cad3f",
168
  "metadata": {},
169
  "outputs": [],
170
  "source": [
 
183
  "m.add_legend(builtin_legend=\"NWI\")\n",
184
  "m"
185
  ]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
186
  }
187
  ],
188
  "metadata": {
 
190
  "display_name": "Python 3",
191
  "language": "python",
192
  "name": "python3"
193
+ },
194
+ "language_info": {
195
+ "codemirror_mode": {
196
+ "name": "ipython",
197
+ "version": 3
198
+ },
199
+ "file_extension": ".py",
200
+ "mimetype": "text/x-python",
201
+ "name": "python",
202
+ "nbconvert_exporter": "python",
203
+ "pygments_lexer": "ipython3",
204
+ "version": "3.10.8"
205
  }
206
  },
207
  "nbformat": 4,
notebooks/mapbox.ipynb ADDED
@@ -0,0 +1,295 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "cells": [
3
+ {
4
+ "attachments": {},
5
+ "cell_type": "markdown",
6
+ "metadata": {},
7
+ "source": [
8
+ "[![image](https://studiolab.sagemaker.aws/studiolab.svg)](https://studiolab.sagemaker.aws/import/github/giswqs/mapwidget/blob/master/docs/examples/mapbox.ipynb)\n",
9
+ "[![image](https://img.shields.io/badge/Open-Planetary%20Computer-black?style=flat&logo=microsoft)](https://pccompute.westeurope.cloudapp.azure.com/compute/hub/user-redirect/git-pull?repo=https://github.com/giswqs/mapwidget&urlpath=lab/tree/mapwidget/docs/examples/mapbox.ipynb&branch=master)\n",
10
+ "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/giswqs/mapwidget/blob/master/docs/examples/mapbox.ipynb)"
11
+ ]
12
+ },
13
+ {
14
+ "cell_type": "code",
15
+ "execution_count": null,
16
+ "metadata": {},
17
+ "outputs": [],
18
+ "source": [
19
+ "# %pip install mapwidget"
20
+ ]
21
+ },
22
+ {
23
+ "cell_type": "code",
24
+ "execution_count": null,
25
+ "metadata": {},
26
+ "outputs": [],
27
+ "source": [
28
+ "import mapwidget.mapbox as mapwidget"
29
+ ]
30
+ },
31
+ {
32
+ "attachments": {},
33
+ "cell_type": "markdown",
34
+ "metadata": {},
35
+ "source": [
36
+ "You need a Mapbox access token to use the Mapbox widget. First, [sign up](https://account.mapbox.com/auth/signup/) for a free Mapbox account. Then, you can create a token by following the instructions [here](https://docs.mapbox.com/api/accounts/tokens/). Set `Mapbox_TOKEN` as an environment variable to use the Mapbox widget. Alternatively, uncomment the following code block and replace `YOUR-API-TOKEN` with your Mapbox access token."
37
+ ]
38
+ },
39
+ {
40
+ "cell_type": "code",
41
+ "execution_count": null,
42
+ "metadata": {},
43
+ "outputs": [],
44
+ "source": [
45
+ "# import os\n",
46
+ "# os.environ['MAPBOX_TOKEN'] = 'YOUR-API-TOKEN'"
47
+ ]
48
+ },
49
+ {
50
+ "cell_type": "code",
51
+ "execution_count": null,
52
+ "metadata": {},
53
+ "outputs": [],
54
+ "source": [
55
+ "m = mapwidget.Map(center=[20, 0], zoom=2, height='600px')\n",
56
+ "m"
57
+ ]
58
+ },
59
+ {
60
+ "attachments": {},
61
+ "cell_type": "markdown",
62
+ "metadata": {},
63
+ "source": [
64
+ "![](https://i.imgur.com/1PbtnQE.gif)"
65
+ ]
66
+ },
67
+ {
68
+ "cell_type": "code",
69
+ "execution_count": null,
70
+ "metadata": {},
71
+ "outputs": [],
72
+ "source": [
73
+ "m.clicked_latlng"
74
+ ]
75
+ },
76
+ {
77
+ "cell_type": "code",
78
+ "execution_count": null,
79
+ "metadata": {},
80
+ "outputs": [],
81
+ "source": [
82
+ "m.zoom"
83
+ ]
84
+ },
85
+ {
86
+ "cell_type": "code",
87
+ "execution_count": null,
88
+ "metadata": {},
89
+ "outputs": [],
90
+ "source": [
91
+ "m.center"
92
+ ]
93
+ },
94
+ {
95
+ "cell_type": "code",
96
+ "execution_count": null,
97
+ "metadata": {},
98
+ "outputs": [],
99
+ "source": [
100
+ "m.bounds"
101
+ ]
102
+ },
103
+ {
104
+ "cell_type": "code",
105
+ "execution_count": null,
106
+ "metadata": {},
107
+ "outputs": [],
108
+ "source": [
109
+ "esm = \"\"\"\n",
110
+ "\n",
111
+ " const map = new mapboxgl.Map({\n",
112
+ " container: 'map',\n",
113
+ " zoom: 14,\n",
114
+ " center: [-114.26608, 32.7213],\n",
115
+ " pitch: 80,\n",
116
+ " bearing: 41,\n",
117
+ " // Choose from Mapbox's core styles, or make your own style with Mapbox Studio\n",
118
+ " style: 'mapbox://styles/mapbox/satellite-streets-v12'\n",
119
+ " });\n",
120
+ "\n",
121
+ " map.on('style.load', () => {\n",
122
+ " map.addSource('mapbox-dem', {\n",
123
+ " 'type': 'raster-dem',\n",
124
+ " 'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',\n",
125
+ " 'tileSize': 512,\n",
126
+ " 'maxzoom': 14\n",
127
+ " });\n",
128
+ " // add the DEM source as a terrain layer with exaggerated height\n",
129
+ " map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });\n",
130
+ " });\n",
131
+ "\n",
132
+ "\n",
133
+ "\"\"\""
134
+ ]
135
+ },
136
+ {
137
+ "cell_type": "code",
138
+ "execution_count": null,
139
+ "metadata": {},
140
+ "outputs": [],
141
+ "source": [
142
+ "m.set_esm(esm)\n",
143
+ "m"
144
+ ]
145
+ },
146
+ {
147
+ "attachments": {},
148
+ "cell_type": "markdown",
149
+ "metadata": {},
150
+ "source": [
151
+ "![](https://i.imgur.com/xvdrvpx.png)"
152
+ ]
153
+ },
154
+ {
155
+ "cell_type": "code",
156
+ "execution_count": null,
157
+ "metadata": {},
158
+ "outputs": [],
159
+ "source": [
160
+ "esm = \"\"\"\n",
161
+ "\n",
162
+ " (async () => {\n",
163
+ " const map = new mapboxgl.Map({\n",
164
+ " container: 'map',\n",
165
+ " zoom: 13,\n",
166
+ " center: [6.6301, 45.35625],\n",
167
+ " pitch: 80,\n",
168
+ " bearing: 160,\n",
169
+ " interactive: false,\n",
170
+ " // Choose from Mapbox's core styles, or make your own style with Mapbox Studio\n",
171
+ " style: 'mapbox://styles/mapbox/satellite-v9'\n",
172
+ " });\n",
173
+ "\n",
174
+ " await map.once('style.load');\n",
175
+ "\n",
176
+ " // Add daytime fog\n",
177
+ " map.setFog({\n",
178
+ " 'range': [-1, 2],\n",
179
+ " 'horizon-blend': 0.3,\n",
180
+ " 'color': 'white',\n",
181
+ " 'high-color': '#add8e6',\n",
182
+ " 'space-color': '#d8f2ff',\n",
183
+ " 'star-intensity': 0.0\n",
184
+ " });\n",
185
+ "\n",
186
+ " // Add 3D terrain\n",
187
+ " map.addSource('mapbox-dem', {\n",
188
+ " 'type': 'raster-dem',\n",
189
+ " 'url': 'mapbox://mapbox.terrain-rgb',\n",
190
+ " 'tileSize': 512,\n",
191
+ " 'maxzoom': 14\n",
192
+ " });\n",
193
+ " map.setTerrain({\n",
194
+ " 'source': 'mapbox-dem',\n",
195
+ " 'exaggeration': 1.5\n",
196
+ " });\n",
197
+ "\n",
198
+ " // Run a timing loop to switch between day and night\n",
199
+ " await map.once('idle');\n",
200
+ "\n",
201
+ " let lastTime = 0.0;\n",
202
+ " let animationTime = 0.0;\n",
203
+ " let cycleTime = 0.0;\n",
204
+ " let night = true;\n",
205
+ "\n",
206
+ " const initialBearing = map.getBearing();\n",
207
+ "\n",
208
+ " function frame(time) {\n",
209
+ " const elapsedTime = (time - lastTime) / 1000.0;\n",
210
+ "\n",
211
+ " animationTime += elapsedTime;\n",
212
+ " cycleTime += elapsedTime;\n",
213
+ "\n",
214
+ " if (cycleTime >= 10.0) {\n",
215
+ " if (night) {\n",
216
+ " // night fog styling\n",
217
+ " map.setFog({\n",
218
+ " 'range': [-1, 2],\n",
219
+ " 'horizon-blend': 0.3,\n",
220
+ " 'color': '#242B4B',\n",
221
+ " 'high-color': '#161B36',\n",
222
+ " 'space-color': '#0B1026',\n",
223
+ " 'star-intensity': 0.8\n",
224
+ " });\n",
225
+ " } else {\n",
226
+ " // day fog styling\n",
227
+ " map.setFog({\n",
228
+ " 'range': [-1, 2],\n",
229
+ " 'horizon-blend': 0.3,\n",
230
+ " 'color': 'white',\n",
231
+ " 'high-color': '#add8e6',\n",
232
+ " 'space-color': '#d8f2ff',\n",
233
+ " 'star-intensity': 0.0\n",
234
+ " });\n",
235
+ " }\n",
236
+ "\n",
237
+ " night = !night;\n",
238
+ " cycleTime = 0.0;\n",
239
+ " }\n",
240
+ "\n",
241
+ " const rotation = initialBearing + animationTime * 2.0;\n",
242
+ " map.setBearing(rotation % 360);\n",
243
+ "\n",
244
+ " lastTime = time;\n",
245
+ "\n",
246
+ " window.requestAnimationFrame(frame);\n",
247
+ " }\n",
248
+ "\n",
249
+ " window.requestAnimationFrame(frame);\n",
250
+ " })();\n",
251
+ "\n",
252
+ "\"\"\""
253
+ ]
254
+ },
255
+ {
256
+ "cell_type": "code",
257
+ "execution_count": null,
258
+ "metadata": {},
259
+ "outputs": [],
260
+ "source": [
261
+ "m.set_esm(esm)\n",
262
+ "m"
263
+ ]
264
+ },
265
+ {
266
+ "attachments": {},
267
+ "cell_type": "markdown",
268
+ "metadata": {},
269
+ "source": [
270
+ "![](https://i.imgur.com/ZRRUK3v.png)"
271
+ ]
272
+ }
273
+ ],
274
+ "metadata": {
275
+ "kernelspec": {
276
+ "display_name": "Python 3 (ipykernel)",
277
+ "language": "python",
278
+ "name": "python3"
279
+ },
280
+ "language_info": {
281
+ "codemirror_mode": {
282
+ "name": "ipython",
283
+ "version": 3
284
+ },
285
+ "file_extension": ".py",
286
+ "mimetype": "text/x-python",
287
+ "name": "python",
288
+ "nbconvert_exporter": "python",
289
+ "pygments_lexer": "ipython3",
290
+ "version": "3.10.8"
291
+ }
292
+ },
293
+ "nbformat": 4,
294
+ "nbformat_minor": 4
295
+ }
notebooks/maplibre.ipynb ADDED
@@ -0,0 +1,288 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "cells": [
3
+ {
4
+ "cell_type": "markdown",
5
+ "metadata": {},
6
+ "source": [
7
+ "[![image](https://studiolab.sagemaker.aws/studiolab.svg)](https://studiolab.sagemaker.aws/import/github/giswqs/mapwidget/blob/master/docs/examples/maplibre.ipynb)\n",
8
+ "[![image](https://img.shields.io/badge/Open-Planetary%20Computer-black?style=flat&logo=microsoft)](https://pccompute.westeurope.cloudapp.azure.com/compute/hub/user-redirect/git-pull?repo=https://github.com/giswqs/mapwidget&urlpath=lab/tree/mapwidget/docs/examples/maplibre.ipynb&branch=master)\n",
9
+ "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/giswqs/mapwidget/blob/master/docs/examples/maplibre.ipynb)"
10
+ ]
11
+ },
12
+ {
13
+ "cell_type": "code",
14
+ "execution_count": null,
15
+ "metadata": {},
16
+ "outputs": [],
17
+ "source": [
18
+ "# %pip install mapwidget"
19
+ ]
20
+ },
21
+ {
22
+ "cell_type": "code",
23
+ "execution_count": null,
24
+ "metadata": {},
25
+ "outputs": [],
26
+ "source": [
27
+ "import mapwidget.maplibre as mapwidget"
28
+ ]
29
+ },
30
+ {
31
+ "cell_type": "code",
32
+ "execution_count": null,
33
+ "metadata": {},
34
+ "outputs": [],
35
+ "source": [
36
+ "m = mapwidget.Map(center=[20, 0], zoom=2, height='600px')\n",
37
+ "m"
38
+ ]
39
+ },
40
+ {
41
+ "cell_type": "markdown",
42
+ "metadata": {},
43
+ "source": [
44
+ "![](https://i.imgur.com/Pxi43kg.png)"
45
+ ]
46
+ },
47
+ {
48
+ "cell_type": "code",
49
+ "execution_count": null,
50
+ "metadata": {},
51
+ "outputs": [],
52
+ "source": [
53
+ "m.center"
54
+ ]
55
+ },
56
+ {
57
+ "cell_type": "code",
58
+ "execution_count": null,
59
+ "metadata": {},
60
+ "outputs": [],
61
+ "source": [
62
+ "m.zoom"
63
+ ]
64
+ },
65
+ {
66
+ "cell_type": "code",
67
+ "execution_count": null,
68
+ "metadata": {},
69
+ "outputs": [],
70
+ "source": [
71
+ "m.bounds"
72
+ ]
73
+ },
74
+ {
75
+ "cell_type": "code",
76
+ "execution_count": null,
77
+ "metadata": {},
78
+ "outputs": [],
79
+ "source": [
80
+ "m.clicked_latlng"
81
+ ]
82
+ },
83
+ {
84
+ "cell_type": "code",
85
+ "execution_count": null,
86
+ "metadata": {},
87
+ "outputs": [],
88
+ "source": [
89
+ "esm = \"\"\"\n",
90
+ "\n",
91
+ " var videoStyle = {\n",
92
+ " 'version': 8,\n",
93
+ " 'sources': {\n",
94
+ " 'satellite': {\n",
95
+ " 'type': 'raster',\n",
96
+ " 'url':\n",
97
+ " 'https://api.maptiler.com/tiles/satellite/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',\n",
98
+ " 'tileSize': 256\n",
99
+ " },\n",
100
+ " 'video': {\n",
101
+ " 'type': 'video',\n",
102
+ " 'urls': [\n",
103
+ " 'https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4',\n",
104
+ " 'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'\n",
105
+ " ],\n",
106
+ " 'coordinates': [\n",
107
+ " [-122.51596391201019, 37.56238816766053],\n",
108
+ " [-122.51467645168304, 37.56410183312965],\n",
109
+ " [-122.51309394836426, 37.563391708549425],\n",
110
+ " [-122.51423120498657, 37.56161849366671]\n",
111
+ " ]\n",
112
+ " }\n",
113
+ " },\n",
114
+ " 'layers': [\n",
115
+ " {\n",
116
+ " 'id': 'background',\n",
117
+ " 'type': 'background',\n",
118
+ " 'paint': {\n",
119
+ " 'background-color': 'rgb(4,7,14)'\n",
120
+ " }\n",
121
+ " },\n",
122
+ " {\n",
123
+ " 'id': 'satellite',\n",
124
+ " 'type': 'raster',\n",
125
+ " 'source': 'satellite'\n",
126
+ " },\n",
127
+ " {\n",
128
+ " 'id': 'video',\n",
129
+ " 'type': 'raster',\n",
130
+ " 'source': 'video'\n",
131
+ " }\n",
132
+ " ]\n",
133
+ " };\n",
134
+ "\n",
135
+ " var map = new maplibregl.Map({\n",
136
+ " container: 'map',\n",
137
+ " minZoom: 14,\n",
138
+ " zoom: 17,\n",
139
+ " center: [-122.514426, 37.562984],\n",
140
+ " bearing: -96,\n",
141
+ " style: videoStyle\n",
142
+ " });\n",
143
+ "\n",
144
+ " var playingVideo = true;\n",
145
+ "\n",
146
+ " map.on('click', function () {\n",
147
+ " playingVideo = !playingVideo;\n",
148
+ "\n",
149
+ " if (playingVideo) map.getSource('video').play();\n",
150
+ " else map.getSource('video').pause();\n",
151
+ " });\n",
152
+ "\n",
153
+ "\"\"\""
154
+ ]
155
+ },
156
+ {
157
+ "cell_type": "code",
158
+ "execution_count": null,
159
+ "metadata": {},
160
+ "outputs": [],
161
+ "source": [
162
+ "m.set_esm(esm)\n",
163
+ "m"
164
+ ]
165
+ },
166
+ {
167
+ "cell_type": "markdown",
168
+ "metadata": {},
169
+ "source": [
170
+ "![](https://i.imgur.com/o2ZHeTL.gif)"
171
+ ]
172
+ },
173
+ {
174
+ "cell_type": "code",
175
+ "execution_count": null,
176
+ "metadata": {},
177
+ "outputs": [],
178
+ "source": [
179
+ "esm = \"\"\"\n",
180
+ "\n",
181
+ " var map = (window.map = new maplibregl.Map({\n",
182
+ " container: 'map',\n",
183
+ " zoom: 12,\n",
184
+ " center: [11.39085, 47.27574],\n",
185
+ " pitch: 52,\n",
186
+ " hash: true,\n",
187
+ " style: {\n",
188
+ " version: 8,\n",
189
+ " sources: {\n",
190
+ " osm: {\n",
191
+ " type: 'raster',\n",
192
+ " tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],\n",
193
+ " tileSize: 256,\n",
194
+ " attribution: '&copy; OpenStreetMap Contributors',\n",
195
+ " maxzoom: 19\n",
196
+ " },\n",
197
+ " terrainSource: {\n",
198
+ " type: 'raster-dem',\n",
199
+ " url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',\n",
200
+ " tileSize: 256\n",
201
+ " },\n",
202
+ " hillshadeSource: {\n",
203
+ " type: 'raster-dem',\n",
204
+ " url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',\n",
205
+ " tileSize: 256\n",
206
+ " }\n",
207
+ " },\n",
208
+ " layers: [\n",
209
+ " {\n",
210
+ " id: 'osm',\n",
211
+ " type: 'raster',\n",
212
+ " source: 'osm'\n",
213
+ " },\n",
214
+ " {\n",
215
+ " id: 'hills',\n",
216
+ " type: 'hillshade',\n",
217
+ " source: 'hillshadeSource',\n",
218
+ " layout: { visibility: 'visible' },\n",
219
+ " paint: { 'hillshade-shadow-color': '#473B24' }\n",
220
+ " }\n",
221
+ " ],\n",
222
+ " terrain: {\n",
223
+ " source: 'terrainSource',\n",
224
+ " exaggeration: 1\n",
225
+ " }\n",
226
+ " },\n",
227
+ " maxZoom: 18,\n",
228
+ " maxPitch: 85\n",
229
+ " }));\n",
230
+ "\n",
231
+ " map.addControl(\n",
232
+ " new maplibregl.NavigationControl({\n",
233
+ " visualizePitch: true,\n",
234
+ " showZoom: true,\n",
235
+ " showCompass: true\n",
236
+ " })\n",
237
+ " );\n",
238
+ "\n",
239
+ " map.addControl(\n",
240
+ " new maplibregl.TerrainControl({\n",
241
+ " source: 'terrainSource',\n",
242
+ " exaggeration: 1\n",
243
+ " })\n",
244
+ " );\n",
245
+ "\n",
246
+ "\"\"\""
247
+ ]
248
+ },
249
+ {
250
+ "cell_type": "code",
251
+ "execution_count": null,
252
+ "metadata": {},
253
+ "outputs": [],
254
+ "source": [
255
+ "m.set_esm(esm)\n",
256
+ "m"
257
+ ]
258
+ },
259
+ {
260
+ "cell_type": "markdown",
261
+ "metadata": {},
262
+ "source": [
263
+ "![](https://i.imgur.com/TTN1mx5.png)"
264
+ ]
265
+ }
266
+ ],
267
+ "metadata": {
268
+ "kernelspec": {
269
+ "display_name": "Python 3",
270
+ "language": "python",
271
+ "name": "python3"
272
+ },
273
+ "language_info": {
274
+ "codemirror_mode": {
275
+ "name": "ipython",
276
+ "version": 3
277
+ },
278
+ "file_extension": ".py",
279
+ "mimetype": "text/x-python",
280
+ "name": "python",
281
+ "nbconvert_exporter": "python",
282
+ "pygments_lexer": "ipython3",
283
+ "version": "3.10.8"
284
+ }
285
+ },
286
+ "nbformat": 4,
287
+ "nbformat_minor": 4
288
+ }
notebooks/openlayers.ipynb ADDED
@@ -0,0 +1,112 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "cells": [
3
+ {
4
+ "attachments": {},
5
+ "cell_type": "markdown",
6
+ "metadata": {},
7
+ "source": [
8
+ "[![image](https://studiolab.sagemaker.aws/studiolab.svg)](https://studiolab.sagemaker.aws/import/github/giswqs/mapwidget/blob/master/docs/examples/openlayers.ipynb)\n",
9
+ "[![image](https://img.shields.io/badge/Open-Planetary%20Computer-black?style=flat&logo=microsoft)](https://pccompute.westeurope.cloudapp.azure.com/compute/hub/user-redirect/git-pull?repo=https://github.com/giswqs/mapwidget&urlpath=lab/tree/mapwidget/docs/examples/openlayers.ipynb&branch=master)\n",
10
+ "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/giswqs/mapwidget/blob/master/docs/examples/openlayers.ipynb)"
11
+ ]
12
+ },
13
+ {
14
+ "cell_type": "code",
15
+ "execution_count": null,
16
+ "metadata": {},
17
+ "outputs": [],
18
+ "source": [
19
+ "# %pip install mapwidget"
20
+ ]
21
+ },
22
+ {
23
+ "cell_type": "code",
24
+ "execution_count": null,
25
+ "metadata": {},
26
+ "outputs": [],
27
+ "source": [
28
+ "import mapwidget.openlayers as mapwidget"
29
+ ]
30
+ },
31
+ {
32
+ "cell_type": "code",
33
+ "execution_count": null,
34
+ "metadata": {},
35
+ "outputs": [],
36
+ "source": [
37
+ "m = mapwidget.Map(center=[20, 0], zoom=2, height='600px')\n",
38
+ "m"
39
+ ]
40
+ },
41
+ {
42
+ "attachments": {},
43
+ "cell_type": "markdown",
44
+ "metadata": {},
45
+ "source": [
46
+ "![](https://i.imgur.com/CqP4Ehm.png)"
47
+ ]
48
+ },
49
+ {
50
+ "cell_type": "code",
51
+ "execution_count": null,
52
+ "metadata": {},
53
+ "outputs": [],
54
+ "source": [
55
+ "m.clicked_latlng"
56
+ ]
57
+ },
58
+ {
59
+ "cell_type": "code",
60
+ "execution_count": null,
61
+ "metadata": {},
62
+ "outputs": [],
63
+ "source": [
64
+ "m.center"
65
+ ]
66
+ },
67
+ {
68
+ "cell_type": "code",
69
+ "execution_count": null,
70
+ "metadata": {},
71
+ "outputs": [],
72
+ "source": [
73
+ "m.zoom"
74
+ ]
75
+ },
76
+ {
77
+ "cell_type": "code",
78
+ "execution_count": null,
79
+ "metadata": {},
80
+ "outputs": [],
81
+ "source": [
82
+ "m.bounds"
83
+ ]
84
+ }
85
+ ],
86
+ "metadata": {
87
+ "kernelspec": {
88
+ "display_name": "Python 3 (ipykernel)",
89
+ "language": "python",
90
+ "name": "python3"
91
+ },
92
+ "language_info": {
93
+ "codemirror_mode": {
94
+ "name": "ipython",
95
+ "version": 3
96
+ },
97
+ "file_extension": ".py",
98
+ "mimetype": "text/x-python",
99
+ "name": "python",
100
+ "nbconvert_exporter": "python",
101
+ "pygments_lexer": "ipython3",
102
+ "version": "3.10.8"
103
+ },
104
+ "vscode": {
105
+ "interpreter": {
106
+ "hash": "31f05ea183a4718249d13ada7f166c6bdba1d00716247af5c11c23af8d5923f1"
107
+ }
108
+ }
109
+ },
110
+ "nbformat": 4,
111
+ "nbformat_minor": 4
112
+ }