UI Controls for MapLibre¶

This notebook demonstrates the UI controls for loading various data formats:

• PMTiles
• COG (Cloud Optimized GeoTIFF)
• Zarr
• Vector (GeoJSON, GeoParquet, FlatGeobuf)

In [ ]:

from anymap_ts import MapLibreMap

from anymap_ts import MapLibreMap

PMTiles Control¶

Load PMTiles vector or raster tiles via an interactive UI panel.

In [ ]:

m = MapLibreMap(center=[11.25, 43.77], zoom=12)
m.add_pmtiles_control(
    position="top-right",
    collapsed=False,
    default_url="https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles",
    load_default_url=True,
)
m

m = MapLibreMap(center=[11.25, 43.77], zoom=12) m.add_pmtiles_control( position="top-right", collapsed=False, default_url="https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles", load_default_url=True, ) m

COG Control¶

Load Cloud Optimized GeoTIFF files via an interactive UI panel with colormap selection.

In [ ]:

m = MapLibreMap(center=[-120, 37], zoom=6)
m.add_cog_control(position="top-right", collapsed=False, default_colormap="viridis")
m

m = MapLibreMap(center=[-120, 37], zoom=6) m.add_cog_control(position="top-right", collapsed=False, default_colormap="viridis") m

Zarr Control¶

Load Zarr pyramid datasets via an interactive UI panel.

In [ ]:

m = MapLibreMap(center=[0, 20], zoom=2)
m.add_zarr_control(position="top-right", collapsed=False)
m

m = MapLibreMap(center=[0, 20], zoom=2) m.add_zarr_control(position="top-right", collapsed=False) m

Vector Control¶

Load vector datasets (GeoJSON, GeoParquet, FlatGeobuf) via URL.

In [ ]:

m = MapLibreMap(center=[0, 20], zoom=2)
m.add_vector_control(
    position="top-right",
    collapsed=False,
    default_url="https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson",
    default_fill_color="#3388ff",
    default_stroke_color="#2266cc",
)
m

m = MapLibreMap(center=[0, 20], zoom=2) m.add_vector_control( position="top-right", collapsed=False, default_url="https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson", default_fill_color="#3388ff", default_stroke_color="#2266cc", ) m

All Controls Together¶

You can add multiple controls to the same map.

In [ ]:

m = MapLibreMap(center=[0, 20], zoom=2)
m.add_pmtiles_control(position="top-right", collapsed=True)
m.add_cog_control(position="top-right", collapsed=True)
m.add_zarr_control(position="top-right", collapsed=True)
m.add_vector_control(position="top-right", collapsed=True)
m

m = MapLibreMap(center=[0, 20], zoom=2) m.add_pmtiles_control(position="top-right", collapsed=True) m.add_cog_control(position="top-right", collapsed=True) m.add_zarr_control(position="top-right", collapsed=True) m.add_vector_control(position="top-right", collapsed=True) m