Add support for html and layer control (#793)

opengeos · Jun 28, 2024 · be180dd · be180dd
1 parent 392b732
commit be180dd
Show file tree

Hide file tree

Showing 10 changed files with 1,413 additions and 40 deletions.
diff --git a/docs/maplibre/add_colorbar.ipynb b/docs/maplibre/add_colorbar.ipynb
@@ -0,0 +1,175 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "[![image](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://demo.leafmap.org/lab/index.html?path=maplibre/add_colorbar.ipynb)\n",
+    "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/add_colorbar.ipynb)\n",
+    "[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
+    "\n",
+    "**Add a colorbar to the map**\n",
+    "\n",
+    "This source code of this example is adapted from the MapLibre GL JS example - [maplibre_xxx](https://maplibre.org/maplibre-gl-js/docs/examples/maplibre_xxx/).\n",
+    "\n",
+    "Uncomment the following line to install [leafmap](https://leafmap.org) if needed."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install \"leafmap[maplibre]\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import os\n",
+    "import leafmap.maplibregl as leafmap"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "To run this notebook, you will need an [API key](https://docs.maptiler.com/cloud/api/authentication-key/) from [MapTiler](https://www.maptiler.com/cloud/). Once you have the API key, you can set it as an environment variable in your notebook or script as follows:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# os.environ[\"MAPTILER_KEY\"] = \"YOUR_API_KEY\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "MAPTILER_KEY = leafmap.get_api_key(\"MAPTILER_KEY\")\n",
+    "style = f\"https://api.maptiler.com/maps/streets/style.json?key={MAPTILER_KEY}\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "dem = \"https://github.com/opengeos/datasets/releases/download/raster/srtm90.tif\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map(style=style)\n",
+    "m.add_cog_layer(\n",
+    "    dem, name=\"DEM\", colormap_name=\"terrain\", rescale=\"0, 4000\", fit_bounds=True\n",
+    ")\n",
+    "m.add_colorbar(\n",
+    "    cmap=\"terrain\", vmin=0, vmax=4000, label=\"Elevation (m)\", position=\"bottom-right\"\n",
+    ")\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/84t0Sum.png)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map(style=style)\n",
+    "m.add_cog_layer(\n",
+    "    dem, name=\"DEM\", colormap_name=\"terrain\", rescale=\"0, 4000\", fit_bounds=True\n",
+    ")\n",
+    "m.add_colorbar(\n",
+    "    cmap=\"terrain\",\n",
+    "    vmin=0,\n",
+    "    vmax=4000,\n",
+    "    label=\"Elevation (m)\",\n",
+    "    position=\"bottom-right\",\n",
+    "    transparent=True,\n",
+    ")\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/B2VQoHe.png)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map(style=style)\n",
+    "m.add_cog_layer(\n",
+    "    dem, name=\"DEM\", colormap_name=\"terrain\", rescale=\"0, 4000\", fit_bounds=True\n",
+    ")\n",
+    "m.add_colorbar(\n",
+    "    cmap=\"terrain\",\n",
+    "    vmin=0,\n",
+    "    vmax=4000,\n",
+    "    label=\"Elevation (m)\",\n",
+    "    position=\"bottom-right\",\n",
+    "    width=0.2,\n",
+    "    height=3,\n",
+    "    orientation=\"vertical\",\n",
+    ")\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/wsJsPr7.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.11.8"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/docs/maplibre/add_components.ipynb b/docs/maplibre/add_components.ipynb
@@ -0,0 +1,117 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "[![image](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://demo.leafmap.org/lab/index.html?path=maplibre/add_components.ipynb)\n",
+    "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/add_components.ipynb)\n",
+    "[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
+    "\n",
+    "**Add components to the map**\n",
+    "\n",
+    "This notebook demonstrates how to add various components to the map, including legends, colorbars, text, and HTML elements.\n",
+    "\n",
+    "Uncomment the following line to install [leafmap](https://leafmap.org) if needed."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install \"leafmap[maplibre]\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import leafmap.maplibregl as leafmap"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map(center=[-100, 40], zoom=3, style=\"positron\")\n",
+    "\n",
+    "## Add a legend\n",
+    "url = \"https://www.mrlc.gov/geoserver/mrlc_display/NLCD_2021_Land_Cover_L48/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=NLCD_2021_Land_Cover_L48\"\n",
+    "m.add_wms_layer(url, name=\"NLCD 2021\")\n",
+    "m.add_legend(\n",
+    "    title=\"NLCD Land Cover Type\",\n",
+    "    builtin_legend=\"NLCD\",\n",
+    "    bg_color=\"rgba(255, 255, 255, 0.5)\",\n",
+    "    position=\"bottom-left\",\n",
+    ")\n",
+    "\n",
+    "# Add a colorbar\n",
+    "dem = \"https://github.com/opengeos/datasets/releases/download/raster/srtm90.tif\"\n",
+    "m.add_cog_layer(\n",
+    "    dem, name=\"DEM\", colormap_name=\"terrain\", rescale=\"0, 4000\", fit_bounds=False\n",
+    ")\n",
+    "m.add_colorbar(\n",
+    "    cmap=\"terrain\", vmin=0, vmax=4000, label=\"Elevation (m)\", position=\"bottom-right\"\n",
+    ")\n",
+    "\n",
+    "# Add text\n",
+    "text = \"Awesome Map!\"\n",
+    "m.add_text(text, position=\"top-left\")\n",
+    "\n",
+    "# Add HTML content\n",
+    "html = \"\"\"\n",
+    "<html>\n",
+    "<style>\n",
+    "body {\n",
+    "  font-size: 20px;\n",
+    "}\n",
+    "</style>\n",
+    "<body>\n",
+    "\n",
+    "<span style='font-size:100px;'>&#128640;</span>\n",
+    "<p>I will display &#128641;</p>\n",
+    "<p>I will display &#128642;</p>\n",
+    "\n",
+    "</body>\n",
+    "</html>\n",
+    "\"\"\"\n",
+    "m.add_html(html, bg_color=\"transparent\")\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/ZWmiKAF.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.11.8"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/docs/maplibre/add_html.ipynb b/docs/maplibre/add_html.ipynb
@@ -0,0 +1,92 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "[![image](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://demo.leafmap.org/lab/index.html?path=maplibre/add_html.ipynb)\n",
+    "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/add_html.ipynb)\n",
+    "[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
+    "\n",
+    "**Add HTML content to the map**\n",
+    "\n",
+    "This example shows how to add HTML content to the map using the `add_html()` method.\n",
+    "\n",
+    "Uncomment the following line to install [leafmap](https://leafmap.org) if needed."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install \"leafmap[maplibre]\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import leafmap.maplibregl as leafmap"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map(center=[-100, 40], zoom=3, style=\"positron\")\n",
+    "html = \"\"\"\n",
+    "<html>\n",
+    "<style>\n",
+    "body {\n",
+    "  font-size: 20px;\n",
+    "}\n",
+    "</style>\n",
+    "<body>\n",
+    "\n",
+    "<span style='font-size:100px;'>&#128640;</span>\n",
+    "<p>I will display &#128641;</p>\n",
+    "<p>I will display &#128642;</p>\n",
+    "\n",
+    "</body>\n",
+    "</html>\n",
+    "\"\"\"\n",
+    "m.add_html(html, bg_color=\"transparent\")\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/TgalNOv.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.11.8"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}