Video Layer¶

This notebook demonstrates how to overlay georeferenced video on a MapLibre map.

Video layers use MapLibre's native video source type, which displays a video at specified geographic coordinates.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Add a Video Layer¶

Overlay a drone video on the map at specified geographic coordinates.

In [ ]:

from anymap_ts import Map

m = Map(
    center=[-122.514426, 37.562984],
    zoom=17,
    bearing=-96,
)
m.add_basemap("Esri.WorldImagery")
m.add_video_layer(
    urls=[
        "https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4",
        "https://static-assets.mapbox.com/mapbox-gl-js/drone.webm",
    ],
    coordinates=[
        [-122.51596391658498, 37.56238816766053],
        [-122.51467645489949, 37.56410183312965],
        [-122.51309394645498, 37.563391708549425],
        [-122.51423120498498, 37.56161849366671],
    ],
    name="drone-video",
    opacity=0.9,
)
m

from anymap_ts import Map m = Map( center=[-122.514426, 37.562984], zoom=17, bearing=-96, ) m.add_basemap("Esri.WorldImagery") m.add_video_layer( urls=[ "https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4", "https://static-assets.mapbox.com/mapbox-gl-js/drone.webm", ], coordinates=[ [-122.51596391658498, 37.56238816766053], [-122.51467645489949, 37.56410183312965], [-122.51309394645498, 37.563391708549425], [-122.51423120498498, 37.56161849366671], ], name="drone-video", opacity=0.9, ) m

Playback Controls¶

Control video playback programmatically.

In [ ]:

# Pause the video
m.pause_video("drone-video")

# Pause the video m.pause_video("drone-video")

In [ ]:

# Seek to 5 seconds
m.seek_video("drone-video", 5)

# Seek to 5 seconds m.seek_video("drone-video", 5)

In [ ]:

# Resume playing
m.play_video("drone-video")

# Resume playing m.play_video("drone-video")

Remove Video Layer¶

In [ ]:

m.remove_video_layer("drone-video")

m.remove_video_layer("drone-video")

Export to HTML¶

In [ ]:

# Create a new map with the video layer for export
m2 = Map(
    center=[-122.514426, 37.562984],
    zoom=17,
    bearing=-96,
)
m2.add_video_layer(
    urls=[
        "https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4",
        "https://static-assets.mapbox.com/mapbox-gl-js/drone.webm",
    ],
    coordinates=[
        [-122.51596391658498, 37.56238816766053],
        [-122.51467645489949, 37.56410183312965],
        [-122.51309394645498, 37.563391708549425],
        [-122.51423120498498, 37.56161849366671],
    ],
    name="drone-video",
)
m2.to_html("video_layer_example.html")

# Create a new map with the video layer for export m2 = Map( center=[-122.514426, 37.562984], zoom=17, bearing=-96, ) m2.add_video_layer( urls=[ "https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4", "https://static-assets.mapbox.com/mapbox-gl-js/drone.webm", ], coordinates=[ [-122.51596391658498, 37.56238816766053], [-122.51467645489949, 37.56410183312965], [-122.51309394645498, 37.563391708549425], [-122.51423120498498, 37.56161849366671], ], name="drone-video", ) m2.to_html("video_layer_example.html")