Add support for displaying EE layers with Mapbox (#845)

docs/notebooks/94_mapbox.ipynb

@@ -281,6 +281,102 @@
    "source": [
     "![](https://i.imgur.com/ZRRUK3v.png)"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map(style=\"mapbox://styles/mapbox/satellite-streets-v12\")\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# import ee\n",
+    "# ee.Authenticate()\n",
+    "# ee.Initialize(project=\"YOUR-PROJECT-ID\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# dataset = ee.ImageCollection(\"ESA/WorldCover/v200\").first()\n",
+    "# vis_params = {\"bands\": [\"Map\"]}\n",
+    "# url = leafmap.ee_tile_url(dataset, vis_params)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "esm = \"\"\"\n",
+    "    const map = new mapboxgl.Map({\n",
+    "        container: 'map',\n",
+    "        zoom: 1.2,\n",
+    "        center: [-100, 40],\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",
+    "        map.addSource('raster-tiles', {\n",
+    "            'type': 'raster',\n",
+    "            'tiles': [\n",
+    "                'https://THE-TILE-URL' // replace with the actual tile URL\n",
+    "            ],\n",
+    "            'tileSize': 256\n",
+    "        });\n",
+    "\n",
+    "        map.addLayer({\n",
+    "            'id': 'raster-layer',\n",
+    "            'type': 'raster',\n",
+    "            'source': 'raster-tiles',\n",
+    "            'paint': {\n",
+    "                'raster-opacity': 0.7 // Adjust the opacity as needed\n",
+    "            }\n",
+    "        });\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/8YXh4Cv.png)"
+   ]
   }
  ],
  "metadata": {

leafmap/common.py

@@ -14019,3 +14019,54 @@ def xarray_to_raster(dataset, filename: str, **kwargs: Dict[str, Any]) -> None:
 
     dataset = dataset.rename(new_names)
     dataset.transpose(..., "y", "x").rio.to_raster(filename, **kwargs)
+
+
+def ee_tile_url(
+    ee_object=None,
+    vis_params={},
+    asset_id: str = None,
+    ee_initialize: bool = False,
+    project_id=None,
+    **kwargs,
+) -> None:
+    """
+    Adds a Google Earth Engine tile layer to the map based on the tile layer URL from
+        https://github.com/opengeos/ee-tile-layers/blob/main/datasets.tsv.
+
+    Args:
+        ee_object (object): The Earth Engine object to display.
+        vis_params (dict): Visualization parameters. For example, {'min': 0, 'max': 100}.
+        asset_id (str): The ID of the Earth Engine asset.
+        ee_initialize (bool, optional): Whether to initialize the Earth Engine
+
+    Returns:
+        None
+    """
+    import pandas as pd
+
+    if isinstance(asset_id, str):
+        df = pd.read_csv(
+            "https://raw.githubusercontent.com/opengeos/ee-tile-layers/main/datasets.tsv",
+            sep="\t",
+        )
+
+        asset_id = asset_id.strip()
+
+        if asset_id in df["id"].values:
+            url = df.loc[df["id"] == asset_id, "url"].values[0]
+            return url
+        else:
+            print(f"The provided EE tile layer {asset_id} does not exist.")
+            return None
+    elif ee_object is not None:
+        try:
+            import geemap
+            from geemap.ee_tile_layers import _get_tile_url_format
+
+            if ee_initialize:
+                geemap.ee_initialize(project=project_id, **kwargs)
+            url = _get_tile_url_format(ee_object, vis_params)
+            return url
+        except Exception as e:
+            print(e)
+            return None

leafmap/styles/mapbox.css

@@ -1 +1 @@
-@import url("https://esm.sh/mapbox-gl@3.5.2?css");
+@import url("https://api.mapbox.com/mapbox-gl-js/v3.5.2/mapbox-gl.css");