Image and Video Overlays¶

This notebook demonstrates how to add image and video overlays to a Leaflet map, as described in the Leaflet Overlays Tutorial.

Image overlays let you place georeferenced images on the map, while video overlays do the same for video content.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import LeafletMap

from anymap_ts import LeafletMap

Image overlay¶

Overlay a georeferenced image onto the map. The image will be stretched to fit the bounding box you specify. This is the same technique used in the Leaflet tutorial for displaying historical maps.

In [ ]:

m = LeafletMap(center=[-74.18, 40.74], zoom=12, controls={})
m.add_basemap("CartoDB.Positron")

image_url = "https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
image_bounds = (-74.22655, 40.712216, -74.12544, 40.773941)

m.add_image_overlay(
    image_url,
    bounds=image_bounds,
    name="Newark 1922",
    opacity=0.7,
)

m.add_control("zoom", position="topleft")
m.add_layer_control(position="topright", collapsed=False)
m

m = LeafletMap(center=[-74.18, 40.74], zoom=12, controls={}) m.add_basemap("CartoDB.Positron") image_url = "https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg" image_bounds = (-74.22655, 40.712216, -74.12544, 40.773941) m.add_image_overlay( image_url, bounds=image_bounds, name="Newark 1922", opacity=0.7, ) m.add_control("zoom", position="topleft") m.add_layer_control(position="topright", collapsed=False) m

Adjust overlay opacity¶

You can adjust the overlay opacity after adding it.

In [ ]:

m.set_opacity("Newark 1922", 0.4)

m.set_opacity("Newark 1922", 0.4)

Video overlay¶

Overlay a video onto the map. The video is georeferenced to a bounding box. By default, videos autoplay, loop, and are muted.

In [ ]:

m2 = LeafletMap(center=[-122.42, 37.78], zoom=13, controls={})
m2.add_basemap("CartoDB.DarkMatter")

video_url = "https://www.mapbox.com/bites/00188/patricia_nasa.webm"
video_bounds = (-122.48, 37.74, -122.36, 37.82)

m2.add_video_overlay(
    video_url,
    bounds=video_bounds,
    name="Video Overlay",
    opacity=0.8,
    autoplay=True,
    loop=True,
    muted=True,
)

m2.add_control("zoom", position="topleft")
m2

m2 = LeafletMap(center=[-122.42, 37.78], zoom=13, controls={}) m2.add_basemap("CartoDB.DarkMatter") video_url = "https://www.mapbox.com/bites/00188/patricia_nasa.webm" video_bounds = (-122.48, 37.74, -122.36, 37.82) m2.add_video_overlay( video_url, bounds=video_bounds, name="Video Overlay", opacity=0.8, autoplay=True, loop=True, muted=True, ) m2.add_control("zoom", position="topleft") m2