Add to_html notebook example (#815)

opengeos · Jul 5, 2024 · 1c90b7d · 1c90b7d
1 parent 88d74e2
commit 1c90b7d
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 2 deletions.
diff --git a/docs/maplibre/3d_buildings.ipynb b/docs/maplibre/3d_buildings.ipynb
@@ -68,6 +68,7 @@
     "m = leafmap.Map(\n",
     "    center=[-74.0066, 40.7135], zoom=16, pitch=45, bearing=-17, style=\"basic-v2\"\n",
     ")\n",
+    "m.add_basemap(\"Esri.WorldImagery\", visible=False)\n",
     "source = {\n",
     "    \"url\": f\"https://api.maptiler.com/tiles/v3/tiles.json?key={MAPTILER_KEY}\",\n",
     "    \"type\": \"vector\",\n",
@@ -110,6 +111,7 @@
     "}\n",
     "m.add_source(\"openmaptiles\", source)\n",
     "m.add_layer(layer)\n",
+    "m.add_layer_control()\n",
     "m"
    ]
   },

diff --git a/docs/maplibre/3d_indoor_mapping.ipynb b/docs/maplibre/3d_indoor_mapping.ipynb
@@ -33,6 +33,26 @@
     "import leafmap.maplibregl as leafmap"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "data = \"https://maplibre.org/maplibre-gl-js/docs/assets/indoor-3d-map.geojson\"\n",
+    "gdf = leafmap.geojson_to_gdf(data)\n",
+    "gdf.explore()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "gdf.head()"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -43,7 +63,6 @@
     "    center=(-87.61694, 41.86625), zoom=17, pitch=40, bearing=20, style=\"positron\"\n",
     ")\n",
     "m.add_basemap(\"OpenStreetMap.Mapnik\")\n",
-    "data = \"https://maplibre.org/maplibre-gl-js/docs/assets/indoor-3d-map.geojson\"\n",
     "m.add_geojson(\n",
     "    data,\n",
     "    layer_type=\"fill-extrusion\",\n",
@@ -55,6 +74,7 @@
     "        \"fill-extrusion-opacity\": 0.5,\n",
     "    },\n",
     ")\n",
+    "m.add_layer_control()\n",
     "m"
    ]
   },
@@ -64,6 +84,13 @@
    "source": [
     "![](https://i.imgur.com/emBIlfG.gif)"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {
@@ -82,7 +109,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.8"
+   "version": "3.11.9"
   }
  },
  "nbformat": 4,

diff --git a/docs/maplibre/3d_terrain.ipynb b/docs/maplibre/3d_terrain.ipynb
@@ -98,6 +98,7 @@
    "outputs": [],
    "source": [
     "m = leafmap.Map(center=[11.39085, 47.27574], zoom=12, pitch=52, style=style)\n",
+    "m.add_layer_control(bg_layers=True)\n",
     "m"
    ]
   },
@@ -117,6 +118,7 @@
     "m = leafmap.Map(\n",
     "    center=[-122.19861, 46.21168], zoom=13, pitch=60, bearing=150, style=\"3d-terrain\"\n",
     ")\n",
+    "m.add_layer_control(bg_layers=True)\n",
     "m"
    ]
   },

diff --git a/docs/maplibre/overview.md b/docs/maplibre/overview.md
@@ -412,6 +412,12 @@ Visualize SpatioTemporal Asset Catalog (STAC) items with TiTiler.
 
 [![](https://i.imgur.com/zWsNXSF.png)](https://leafmap.org/maplibre/stac)
 
+## Export 3D maps as HTML files for website hosting
+
+Export 3D maps as HTML files for website hosting.
+
+[![](https://i.imgur.com/1h8tKqw.png)](https://leafmap.org/maplibre/to_html)
+
 ## Variable label placement
 
 Use text-variable-anchor to allow high priority labels to shift position to stay on the map.

diff --git a/docs/maplibre/to_html.ipynb b/docs/maplibre/to_html.ipynb
@@ -0,0 +1,111 @@
+{
+ "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/to_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/to_html.ipynb)\n",
+    "[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
+    "\n",
+    "**Export 3D maps as HTML files for website hosting**\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": "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 uncomment the following code block and replace `YOUR_API_KEY` with your actual API key. Then, run the code block code to set the API key as an environment variable."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# import os\n",
+    "# os.environ[\"MAPTILER_KEY\"] = \"YOUR_PRIVATE_API_KEY\"\n",
+    "# os.environ[\"MAPTILER_KEY_PUBLIC\"] = \"YOUR_PUBLIC_API_KEY\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map(\n",
+    "    center=[-122.19861, 46.21168], zoom=13, pitch=60, bearing=150, style=\"3d-terrain\"\n",
+    ")\n",
+    "m.add_layer_control(bg_layers=True)\n",
+    "# m.to_html(\"terrain.html\", title=\"Awesome 3D Map\", width=\"100%\", height=\"100%\", replace_key=True)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/1h8tKqw.png)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map(\n",
+    "    center=[-74.0066, 40.7135], zoom=16, pitch=45, bearing=-17, style=\"basic-v2\"\n",
+    ")\n",
+    "m.add_basemap(\"Esri.WorldImagery\", visible=False)\n",
+    "m.add_3d_buildings(min_zoom=15)\n",
+    "m.add_layer_control()\n",
+    "# m.to_html(\"buildings.html\", title=\"Awesome 3D Map\", width=\"100%\", height=\"100%\", replace_key=True)\n",
+    "m"
+   ]
+  }
+ ],
+ "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.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -207,6 +207,7 @@ nav:
           - maplibre/satellite_map.ipynb
           - maplibre/set_pitch_bearing.ipynb
           - maplibre/stac.ipynb
+          - maplibre/to_html.ipynb
           - maplibre/variable_label_placement.ipynb
           - maplibre/variable_offset_label_placement.ipynb
           - maplibre/vector_tile.ipynb