OpenLayers Graticule & Advanced Controls¶

This notebook demonstrates the graticule (coordinate grid), overview map, and other advanced controls.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import OpenLayersMap

from anymap_ts import OpenLayersMap

Graticule (Coordinate Grid)¶

In [ ]:

m = OpenLayersMap(center=[0, 20], zoom=3, height="600px")
m.add_basemap("CartoDB.Positron")
m.add_graticule(
    stroke_color="rgba(0, 0, 0, 0.3)",
    stroke_width=1,
    show_labels=True,
)
m

m = OpenLayersMap(center=[0, 20], zoom=3, height="600px") m.add_basemap("CartoDB.Positron") m.add_graticule( stroke_color="rgba(0, 0, 0, 0.3)", stroke_width=1, show_labels=True, ) m

Remove Graticule¶

In [ ]:

m.remove_graticule()

m.remove_graticule()

Overview Map Control¶

In [ ]:

m = OpenLayersMap(center=[-122.4, 37.8], zoom=10, height="600px")
m.add_basemap("OpenStreetMap")
m.add_control("overviewMap", collapsed=False)
m

m = OpenLayersMap(center=[-122.4, 37.8], zoom=10, height="600px") m.add_basemap("OpenStreetMap") m.add_control("overviewMap", collapsed=False) m

Mouse Position (Coordinate Display)¶

In [ ]:

m = OpenLayersMap(center=[0, 20], zoom=2, height="600px", controls=False)
m.add_basemap("OpenStreetMap")
m.add_control("zoom")
m.add_control("mousePosition", precision=6)
m.add_control("scale", units="metric")
m.add_control("fullscreen")
m.add_control("attribution")
m

m = OpenLayersMap(center=[0, 20], zoom=2, height="600px", controls=False) m.add_basemap("OpenStreetMap") m.add_control("zoom") m.add_control("mousePosition", precision=6) m.add_control("scale", units="metric") m.add_control("fullscreen") m.add_control("attribution") m

Zoom Slider¶

In [ ]:

m = OpenLayersMap(center=[0, 20], zoom=2, height="600px", controls=False)
m.add_basemap("Satellite")
m.add_control("zoomSlider")
m.add_control("attribution")
m

m = OpenLayersMap(center=[0, 20], zoom=2, height="600px", controls=False) m.add_basemap("Satellite") m.add_control("zoomSlider") m.add_control("attribution") m

Layer Control¶

Add a layer visibility toggle panel.

In [ ]:

import random

m = OpenLayersMap(center=[-98, 38], zoom=4, height="600px")
m.add_basemap("CartoDB.Positron")

cities_geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4, 37.8]},
            "properties": {"name": "SF"},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-118.2, 34.05]},
            "properties": {"name": "LA"},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-73.98, 40.75]},
            "properties": {"name": "NYC"},
        },
    ],
}

m.add_geojson(
    cities_geojson,
    name="Cities",
    style={"fillColor": "red", "strokeColor": "#fff", "radius": 8},
)

m.add_wms_layer(
    url="https://ahocevar.com/geoserver/wms",
    layers="topp:states",
    name="US States",
    server_type="geoserver",
)

m.add_layer_control(collapsed=False)
m

import random m = OpenLayersMap(center=[-98, 38], zoom=4, height="600px") m.add_basemap("CartoDB.Positron") cities_geojson = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4, 37.8]}, "properties": {"name": "SF"}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-118.2, 34.05]}, "properties": {"name": "LA"}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-73.98, 40.75]}, "properties": {"name": "NYC"}, }, ], } m.add_geojson( cities_geojson, name="Cities", style={"fillColor": "red", "strokeColor": "#fff", "radius": 8}, ) m.add_wms_layer( url="https://ahocevar.com/geoserver/wms", layers="topp:states", name="US States", server_type="geoserver", ) m.add_layer_control(collapsed=False) m

Toggle Layer Visibility¶

In [ ]:

m.set_visibility("US States", False)

m.set_visibility("US States", False)

In [ ]:

m.set_visibility("US States", True)

m.set_visibility("US States", True)