Add add_video function

opengeos · Jul 5, 2024 · caea18e · caea18e
1 parent 1c90b7d
commit caea18e
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 39 deletions.
diff --git a/docs/maplibre/video_on_a_map.ipynb b/docs/maplibre/video_on_a_map.ipynb
@@ -51,12 +51,11 @@
    ]
   },
   {
-   "cell_type": "code",
-   "execution_count": null,
+   "cell_type": "markdown",
    "metadata": {},
-   "outputs": [],
    "source": [
-    "MAPTILER_KEY = leafmap.get_api_key(\"MAPTILER_KEY\")"
+    "The `urls` value is an array. For each URL in the array, a video element source will be created. To support the video across browsers, supply URLs in multiple formats.\n",
+    "The `coordinates` array contains [longitude, latitude] pairs for the video corners listed in clockwise order: top left, top right, bottom right, bottom left."
    ]
   },
   {
@@ -65,38 +64,29 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "style = {\n",
-    "    \"version\": 8,\n",
-    "    \"sources\": {\n",
-    "        \"satellite\": {\n",
-    "            \"type\": \"raster\",\n",
-    "            \"url\": f\"https://api.maptiler.com/tiles/satellite/tiles.json?key={MAPTILER_KEY}\",\n",
-    "            \"tileSize\": 256,\n",
-    "        },\n",
-    "        \"video\": {\n",
-    "            \"type\": \"video\",\n",
-    "            \"urls\": [\n",
-    "                \"https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4\",\n",
-    "                \"https://static-assets.mapbox.com/mapbox-gl-js/drone.webm\",\n",
-    "            ],\n",
-    "            \"coordinates\": [\n",
-    "                [-122.51596391201019, 37.56238816766053],\n",
-    "                [-122.51467645168304, 37.56410183312965],\n",
-    "                [-122.51309394836426, 37.563391708549425],\n",
-    "                [-122.51423120498657, 37.56161849366671],\n",
-    "            ],\n",
-    "        },\n",
-    "    },\n",
-    "    \"layers\": [\n",
-    "        {\n",
-    "            \"id\": \"background\",\n",
-    "            \"type\": \"background\",\n",
-    "            \"paint\": {\"background-color\": \"rgb(4,7,14)\"},\n",
-    "        },\n",
-    "        {\"id\": \"satellite\", \"type\": \"raster\", \"source\": \"satellite\"},\n",
-    "        {\"id\": \"video\", \"type\": \"raster\", \"source\": \"video\"},\n",
-    "    ],\n",
-    "}"
+    "m = leafmap.Map(\n",
+    "    center=[-122.514426, 37.562984], zoom=17, bearing=-96, style=\"satellite\"\n",
+    ")\n",
+    "urls = [\n",
+    "    \"https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4\",\n",
+    "    \"https://static-assets.mapbox.com/mapbox-gl-js/drone.webm\",\n",
+    "]\n",
+    "coordinates = [\n",
+    "    [-122.51596391201019, 37.56238816766053],\n",
+    "    [-122.51467645168304, 37.56410183312965],\n",
+    "    [-122.51309394836426, 37.563391708549425],\n",
+    "    [-122.51423120498657, 37.56161849366671],\n",
+    "]\n",
+    "m.add_video(urls, coordinates)\n",
+    "m.add_layer_control()\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "![](https://i.imgur.com/8YGYanS.jpeg)"
    ]
   },
   {
@@ -105,15 +95,27 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "m = leafmap.Map(center=[-122.514426, 37.562984], zoom=17, bearing=-96, style=style)\n",
+    "m = leafmap.Map(center=[-115, 25], zoom=4, style=\"satellite\")\n",
+    "urls = [\n",
+    "    \"https://data.opengeos.org/patricia_nasa.mp4\",\n",
+    "    \"https://data.opengeos.org/patricia_nasa.webm\",\n",
+    "]\n",
+    "coordinates = [\n",
+    "    [-130, 32],\n",
+    "    [-100, 32],\n",
+    "    [-100, 13],\n",
+    "    [-130, 13],\n",
+    "]\n",
+    "m.add_video(urls, coordinates)\n",
+    "m.add_layer_control()\n",
     "m"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "![](https://i.imgur.com/8YGYanS.jpeg)"
+    "![](https://i.imgur.com/QTwaKf5.png)"
    ]
   }
  ],
@@ -133,7 +135,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.9"
+   "version": "3.11.8"
   }
  },
  "nbformat": 4,

diff --git a/leafmap/maplibregl.py b/leafmap/maplibregl.py
@@ -2743,6 +2743,47 @@ def add_3d_buildings(
         self.add_source("openmaptiles", source)
         self.add_layer(layer)
 
+    def add_video(
+        self,
+        urls: Union[str, List[str]],
+        coordinates: List[List[float]],
+        layer_id: str = "video",
+        before_id: Optional[str] = None,
+    ) -> None:
+        """
+        Adds a video layer to the map.
+
+        This method allows embedding a video into the map by specifying the video URLs and the geographical coordinates
+        that the video should cover. The video will be stretched and fitted into the specified coordinates.
+
+        Args:
+            urls (Union[str, List[str]]): A single video URL or a list of video URLs. These URLs must be accessible
+                from the client's location.
+            coordinates (List[List[float]]): A list of four coordinates in [longitude, latitude] format, specifying
+                the corners of the video. The coordinates order should be top-left, top-right, bottom-right, bottom-left.
+            layer_id (str): The ID for the video layer. Defaults to "video".
+            before_id (Optional[str]): The ID of an existing layer to insert the new layer before. If None, the layer
+                will be added on top. Defaults to None.
+
+        Returns:
+            None
+        """
+
+        if isinstance(urls, str):
+            urls = [urls]
+        source = {
+            "type": "video",
+            "urls": urls,
+            "coordinates": coordinates,
+        }
+        self.add_source("video_source", source)
+        layer = {
+            "id": layer_id,
+            "type": "raster",
+            "source": "video_source",
+        }
+        self.add_layer(layer, before_id=before_id)
+
 
 class Container(v.Container):