Duplicate from giswqs/voila-geospatial

Co-authored-by: Qiusheng Wu <[email protected]>

.gitattributes

@@ -0,0 +1,34 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.github/workflows/sync-hf.yml

@@ -0,0 +1,20 @@
+name: Sync to Hugging Face hub
+on:
+  push:
+    branches: [main]
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push https://giswqs:[email protected]/spaces/giswqs/voila-geospatial main

.gitignore

@@ -0,0 +1,130 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+Aptfile
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+pip-wheel-metadata/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+.python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/

Dockerfile

@@ -0,0 +1,25 @@
+FROM jupyter/base-notebook:latest
+
+RUN mamba install -c conda-forge leafmap geemap mapwidget geopandas localtileserver voila nodejs -y && \
+    fix-permissions "${CONDA_DIR}" && \
+    fix-permissions "/home/${NB_USER}"
+
+# COPY requirements.txt .
+# RUN pip install --no-cache-dir -r requirements.txt
+
+RUN mkdir ./notebooks
+COPY /notebooks ./notebooks
+
+COPY run.sh .
+
+ENV PROJ_LIB='/opt/conda/share/proj'
+
+USER root
+RUN chown -R ${NB_UID} ${HOME}
+USER ${NB_USER}
+
+RUN jupyter nbextension enable --py --sys-prefix widgetsnbextension
+
+EXPOSE 8866
+
+CMD ["/bin/bash", "run.sh"]

README.md

@@ -0,0 +1,47 @@
+---
+title: Voila Geospatial
+emoji: 🦀
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: false
+license: mit
+app_port: 8866
+duplicated_from: giswqs/voila-geospatial
+---
+
+## Links
+
+- GitHub: <https://github.com/opengeos/voila-geospatial>
+- Hugging Face: <https://huggingface.co/spaces/giswqs/voila-geospatial/tree/main>
+- Web App: <https://giswqs-voila-geospatial.hf.space>
+
+## How to deploy this app to Hugging Face Spaces
+
+1. Go to <https://huggingface.co/spaces/giswqs/voila-geospatial/tree/main> and duplicate the space to your own space.
+
+   ![](https://i.imgur.com/4ib5BzB.png)
+
+2. Set environment variables as needed. For example, if you use Google Earth Engine, you need to set `EARTHENGINE_TOKEN` to your Earth Engine token. The token value should be copied from the following file depending on your operating system:
+
+   ```text
+   Windows: C:\\Users\\USERNAME\\.config\\earthengine\\credentials
+   Linux: /home/USERNAME/.config/earthengine/credentials
+   MacOS: /Users/USERNAME/.config/earthengine/credentials
+   ```
+
+   Simply open the file and copy **ALL** the content to the `EARTHENGINE_TOKEN` environment variable.
+
+   ![](https://i.imgur.com/i04gzyH.png)
+
+   ![](https://i.imgur.com/Ex37Ut7.png)
+
+3. After the space is built successfully, click the `Embed this Space` menu and find the `Direct URL` for the app, such as <https://giswqs-voila-geospatial.hf.space>.
+
+   ![](https://i.imgur.com/V2Lp0dP.png)
+
+   ![](https://i.imgur.com/klhR5FL.png)
+
+4. Add your own notebooks to the `notebooks` folder and wait for the app to be rebuilt.
+
+5. To hide the source code from the notebook, modify `run.sh` and set `--strip_sources=True`.

notebooks/bqplot.ipynb

@@ -0,0 +1,135 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from bqplot import pyplot as plt\n",
+    "import ipywidgets as widgets\n",
+    "import numpy as np"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# generate some fake \n",
+    "n = 2000\n",
+    "x = np.linspace(0.0, 10.0, n)\n",
+    "np.random.seed(0)\n",
+    "y = np.cumsum(np.random.randn(n)*10).astype(int)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "fig_hist = plt.figure( title='Histogram')\n",
+    "hist = plt.hist(y, bins=25)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "hist.bins = 10;"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "slider = widgets.IntSlider(description='Bins number', min=1, max=100, v_model=30)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [],
+   "source": [
+    "widgets.link((hist, 'bins'), (slider, 'value'))\n",
+    "\n",
+    "fig_lines = plt.figure( title='Line Chart')\n",
+    "lines = plt.plot(x, y)\n",
+    "\n",
+    "fig_lines.layout.width = 'auto'\n",
+    "fig_lines.layout.height = 'auto'\n",
+    "fig_hist.layout.width = 'auto'\n",
+    "fig_hist.layout.height = 'auto'\n",
+    "\n",
+    "grid_layout = widgets.GridspecLayout(5, 3)\n",
+    "\n",
+    "grid_layout[:2, :] = fig_lines\n",
+    "grid_layout[2:4, :] = fig_hist\n",
+    "grid_layout[4, 1] = slider\n",
+    "\n",
+    "grid_layout.layout.height = '1000px'\n",
+    "\n",
+    "grid_layout"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "selector = plt.brush_int_selector()\n",
+    "def update_range(*ignore):\n",
+    "    if selector.selected is not None and len(selector.selected) == 2:\n",
+    "        xmin, xmax = selector.selected\n",
+    "        mask = (x > xmin) & (x < xmax)\n",
+    "        hist.sample = y[mask]\n",
+    "selector.observe(update_range, 'selected')        "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "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.7.3"
+  },
+  "widgets": {
+   "application/vnd.jupyter.widget-state+json": {
+    "state": {},
+    "version_major": 2,
+    "version_minor": 0
+   }
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

notebooks/cesium.ipynb

@@ -0,0 +1,138 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "[![image](https://studiolab.sagemaker.aws/studiolab.svg)](https://studiolab.sagemaker.aws/import/github/giswqs/mapwidget/blob/master/docs/examples/cesium.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/cesium.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/cesium.ipynb)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install mapwidget"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import os\n",
+    "import mapwidget.cesium as mapwidget"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "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."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "if os.environ.get('CESIUM_TOKEN') is None:\n",
+    "    token = 'YOUR-CESIUM-TOKEN'\n",
+    "else:\n",
+    "    token = os.environ.get('CESIUM_TOKEN')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "San Francisco"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = mapwidget.Map(center=[37.655, -122.4175], altitude=400, height='600px', token=token)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/gK2wA4p.gif)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "New York City"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = mapwidget.Map(center=[40.70605, -74.01177], altitude=600, height='600px', token=token)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/6quoDtN.gif)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.center"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.zoom"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "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
+}

notebooks/esm.ipynb

@@ -0,0 +1,354 @@
+{
+    "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/esm.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/esm.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/esm.ipynb)"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "# %pip install mapwidget"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "import os\n",
+                "import anywidget\n",
+                "import traitlets"
+            ]
+        },
+        {
+            "attachments": {},
+            "cell_type": "markdown",
+            "metadata": {},
+            "source": [
+                "## Leaflet"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "class MapWidget(anywidget.AnyWidget):\n",
+                "    _esm = \"\"\"\n",
+                "    import * as L from \"https://esm.sh/[email protected]\";\n",
+                "    export function render(view) {\n",
+                "    \n",
+                "            let center = view.model.get(\"center\");\n",
+                "            let zoom = view.model.get(\"zoom\");\n",
+                "            let width = view.model.get(\"width\");\n",
+                "            let height = view.model.get(\"height\");\n",
+                "            \n",
+                "            const container = document.createElement(\"div\");     \n",
+                "            container.style.width = width;       \n",
+                "            container.style.height = height;\n",
+                "            \n",
+                "            const map = L.map(container).setView(center, zoom);\n",
+                "            L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n",
+                "                attribution: 'Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors',\n",
+                "                maxZoom: 24,\n",
+                "            }).addTo(map);\n",
+                "            \n",
+                "            view.el.appendChild(container);\n",
+                "        }\n",
+                "    \"\"\"\n",
+                "\n",
+                "    _css = \"https://unpkg.com/[email protected]/dist/leaflet.css\"\n",
+                "\n",
+                "    center = traitlets.List([20, 0]).tag(sync=True, o=True)\n",
+                "    zoom = traitlets.Int(2).tag(sync=True, o=True)\n",
+                "    width = traitlets.Unicode(\"100%\").tag(sync=True, o=True)\n",
+                "    height = traitlets.Unicode(\"600px\").tag(sync=True, o=True)\n",
+                "\n",
+                "\n",
+                "m = MapWidget(center=[20, 0], zoom=2, height='600px')\n",
+                "m"
+            ]
+        },
+        {
+            "attachments": {},
+            "cell_type": "markdown",
+            "metadata": {},
+            "source": [
+                "## Maplibre"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "class MapWidget(anywidget.AnyWidget):\n",
+                "    _esm = \"\"\"\n",
+                "    import maplibregl from \"https://esm.sh/[email protected]\";\n",
+                "\n",
+                "    export function render(view) {\n",
+                "    \n",
+                "        let center = view.model.get(\"center\");\n",
+                "        center.reverse();\n",
+                "        let zoom = view.model.get(\"zoom\");\n",
+                "        let width = view.model.get(\"width\");\n",
+                "        let height = view.model.get(\"height\");\n",
+                "\n",
+                "        const div = document.createElement(\"div\");\n",
+                "        div.style.width = width;\n",
+                "        div.style.height = height;\n",
+                "\n",
+                "        const map = new maplibregl.Map({\n",
+                "          container: div,\n",
+                "          style: 'https://demotiles.maplibre.org/style.json', // stylesheet location\n",
+                "          center: center, // starting position [lng, lat]\n",
+                "          zoom: zoom // starting zoom\n",
+                "        });\n",
+                "        view.el.appendChild(div);\n",
+                "    }\n",
+                "    \"\"\"\n",
+                "    _css = \"https://esm.sh/[email protected]?css\"\n",
+                "\n",
+                "    center = traitlets.List([20, 0]).tag(sync=True, o=True)\n",
+                "    zoom = traitlets.Int(2).tag(sync=True, o=True)\n",
+                "    width = traitlets.Unicode(\"100%\").tag(sync=True, o=True)\n",
+                "    height = traitlets.Unicode(\"600px\").tag(sync=True, o=True)\n",
+                "\n",
+                "\n",
+                "m = MapWidget(center=[20, 0], zoom=2)\n",
+                "m"
+            ]
+        },
+        {
+            "attachments": {},
+            "cell_type": "markdown",
+            "metadata": {},
+            "source": [
+                "## Mapbox"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "class MapWidget(anywidget.AnyWidget):\n",
+                "    _esm = \"\"\"\n",
+                "    import mapboxgl from \"https://esm.sh/[email protected]\";\n",
+                "\n",
+                "    export function render(view) {\n",
+                "        let center = view.model.get(\"center\");\n",
+                "        center.reverse();\n",
+                "        let zoom = view.model.get(\"zoom\");\n",
+                "        let width = view.model.get(\"width\");\n",
+                "        let height = view.model.get(\"height\");\n",
+                "\n",
+                "        const div = document.createElement(\"div\");\n",
+                "        div.style.width = width;\n",
+                "        div.style.height = height;\n",
+                "\n",
+                "        let token = view.model.get(\"token\");\n",
+                "\n",
+                "        mapboxgl.accessToken = token;\n",
+                "        const map = new mapboxgl.Map({\n",
+                "            container: div,\n",
+                "            style: \"mapbox://styles/mapbox/streets-v12\",\n",
+                "            center: center,\n",
+                "            zoom: zoom,\n",
+                "        });\n",
+                "        view.el.appendChild(div);\n",
+                "    }\n",
+                "\n",
+                "    \"\"\"\n",
+                "    _css = \"https://esm.sh/[email protected]?css\"\n",
+                "\n",
+                "    default_token = os.environ.get('MAPBOX_TOKEN')\n",
+                "    token = traitlets.Unicode(default_token).tag(sync=True)\n",
+                "    center = traitlets.List([20, 0]).tag(sync=True, o=True)\n",
+                "    zoom = traitlets.Int(2).tag(sync=True, o=True)\n",
+                "    width = traitlets.Unicode('100%').tag(sync=True, o=True)\n",
+                "    height = traitlets.Unicode('600px').tag(sync=True, o=True)\n",
+                "\n",
+                "\n",
+                "m = MapWidget(center=[20, 0], zoom=2)\n",
+                "m"
+            ]
+        },
+        {
+            "attachments": {},
+            "cell_type": "markdown",
+            "metadata": {},
+            "source": [
+                "## Cesium"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "class MapWidget(anywidget.AnyWidget):\n",
+                "    _esm = \"\"\"\n",
+                "    function loadScript(src) {\n",
+                "      return new Promise((resolve, reject) => {\n",
+                "        let script = Object.assign(document.createElement(\"script\"), {\n",
+                "          type: \"text/javascript\",\n",
+                "          async: true,\n",
+                "          src: src,\n",
+                "        });\n",
+                "        script.addEventListener(\"load\", resolve);\n",
+                "        script.addEventListener(\"error\", reject);\n",
+                "        document.body.appendChild(script);\n",
+                "      });\n",
+                "    };\n",
+                "    \n",
+                "    await loadScript(\"https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Cesium.js\");\n",
+                "    \n",
+                "    export function render(view) {\n",
+                "    \n",
+                "      let width = view.model.get(\"width\");\n",
+                "      let height = view.model.get(\"height\");\n",
+                "        \n",
+                "      const div = document.createElement(\"div\");\n",
+                "      div.style.width = width;\n",
+                "      div.style.height = height;\n",
+                "      \n",
+                "      Cesium.Ion.defaultAccessToken = view.model.get(\"token\");\n",
+                "\n",
+                "      const viewer = new Cesium.Viewer(div, {\n",
+                "        terrainProvider: Cesium.createWorldTerrain()\n",
+                "      });    \n",
+                "\n",
+                "      const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   \n",
+                "\n",
+                "      viewer.camera.flyTo({\n",
+                "        destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),\n",
+                "        orientation : {\n",
+                "          heading : Cesium.Math.toRadians(0.0),\n",
+                "          pitch : Cesium.Math.toRadians(-15.0),\n",
+                "        }\n",
+                "      });\n",
+                "      \n",
+                "      view.el.appendChild(div);\n",
+                "    }\n",
+                "    \"\"\"\n",
+                "    # make sure to include styles\n",
+                "    _css = \"https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Widgets/widgets.css\"\n",
+                "    default_token = os.environ.get('CESIUM_TOKEN')\n",
+                "    token = traitlets.Unicode(default_token).tag(sync=True)\n",
+                "    width = traitlets.Unicode('100%').tag(sync=True, o=True)\n",
+                "    height = traitlets.Unicode('600px').tag(sync=True, o=True)\n",
+                "\n",
+                "\n",
+                "m = MapWidget()\n",
+                "m"
+            ]
+        },
+        {
+            "attachments": {},
+            "cell_type": "markdown",
+            "metadata": {},
+            "source": [
+                "## OpenLayers"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "class MapWidget(anywidget.AnyWidget):\n",
+                "    _esm = \"\"\"\n",
+                "    function loadScript(src) {\n",
+                "      return new Promise((resolve, reject) => {\n",
+                "        let script = Object.assign(document.createElement(\"script\"), {\n",
+                "          type: \"text/javascript\",\n",
+                "          async: true,\n",
+                "          src: src,\n",
+                "        });\n",
+                "        script.addEventListener(\"load\", resolve);\n",
+                "        script.addEventListener(\"error\", reject);\n",
+                "        document.body.appendChild(script);\n",
+                "      });\n",
+                "    };\n",
+                "    \n",
+                "    await loadScript(\"https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js\");\n",
+                "    \n",
+                "    export function render(view) {\n",
+                "    \n",
+                "      let center = view.model.get(\"center\");\n",
+                "      center.reverse();\n",
+                "      let zoom = view.model.get(\"zoom\");\n",
+                "      let width = view.model.get(\"width\");\n",
+                "      let height = view.model.get(\"height\");\n",
+                "\n",
+                "      const div = document.createElement(\"div\");\n",
+                "      div.style.width = width;\n",
+                "      div.style.height = height;\n",
+                "      \n",
+                "        var map = new ol.Map({\n",
+                "            target: div,\n",
+                "            layers: [\n",
+                "                new ol.layer.Tile({\n",
+                "                    source: new ol.source.OSM()\n",
+                "                })\n",
+                "            ],\n",
+                "            view: new ol.View({\n",
+                "                center: ol.proj.fromLonLat(center),\n",
+                "                zoom: zoom\n",
+                "            })\n",
+                "        });\n",
+                "      view.el.appendChild(div);\n",
+                "    }\n",
+                "    \"\"\"\n",
+                "    # make sure to include styles\n",
+                "    _css = \"https://cdn.jsdelivr.net/npm/[email protected]/ol.css\"\n",
+                "    center = traitlets.List([20, 0]).tag(sync=True, o=True)\n",
+                "    zoom = traitlets.Int(2).tag(sync=True, o=True)\n",
+                "    width = traitlets.Unicode('100%').tag(sync=True, o=True)\n",
+                "    height = traitlets.Unicode('600px').tag(sync=True, o=True)\n",
+                "\n",
+                "\n",
+                "m = MapWidget(center=[20, 0], zoom=2)\n",
+                "m"
+            ]
+        }
+    ],
+    "metadata": {
+        "kernelspec": {
+            "display_name": "geo",
+            "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"
+        },
+        "orig_nbformat": 4
+    },
+    "nbformat": 4,
+    "nbformat_minor": 2
+}

notebooks/geemap.ipynb

@@ -0,0 +1,72 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "1ae5f776",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ee\n",
+    "import geemap"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "3d7e1415",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Map = geemap.Map(center=(40, -100), zoom=4, height='800px')\n",
+    "# Add Earth Engine dataset\n",
+    "dem = ee.Image('USGS/SRTMGL1_003')\n",
+    "landsat7 = ee.Image('LANDSAT/LE7_TOA_5YEAR/1999_2003').select(\n",
+    "    ['B1', 'B2', 'B3', 'B4', 'B5', 'B7']\n",
+    ")\n",
+    "states = ee.FeatureCollection(\"TIGER/2018/States\")\n",
+    "\n",
+    "# Set visualization parameters.\n",
+    "vis_params = {\n",
+    "    'min': 0,\n",
+    "    'max': 4000,\n",
+    "    'palette': ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5'],\n",
+    "}\n",
+    "\n",
+    "# Add Earth Engine layers to Map\n",
+    "Map.addLayer(dem, vis_params, 'SRTM DEM', True, 0.5)\n",
+    "Map.addLayer(\n",
+    "    landsat7,\n",
+    "    {'bands': ['B4', 'B3', 'B2'], 'min': 20, 'max': 200, 'gamma': 2.0},\n",
+    "    'Landsat 7',\n",
+    ")\n",
+    "Map.addLayer(states, {}, \"US States\")\n",
+    "Map.add_layer_manager()\n",
+    "Map.add_inspector()\n",
+    "\n",
+    "Map"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "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.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

notebooks/leaflet.ipynb

@@ -0,0 +1,159 @@
+{
+ "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/leaflet.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/leaflet.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/leaflet.ipynb)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install mapwidget"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import mapwidget"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = mapwidget.Map()\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.basemap"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.add_basemap('HYBRID')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.add_basemap('OpenTopoMap')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from mapwidget.basemaps import get_basemap_list\n",
+    "\n",
+    "print(len(get_basemap_list()))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "get_basemap_list()[:10]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.clicked_latlng"
+   ]
+  },
+  {
+   "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": [
+    "m.zoom"
+   ]
+  },
+  {
+   "attachments": {},
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/4zt3wUk.gif)"
+   ]
+  }
+ ],
+ "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"
+  },
+  "vscode": {
+   "interpreter": {
+    "hash": "31f05ea183a4718249d13ada7f166c6bdba1d00716247af5c11c23af8d5923f1"
+   }
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

notebooks/leafmap.ipynb

@@ -0,0 +1,71 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "a058f796",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import leafmap"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "57967f3a",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "18da37ed564c4610bd772f1179896df8",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Map(center=[20, 0], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_text…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "m = leafmap.Map(height='800px')\n",
+    "m.add_basemap('OpenTopoMap')\n",
+    "# m.split_map('TERRAIN', 'OpenTopoMap')\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "80bf53d8",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "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.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

notebooks/mapbox.ipynb

@@ -0,0 +1,295 @@
+{
+    "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
+}

notebooks/maplibre.ipynb

@@ -0,0 +1,288 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "[![image](https://studiolab.sagemaker.aws/studiolab.svg)](https://studiolab.sagemaker.aws/import/github/giswqs/mapwidget/blob/master/docs/examples/maplibre.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/maplibre.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/maplibre.ipynb)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install mapwidget"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import mapwidget.maplibre as mapwidget"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = mapwidget.Map(center=[20, 0], zoom=2, height='600px')\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/Pxi43kg.png)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.center"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.zoom"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.bounds"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.clicked_latlng"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "esm = \"\"\"\n",
+    "\n",
+    "    var videoStyle = {\n",
+    "        'version': 8,\n",
+    "        'sources': {\n",
+    "            'satellite': {\n",
+    "                'type': 'raster',\n",
+    "                'url':\n",
+    "                    'https://api.maptiler.com/tiles/satellite/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',\n",
+    "                'tileSize': 256\n",
+    "            },\n",
+    "            'video': {\n",
+    "                'type': 'video',\n",
+    "                'urls': [\n",
+    "                    'https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4',\n",
+    "                    'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'\n",
+    "                ],\n",
+    "                'coordinates': [\n",
+    "                    [-122.51596391201019, 37.56238816766053],\n",
+    "                    [-122.51467645168304, 37.56410183312965],\n",
+    "                    [-122.51309394836426, 37.563391708549425],\n",
+    "                    [-122.51423120498657, 37.56161849366671]\n",
+    "                ]\n",
+    "            }\n",
+    "        },\n",
+    "        'layers': [\n",
+    "            {\n",
+    "                'id': 'background',\n",
+    "                'type': 'background',\n",
+    "                'paint': {\n",
+    "                    'background-color': 'rgb(4,7,14)'\n",
+    "                }\n",
+    "            },\n",
+    "            {\n",
+    "                'id': 'satellite',\n",
+    "                'type': 'raster',\n",
+    "                'source': 'satellite'\n",
+    "            },\n",
+    "            {\n",
+    "                'id': 'video',\n",
+    "                'type': 'raster',\n",
+    "                'source': 'video'\n",
+    "            }\n",
+    "        ]\n",
+    "    };\n",
+    "\n",
+    "    var map = new maplibregl.Map({\n",
+    "        container: 'map',\n",
+    "        minZoom: 14,\n",
+    "        zoom: 17,\n",
+    "        center: [-122.514426, 37.562984],\n",
+    "        bearing: -96,\n",
+    "        style: videoStyle\n",
+    "    });\n",
+    "\n",
+    "    var playingVideo = true;\n",
+    "\n",
+    "    map.on('click', function () {\n",
+    "        playingVideo = !playingVideo;\n",
+    "\n",
+    "        if (playingVideo) map.getSource('video').play();\n",
+    "        else map.getSource('video').pause();\n",
+    "    });\n",
+    "\n",
+    "\"\"\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.set_esm(esm)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/o2ZHeTL.gif)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "esm = \"\"\"\n",
+    "\n",
+    "    var map = (window.map = new maplibregl.Map({\n",
+    "        container: 'map',\n",
+    "        zoom: 12,\n",
+    "        center: [11.39085, 47.27574],\n",
+    "        pitch: 52,\n",
+    "        hash: true,\n",
+    "        style: {\n",
+    "            version: 8,\n",
+    "            sources: {\n",
+    "                osm: {\n",
+    "                    type: 'raster',\n",
+    "                    tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],\n",
+    "                    tileSize: 256,\n",
+    "                    attribution: '© OpenStreetMap Contributors',\n",
+    "                    maxzoom: 19\n",
+    "                },\n",
+    "                terrainSource: {\n",
+    "                    type: 'raster-dem',\n",
+    "                    url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',\n",
+    "                    tileSize: 256\n",
+    "                },\n",
+    "                hillshadeSource: {\n",
+    "                    type: 'raster-dem',\n",
+    "                    url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',\n",
+    "                    tileSize: 256\n",
+    "                }\n",
+    "            },\n",
+    "            layers: [\n",
+    "                {\n",
+    "                    id: 'osm',\n",
+    "                    type: 'raster',\n",
+    "                    source: 'osm'\n",
+    "                },\n",
+    "                {\n",
+    "                    id: 'hills',\n",
+    "                    type: 'hillshade',\n",
+    "                    source: 'hillshadeSource',\n",
+    "                    layout: { visibility: 'visible' },\n",
+    "                    paint: { 'hillshade-shadow-color': '#473B24' }\n",
+    "                }\n",
+    "            ],\n",
+    "            terrain: {\n",
+    "                source: 'terrainSource',\n",
+    "                exaggeration: 1\n",
+    "            }\n",
+    "        },\n",
+    "        maxZoom: 18,\n",
+    "        maxPitch: 85\n",
+    "    }));\n",
+    "\n",
+    "    map.addControl(\n",
+    "        new maplibregl.NavigationControl({\n",
+    "            visualizePitch: true,\n",
+    "            showZoom: true,\n",
+    "            showCompass: true\n",
+    "        })\n",
+    "    );\n",
+    "\n",
+    "    map.addControl(\n",
+    "        new maplibregl.TerrainControl({\n",
+    "            source: 'terrainSource',\n",
+    "            exaggeration: 1\n",
+    "        })\n",
+    "    );\n",
+    "\n",
+    "\"\"\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.set_esm(esm)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/TTN1mx5.png)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "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
+}

notebooks/openlayers.ipynb

@@ -0,0 +1,112 @@
+{
+    "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/openlayers.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/openlayers.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/openlayers.ipynb)"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "# %pip install mapwidget"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "import mapwidget.openlayers as mapwidget"
+            ]
+        },
+        {
+            "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/CqP4Ehm.png)"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "m.clicked_latlng"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "m.center"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "m.zoom"
+            ]
+        },
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "metadata": {},
+            "outputs": [],
+            "source": [
+                "m.bounds"
+            ]
+        }
+    ],
+    "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"
+        },
+        "vscode": {
+            "interpreter": {
+                "hash": "31f05ea183a4718249d13ada7f166c6bdba1d00716247af5c11c23af8d5923f1"
+            }
+        }
+    },
+    "nbformat": 4,
+    "nbformat_minor": 4
+}

requirements.txt

@@ -0,0 +1,4 @@
+voila
+geemap
+leafmap
+

run.sh

@@ -0,0 +1 @@
+voila --Voila.ip=0.0.0.0 --no-browser --strip_sources=True --enable_nbextensions=True --MappingKernelManager.cull_interval=60 --MappingKernelManager.cull_idle_timeout=120 --NotebookClient.iopub_timeout=30 notebooks/