Add more MapLibre examples

docs/changelog.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## v0.34.2 - Jun 21, 2024
+
+**What's Changed**
+
+-   Add 3d terrain style by @giswqs in [#779](https://github.com/opengeos/leafmap/pull/779)
+
+**Full Changelog**: [v0.34.1...v0.34.2](https://github.com/opengeos/leafmap/compare/v0.34.1...v0.34.2)
+
+## v0.34.1 - Jun 21, 2024
+
+**What's Changed**
+
+-   Add to_streamlit and more examples by @giswqs in [#777](https://github.com/opengeos/leafmap/pull/777)
+
+**Full Changelog**: [v0.34.0...v0.34.1](https://github.com/opengeos/leafmap/compare/v0.34.0...v0.34.1)
+
+## v0.34.0 - Jun 20, 2024
+
+**What's Changed**
+
+-   Update changelog by @giswqs in [#772](https://github.com/opengeos/leafmap/pull/772)
+-   Add more MapLibre example by @giswqs in [#773](https://github.com/opengeos/leafmap/pull/773)
+-   Add more MapLibre examples by @giswqs in [#774](https://github.com/opengeos/leafmap/pull/774)
+-   Add more MapLibre examples by @giswqs in [#775](https://github.com/opengeos/leafmap/pull/775)
+-   Change MapLibre center from lat_lon to lon_lat by @giswqs in [#776](https://github.com/opengeos/leafmap/pull/776)
+
+**Full Changelog**: [v0.33.6...v0.34.0](https://github.com/opengeos/leafmap/compare/v0.33.6...v0.34.0)
+
 ## v0.33.6 - Jun 18, 2024
 
 **What's Changed**

docs/changelog_update.py

@@ -3,11 +3,10 @@
 # Copy the release notes from the GitHub release page
 markdown_text = """
 ## What's Changed
-* Change tms_to_geotiff to map_tiles_to_geotiff by @giswqs in https://github.com/opengeos/leafmap/pull/536
-* Fix MosaicJSON bug in add_stac_layer by @giswqs in https://github.com/opengeos/leafmap/pull/538
+* Add 3d terrain style by @giswqs in https://github.com/opengeos/leafmap/pull/779
 
 
-**Full Changelog**: https://github.com/opengeos/leafmap/compare/v0.24.1...v0.24.2
+**Full Changelog**: https://github.com/opengeos/leafmap/compare/v0.34.1...v0.34.2
 """
 
 # Regular expression pattern to match the Markdown hyperlinks

docs/maplibre/animate_a_line.ipynb

@@ -0,0 +1,148 @@
+{
+ "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/animate_a_line.ipynb)\n",
+    "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/animate_a_line.ipynb)\n",
+    "[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
+    "\n",
+    "**Animate a line**\n",
+    "\n",
+    "This source code of this example is adapted from the MapLibre GL JS example - [Animate a line](https://maplibre.org/maplibre-gl-js/docs/examples/animate-a-line/).\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 time\n",
+    "import pandas as pd\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": [
+    "url = \"https://github.com/opengeos/datasets/releases/download/world/animated_line_data.csv\"\n",
+    "df = pd.read_csv(url)\n",
+    "df_sample = df.sample(n=1000, random_state=1).sort_index()\n",
+    "df_sample.loc[len(df_sample)] = df.iloc[-1]\n",
+    "df_sample.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map(center=[0, 0], zoom=0.5, style=style)\n",
+    "geojson = {\n",
+    "    \"type\": \"FeatureCollection\",\n",
+    "    \"features\": [\n",
+    "        {\"type\": \"Feature\", \"geometry\": {\"type\": \"LineString\", \"coordinates\": [[0, 0]]}}\n",
+    "    ],\n",
+    "}\n",
+    "source = {\"type\": \"geojson\", \"data\": geojson}\n",
+    "m.add_source(\"line\", source)\n",
+    "layer = {\n",
+    "    \"id\": \"line-animation\",\n",
+    "    \"type\": \"line\",\n",
+    "    \"source\": \"line\",\n",
+    "    \"layout\": {\"line-cap\": \"round\", \"line-join\": \"round\"},\n",
+    "    \"paint\": {\"line-color\": \"#ed6498\", \"line-width\": 5, \"line-opacity\": 0.8},\n",
+    "}\n",
+    "m.add_layer(layer)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "run_times = 2\n",
+    "for i in range(run_times):\n",
+    "    geojson[\"features\"][0][\"geometry\"][\"coordinates\"] = [[0, 0]]\n",
+    "    for row in df_sample.itertuples():\n",
+    "        time.sleep(0.005)\n",
+    "        geojson[\"features\"][0][\"geometry\"][\"coordinates\"].append([row.x, row.y])\n",
+    "        m.set_data(\"line\", geojson)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/LRwfBl9.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/maplibre/animate_point_along_line.ipynb

@@ -0,0 +1,163 @@
+{
+ "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/animate_point_along_line.ipynb)\n",
+    "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/animate_point_along_line.ipynb)\n",
+    "[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
+    "\n",
+    "**Animate a point**\n",
+    "\n",
+    "This source code of this example is adapted from the MapLibre GL JS example - [Animate a point](https://maplibre.org/maplibre-gl-js/docs/examples/animate-point-along-line/).\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 math\n",
+    "import os\n",
+    "import time\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": [
+    "def point_on_circle(angle, radius):\n",
+    "    return {\n",
+    "        \"type\": \"Point\",\n",
+    "        \"coordinates\": [math.cos(angle) * radius, math.sin(angle) * radius],\n",
+    "    }"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = leafmap.Map(center=[0, 0], zoom=2, style=style)\n",
+    "radius = 20\n",
+    "source = {\"type\": \"geojson\", \"data\": point_on_circle(0, radius)}\n",
+    "m.add_source(\"point\", source)\n",
+    "layer = {\n",
+    "    \"id\": \"point\",\n",
+    "    \"source\": \"point\",\n",
+    "    \"type\": \"circle\",\n",
+    "    \"paint\": {\"circle-radius\": 10, \"circle-color\": \"#007cbf\"},\n",
+    "}\n",
+    "m.add_layer(layer)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def animate_marker(duration, frame_rate, radius):\n",
+    "    start_time = time.time()\n",
+    "    while (time.time() - start_time) < duration:\n",
+    "        timestamp = (time.time() - start_time) * 1000  # Convert to milliseconds\n",
+    "        angle = timestamp / 1000  # Divisor controls the animation speed\n",
+    "        point = point_on_circle(angle, radius)\n",
+    "        m.set_data(\"point\", point)\n",
+    "        # Wait for the next frame\n",
+    "        time.sleep(1 / frame_rate)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "duration = 10  # Duration of the animation in seconds\n",
+    "frame_rate = 30  # Frames per second"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "animate_marker(duration, frame_rate, radius)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/EAxNQx4.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
+}