Add support for 3D visualization with MapLibre (#2117)

* Add support for 3D visualization with MapLibre

* Add notebook to docs

* Update notebook

docs/maplibregl.md

@@ -0,0 +1,3 @@
+# maplibregl module
+
+::: geemap.maplibregl

docs/notebooks/150_maplibre.ipynb

@@ -0,0 +1,159 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "<a href=\"https://colab.research.google.com/github/gee-community/geemap/blob/master/docs/notebooks/150_maplibre.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open in Colab\"/></a>\n",
+    "\n",
+    "**Visualizing Earth Engine data in 3D with MapLibre**\n",
+    "\n",
+    "This notebook demonstrates how to add [Google Earth Engine](https://earthengine.google.com) data layers to a map.\n",
+    "\n",
+    "Uncomment the following line to install [geemap](https://geemap.org) if needed."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install \"geemap[maplibre]\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ee\n",
+    "import geemap.maplibregl as geemap"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "geemap.ee_initialize()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = geemap.Map()\n",
+    "m.add_basemap(\"HYBRID\")\n",
+    "m"
+   ]
+  },
+  {
+   "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_API_KEY\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = geemap.Map(\n",
+    "    center=[-120.4482, 38.03994], zoom=13, pitch=60, bearing=30, style=\"3d-terrain\"\n",
+    ")\n",
+    "dataset = ee.ImageCollection(\"ESA/WorldCover/v200\").first()\n",
+    "vis_params = {\"bands\": [\"Map\"]}\n",
+    "m.add_ee_layer(dataset, vis_params, name=\"ESA Worldcover\", opacity=0.5)\n",
+    "m.add_legend(builtin_legend=\"ESA_WorldCover\", title=\"ESA Landcover\")\n",
+    "m.add_layer_control()\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.layer_interact()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/oHQDf79.png)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "We can also overlay other data layers on top of Earth Engine data layers."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = geemap.Map(\n",
+    "    center=[-74.012998, 40.70414], zoom=15.6, pitch=60, bearing=30, style=\"3d-terrain\"\n",
+    ")\n",
+    "dataset = ee.ImageCollection(\"ESA/WorldCover/v200\").first()\n",
+    "vis_params = {\"bands\": [\"Map\"]}\n",
+    "m.add_ee_layer(dataset, vis_params, name=\"ESA Worldcover\", opacity=0.5)\n",
+    "m.add_3d_buildings()\n",
+    "m.add_legend(builtin_legend=\"ESA_WorldCover\", title=\"ESA Landcover\")\n",
+    "m.add_layer_control()\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/Y52jep5.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.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

docs/tutorials.md

@@ -159,3 +159,4 @@ More video tutorials for geemap and Earth Engine are available on my [YouTube ch
 147. Array and List Charts ([notebook](https://geemap.org/notebooks/147_chart_array_list))
 148. DataTable Charts ([notebook](https://geemap.org/notebooks/148_chart_data_table))
 149. Using Gemini and EE Genie for automatic code generation ([notebook](https://geemap.org/notebooks/149_gemini))
+150. Visualizing Earth Engine data in 3D with MapLibre ([notebook](https://geemap.org/notebooks/150_maplibre))

examples/README.md

@@ -166,6 +166,7 @@ More video tutorials for geemap and Earth Engine are available on my [YouTube ch
 147. Array and List Charts ([notebook](https://geemap.org/notebooks/147_chart_array_list))
 148. DataTable Charts ([notebook](https://geemap.org/notebooks/148_chart_data_table))
 149. Using Gemini and EE Genie for automatic code generation ([notebook](https://geemap.org/notebooks/149_gemini))
+150. Visualizing Earth Engine data in 3D with MapLibre ([notebook](https://geemap.org/notebooks/150_maplibre))
 
 ### 1. Introducing the geemap Python package for interactive mapping with Google Earth Engine