Add more MapLibre example

docs/maplibre/3d_buildings.ipynb

@@ -0,0 +1,161 @@
+{
+ "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/3d_buildings.ipynb)\n",
+    "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/3d_buildings.ipynb)\n",
+    "[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
+    "\n",
+    "**Display buildings in 3D**\n",
+    "\n",
+    "This source code of this example is adapted from the MapLibre GL JS example - [Display buildings in 3D](https://maplibre.org/maplibre-gl-js/docs/examples/3d-buildings).\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": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import os\n",
+    "import leafmap.maplibregl as leafmap\n",
+    "from maplibre import Layer"
+   ]
+  },
+  {
+   "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": 2,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# os.environ[\"MAPBOX_API_KEY\"] = \"YOUR_API_KEY\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "MAPTILER_KEY = os.environ.get(\"MAPTILER_KEY\")\n",
+    "style = f\"https://api.maptiler.com/maps/basic-v2/style.json?key={MAPTILER_KEY}\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "f5d64ec8971d405a9b16d431a9fbf781",
+       "version_major": 2,
+       "version_minor": 1
+      },
+      "text/plain": [
+       "Map(height='600px', map_options={'bearing': -17.0, 'center': (-74.0066, 40.7135), 'pitch': 45.0, 'style': 'htt…"
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "m = leafmap.Map(center=[40.7135, -74.0066], zoom=16, pitch=45, bearing=-17, style=style)\n",
+    "source = {\n",
+    "    \"url\": f\"https://api.maptiler.com/tiles/v3/tiles.json?key={MAPTILER_KEY}\",\n",
+    "    \"type\": 'vector',\n",
+    "}\n",
+    "\n",
+    "layer = {\n",
+    "    'id': '3d-buildings',\n",
+    "    'source': 'openmaptiles',\n",
+    "    'source-layer': 'building',\n",
+    "    'type': 'fill-extrusion',\n",
+    "    'min-zoom': 15,\n",
+    "    'paint': {\n",
+    "        'fill-extrusion-color': [\n",
+    "            'interpolate',\n",
+    "            ['linear'],\n",
+    "            ['get', 'render_height'],\n",
+    "            0,\n",
+    "            'lightgray',\n",
+    "            200,\n",
+    "            'royalblue',\n",
+    "            400,\n",
+    "            'lightblue',\n",
+    "        ],\n",
+    "        'fill-extrusion-height': [\n",
+    "            'interpolate',\n",
+    "            ['linear'],\n",
+    "            ['zoom'],\n",
+    "            15,\n",
+    "            0,\n",
+    "            16,\n",
+    "            ['get', 'render_height'],\n",
+    "        ],\n",
+    "        'fill-extrusion-base': [\n",
+    "            'case',\n",
+    "            ['>=', ['get', 'zoom'], 16],\n",
+    "            ['get', 'render_min_height'],\n",
+    "            0,\n",
+    "        ],\n",
+    "    },\n",
+    "}\n",
+    "m.add_source('openmaptiles', source)\n",
+    "m.add_layer(layer)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/tusvTMZ.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.11.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

docs/maplibre/README.md

@@ -0,0 +1,11 @@
+# MapLibre Examples
+
+This directory contains examples of using MapLibre with Leafmap. The source code for each example is adapted from the [MapLibre documentation](https://maplibre.org/maplibre-gl-js/docs/examples/). Credits to the original authors.
+
+## Overview
+
+**Display buildings in 3D**
+
+Use extrusions to display buildings' height in 3D.
+
+[![](https://i.imgur.com/9QeicaE.png)](https://leafmap.org/maplibre/3d_buildings)

leafmap/common.py

@@ -13478,3 +13478,38 @@ def pandas_to_geojson(
             json.dump(geojson, f, indent=4)
 
     return geojson
+
+
+def replace_top_level_hyphens(d: Union[Dict, Any]) -> Union[Dict, Any]:
+    """
+    Replaces hyphens with underscores in top-level dictionary keys.
+
+    Args:
+        d (Union[Dict, Any]): The input dictionary or any other data type.
+
+    Returns:
+        Union[Dict, Any]: The modified dictionary with top-level keys having hyphens replaced with underscores,
+        or the original input if it's not a dictionary.
+    """
+    if isinstance(d, dict):
+        return {k.replace("-", "_"): v for k, v in d.items()}
+    return d
+
+
+def replace_hyphens_in_keys(d: Union[Dict, List, Any]) -> Union[Dict, List, Any]:
+    """
+    Recursively replaces hyphens with underscores in dictionary keys.
+
+    Args:
+        d (Union[Dict, List, Any]): The input dictionary, list or any other data type.
+
+    Returns:
+        Union[Dict, List, Any]: The modified dictionary or list with keys having hyphens replaced with underscores,
+        or the original input if it's not a dictionary or list.
+    """
+    if isinstance(d, dict):
+        return {k.replace("-", "_"): replace_hyphens_in_keys(v) for k, v in d.items()}
+    elif isinstance(d, list):
+        return [replace_hyphens_in_keys(i) for i in d]
+    else:
+        return d

leafmap/maplibregl.py

@@ -30,9 +30,9 @@ class Map(MapWidget):
     def __init__(
         self,
         center: Tuple[float, float] = (20, 0),
-        zoom: int = 1,
-        pitch: int = 0,
-        bearing: int = 0,
+        zoom: float = 1,
+        pitch: float = 0,
+        bearing: float = 0,
         style: str = "dark-matter",
         height: str = "600px",
         controls: Dict[str, str] = {
@@ -48,10 +48,10 @@ def __init__(
         Args:
             center (tuple, optional): The center of the map (lat, lon). Defaults
                 to (20, 0).
-            zoom (int, optional): The zoom level of the map. Defaults to 1.
-            pitch (int, optional): The pitch of the map. Measured in degrees
+            zoom (float, optional): The zoom level of the map. Defaults to 1.
+            pitch (float, optional): The pitch of the map. Measured in degrees
                 away from the plane of the screen (0-85) Defaults to 0.
-            bearing (int, optional): The bearing of the map. Measured in degrees
+            bearing (float, optional): The bearing of the map. Measured in degrees
                 counter-clockwise from north. Defaults to 0.
             style (str, optional): The style of the map. It can be a string or a URL.
                 If it is a string, it must be one of the following: "dark-matter",
@@ -131,6 +131,9 @@ def add_layer(
         Returns:
             None
         """
+        if isinstance(layer, dict):
+            layer = replace_top_level_hyphens(layer)
+            layer = Layer(**layer)
 
         if name is None:
             name = layer.id
@@ -1208,24 +1211,6 @@ def add_pmtiles(
             None
         """
 
-        # Function to replace hyphens with underscores in top-level dictionary keys
-        def replace_top_level_hyphens(d):
-            if isinstance(d, dict):
-                return {k.replace("-", "_"): v for k, v in d.items()}
-            return d
-
-        # Function to replace hyphens with underscores in dictionary keys
-        def replace_hyphens_in_keys(d):
-            if isinstance(d, dict):
-                return {
-                    k.replace("-", "_"): replace_hyphens_in_keys(v)
-                    for k, v in d.items()
-                }
-            elif isinstance(d, list):
-                return [replace_hyphens_in_keys(i) for i in d]
-            else:
-                return d
-
         try:
 
             if "sources" in kwargs:

mkdocs.yml

@@ -135,6 +135,8 @@ nav:
           - workshops/YouthMappers_2021.ipynb
           - workshops/ICRW_2023.ipynb
           - workshops/EarthCube_2023.ipynb
+    - MapLibre:
+          - maplibre/3d_buildings.ipynb
     - Notebooks:
           - notebooks/00_key_features.ipynb
           - notebooks/01_leafmap_intro.ipynb

setup.py

@@ -66,6 +66,7 @@
         "h3",
         "geopandas",
         "localtileserver",
+        "pmtiles",
         "rioxarray",
         "xarray",
     ],