Add two more examples

opengeos · Jun 23, 2024 · 0a34dfd · 0a34dfd
1 parent e8dc6c3
commit 0a34dfd
Show file tree

Hide file tree

Showing 5 changed files with 339 additions and 2 deletions.
diff --git a/docs/maplibre/animate_point_along_line.ipynb b/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
+}
diff --git a/docs/maplibre/animate_point_along_route.ipynb b/docs/maplibre/animate_point_along_route.ipynb
@@ -0,0 +1,157 @@
+{
+ "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_route.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_route.ipynb)\n",
+    "[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
+    "\n",
+    "**Animate a point along a route**\n",
+    "\n",
+    "This source code of this example is adapted from the MapLibre GL JS example - [Animate a point along a route](https://maplibre.org/maplibre-gl-js/docs/examples/animate-point-along-route/).\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 requests\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": [
+    "m = leafmap.Map(center=[-100, 40], zoom=3, style=style)\n",
+    "url = \"https://github.com/opengeos/datasets/releases/download/us/arc_with_bearings.geojson\"\n",
+    "geojson = requests.get(url).json()\n",
+    "bearings = geojson['features'][0]['properties']['bearings']\n",
+    "coordinates = geojson['features'][0]['geometry']['coordinates'][:-1]\n",
+    "m.add_geojson(geojson, name=\"route\")\n",
+    "\n",
+    "origin = [-122.414, 37.776]\n",
+    "destination = [-77.032, 38.913]\n",
+    "\n",
+    "point = {\n",
+    "        'type': 'FeatureCollection',\n",
+    "        'features': [\n",
+    "            {\n",
+    "                'type': 'Feature',\n",
+    "                'properties': {},\n",
+    "                'geometry': {\n",
+    "                    'type': 'Point',\n",
+    "                    'coordinates': origin\n",
+    "                }\n",
+    "            }\n",
+    "        ]\n",
+    "    }\n",
+    "source = {\n",
+    "            'type': 'geojson',\n",
+    "            'data': point\n",
+    "        }\n",
+    "m.add_source('point', source)\n",
+    "layer = {\n",
+    "            'id': 'point',\n",
+    "            'source': 'point',\n",
+    "            'type': 'symbol',\n",
+    "            'layout': {\n",
+    "                'icon-image': 'airport_15',\n",
+    "                'icon-rotate': ['get', 'bearing'],\n",
+    "                'icon-rotation-alignment': 'map',\n",
+    "                'icon-overlap': 'always',\n",
+    "                'icon-ignore-placement': True\n",
+    "            }\n",
+    "        }\n",
+    "m.add_layer(layer)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "for index, coordinate in enumerate(coordinates):\n",
+    "    point['features'][0]['geometry']['coordinates'] = coordinate\n",
+    "    point['features'][0]['properties']['bearing'] = bearings[index]\n",
+    "    m.set_data('point', point)\n",
+    "    time.sleep(0.05)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/kdP1oT1.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
+}
diff --git a/docs/maplibre/overview.md b/docs/maplibre/overview.md
@@ -62,6 +62,18 @@ Use a series of image sources to create an animation.
 
 [![](https://i.imgur.com/2CY0in2.png)](https://leafmap.org/maplibre/animate_images)
 
+## Animate a point
+
+Animate the position of a point by updating a GeoJSON source on each frame.
+
+[![](https://i.imgur.com/EAxNQx4.png)](https://leafmap.org/maplibre/animate_point_along_line)
+
+## Animate a point along a route
+
+Animate a point along the distance of a line.
+
+[![](https://i.imgur.com/kdP1oT1.png)](https://leafmap.org/maplibre/animate_point_along_route)
+
 ## Change the default position for attribution
 
 Place attribution in the top-left position when initializing a map.

diff --git a/leafmap/maplibregl.py b/leafmap/maplibregl.py
@@ -1482,14 +1482,16 @@ def add_pmtiles(
 
     def add_marker(
         self,
-        lng_lat: List[Union[float, float]],
+        marker: Marker = None,
+        lng_lat: List[Union[float, float]] = [],
         popup: Optional[Dict] = {},
         options: Optional[Dict] = {},
     ) -> None:
         """
         Adds a marker to the map.
 
         Args:
+            marker (Marker, optional): A Marker object. Defaults to None.
             lng_lat (List[Union[float, float]]): A list of two floats
                 representing the longitude and latitude of the marker.
             popup (Optional[str], optional): The text to display in a popup when
@@ -1501,7 +1503,8 @@ def add_marker(
             None
         """
 
-        marker = Marker(lng_lat=lng_lat, popup=popup, options=options)
+        if marker is None:
+            marker = Marker(lng_lat=lng_lat, popup=popup, options=options)
         super().add_marker(marker)
 
     def fly_to(

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -148,6 +148,8 @@ nav:
           - maplibre/animate_a_line.ipynb
           - maplibre/animate_camera_around_point.ipynb
           - maplibre/animate_images.ipynb
+          - maplibre/animate_point_along_line.ipynb
+          - maplibre/animate_point_along_route.ipynb
           - maplibre/attribution_position.ipynb
           - maplibre/change_building_color.ipynb
           - maplibre/change_case_of_labels.ipynb