GeoPhoto Control¶

This notebook demonstrates how to add a GeoPhoto control to MapLibre maps. The GeoPhoto control provides a UI panel for loading and viewing street-level imagery with camera trajectories, supporting local folders, ZIP files, and remote URLs.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic GeoPhoto Control¶

In [ ]:

from anymap_ts import Map

style = "https://tiles.openfreemap.org/styles/liberty"
m = Map(center=[-122.4, 37.8], zoom=14, style=style)
basemap_url = "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
m.add_basemap(basemap_url)
m.add_geophoto_control(position="top-right", collapsed=False)
m

from anymap_ts import Map style = "https://tiles.openfreemap.org/styles/liberty" m = Map(center=[-122.4, 37.8], zoom=14, style=style) basemap_url = "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}" m.add_basemap(basemap_url) m.add_geophoto_control(position="top-right", collapsed=False) m

Auto-load Data from ZIP URL¶

In [ ]:

m2 = Map(center=[-122.4, 37.8], zoom=14)
m2.add_geophoto_control(
    position="top-right",
    collapsed=False,
    title="Street View",
    show_path=True,
    show_path_direction_arrows=True,
)
m2

m2 = Map(center=[-122.4, 37.8], zoom=14) m2.add_geophoto_control( position="top-right", collapsed=False, title="Street View", show_path=True, show_path_direction_arrows=True, ) m2

Programmatic Loading from ZIP URL¶

In [ ]:

m3 = Map(center=[-122.4, 37.8], zoom=14)
m3.add_geophoto_control(collapsed=False)
# m3.load_geophoto_zip("https://example.com/streetview-data.zip")
m3

m3 = Map(center=[-122.4, 37.8], zoom=14) m3.add_geophoto_control(collapsed=False) # m3.load_geophoto_zip("https://example.com/streetview-data.zip") m3

Load from Individual URLs¶

In [ ]:

m4 = Map(center=[-122.4, 37.8], zoom=14)
m4.add_geophoto_control(collapsed=False)
# m4.load_geophoto_urls(
#     trajectory_geojson_url="https://example.com/trajectory.geojson",
#     image_base_path="https://example.com/images/",
# )
m4

m4 = Map(center=[-122.4, 37.8], zoom=14) m4.add_geophoto_control(collapsed=False) # m4.load_geophoto_urls( # trajectory_geojson_url="https://example.com/trajectory.geojson", # image_base_path="https://example.com/images/", # ) m4

Custom Appearance¶

In [ ]:

m5 = Map(center=[-122.4, 37.8], zoom=14)
m5.add_geophoto_control(
    collapsed=False,
    path_color="#ff0000",
    point_color="#00ff00",
    selected_point_color="#0000ff",
    show_path_direction_arrows=True,
)
m5

m5 = Map(center=[-122.4, 37.8], zoom=14) m5.add_geophoto_control( collapsed=False, path_color="#ff0000", point_color="#00ff00", selected_point_color="#0000ff", show_path_direction_arrows=True, ) m5

Playback Controls¶

In [ ]:

# Navigate cameras programmatically (requires data to be loaded first)
# m3.geophoto_next_camera()
# m3.geophoto_select_camera(0)
# m3.geophoto_play()
# m3.geophoto_stop()

# Navigate cameras programmatically (requires data to be loaded first) # m3.geophoto_next_camera() # m3.geophoto_select_camera(0) # m3.geophoto_play() # m3.geophoto_stop()

Remove GeoPhoto Control¶

In [ ]:

m.remove_geophoto_control()

m.remove_geophoto_control()