{ "cells": [ { "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ "[![image](https://studiolab.sagemaker.aws/studiolab.svg)](https://studiolab.sagemaker.aws/import/github/giswqs/mapwidget/blob/master/docs/examples/mapbox.ipynb)\n", "[![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", "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/giswqs/mapwidget/blob/master/docs/examples/mapbox.ipynb)" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "# %pip install mapwidget" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import mapwidget.mapbox as mapwidget" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ "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." ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "# import os\n", "# os.environ['MAPBOX_TOKEN'] = 'YOUR-API-TOKEN'" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "m = mapwidget.Map(center=[20, 0], zoom=2, height='600px')\n", "m" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ "![](https://i.imgur.com/1PbtnQE.gif)" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "m.clicked_latlng" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "m.zoom" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "m.center" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "m.bounds" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "esm = \"\"\"\n", "\n", " const map = new mapboxgl.Map({\n", " container: 'map',\n", " zoom: 14,\n", " center: [-114.26608, 32.7213],\n", " pitch: 80,\n", " bearing: 41,\n", " // Choose from Mapbox's core styles, or make your own style with Mapbox Studio\n", " style: 'mapbox://styles/mapbox/satellite-streets-v12'\n", " });\n", "\n", " map.on('style.load', () => {\n", " map.addSource('mapbox-dem', {\n", " 'type': 'raster-dem',\n", " 'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',\n", " 'tileSize': 512,\n", " 'maxzoom': 14\n", " });\n", " // add the DEM source as a terrain layer with exaggerated height\n", " map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });\n", " });\n", "\n", "\n", "\"\"\"" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "m.set_esm(esm)\n", "m" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ "![](https://i.imgur.com/xvdrvpx.png)" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "esm = \"\"\"\n", "\n", " (async () => {\n", " const map = new mapboxgl.Map({\n", " container: 'map',\n", " zoom: 13,\n", " center: [6.6301, 45.35625],\n", " pitch: 80,\n", " bearing: 160,\n", " interactive: false,\n", " // Choose from Mapbox's core styles, or make your own style with Mapbox Studio\n", " style: 'mapbox://styles/mapbox/satellite-v9'\n", " });\n", "\n", " await map.once('style.load');\n", "\n", " // Add daytime fog\n", " map.setFog({\n", " 'range': [-1, 2],\n", " 'horizon-blend': 0.3,\n", " 'color': 'white',\n", " 'high-color': '#add8e6',\n", " 'space-color': '#d8f2ff',\n", " 'star-intensity': 0.0\n", " });\n", "\n", " // Add 3D terrain\n", " map.addSource('mapbox-dem', {\n", " 'type': 'raster-dem',\n", " 'url': 'mapbox://mapbox.terrain-rgb',\n", " 'tileSize': 512,\n", " 'maxzoom': 14\n", " });\n", " map.setTerrain({\n", " 'source': 'mapbox-dem',\n", " 'exaggeration': 1.5\n", " });\n", "\n", " // Run a timing loop to switch between day and night\n", " await map.once('idle');\n", "\n", " let lastTime = 0.0;\n", " let animationTime = 0.0;\n", " let cycleTime = 0.0;\n", " let night = true;\n", "\n", " const initialBearing = map.getBearing();\n", "\n", " function frame(time) {\n", " const elapsedTime = (time - lastTime) / 1000.0;\n", "\n", " animationTime += elapsedTime;\n", " cycleTime += elapsedTime;\n", "\n", " if (cycleTime >= 10.0) {\n", " if (night) {\n", " // night fog styling\n", " map.setFog({\n", " 'range': [-1, 2],\n", " 'horizon-blend': 0.3,\n", " 'color': '#242B4B',\n", " 'high-color': '#161B36',\n", " 'space-color': '#0B1026',\n", " 'star-intensity': 0.8\n", " });\n", " } else {\n", " // day fog styling\n", " map.setFog({\n", " 'range': [-1, 2],\n", " 'horizon-blend': 0.3,\n", " 'color': 'white',\n", " 'high-color': '#add8e6',\n", " 'space-color': '#d8f2ff',\n", " 'star-intensity': 0.0\n", " });\n", " }\n", "\n", " night = !night;\n", " cycleTime = 0.0;\n", " }\n", "\n", " const rotation = initialBearing + animationTime * 2.0;\n", " map.setBearing(rotation % 360);\n", "\n", " lastTime = time;\n", "\n", " window.requestAnimationFrame(frame);\n", " }\n", "\n", " window.requestAnimationFrame(frame);\n", " })();\n", "\n", "\"\"\"" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "m.set_esm(esm)\n", "m" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ "![](https://i.imgur.com/ZRRUK3v.png)" ] } ], "metadata": { "kernelspec": { "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.10.8" } }, "nbformat": 4, "nbformat_minor": 4 }