OpenLayers Example¶

This notebook demonstrates the OpenLayers integration in anymap-ts.

OpenLayers is a high-performance library with excellent WMS/WMTS support and projection handling.

In [ ]:

from anymap_ts import OpenLayersMap

# Create an OpenLayers map
m = OpenLayersMap(center=[-122.4, 37.8], zoom=10)
m.add_basemap("OpenStreetMap")
m

from anymap_ts import OpenLayersMap # Create an OpenLayers map m = OpenLayersMap(center=[-122.4, 37.8], zoom=10) m.add_basemap("OpenStreetMap") m

In [ ]:

# Add GeoJSON
geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]},
            "properties": {"name": "San Francisco"},
        }
    ],
}

m.add_geojson(
    geojson,
    name="cities",
    style={"fillColor": "rgba(255, 0, 0, 0.8)", "strokeColor": "#ffffff", "radius": 8},
)

# Add GeoJSON geojson = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]}, "properties": {"name": "San Francisco"}, } ], } m.add_geojson( geojson, name="cities", style={"fillColor": "rgba(255, 0, 0, 0.8)", "strokeColor": "#ffffff", "radius": 8}, )

In [ ]:

# Add WMS layer (example - replace with actual WMS service)
# m.add_wms_layer(
#     url="https://example.com/wms",
#     layers="layer_name",
#     name="WMS Layer"
# )

# Add WMS layer (example - replace with actual WMS service) # m.add_wms_layer( # url="https://example.com/wms", # layers="layer_name", # name="WMS Layer" # )

In [ ]:

# Add markers
m.add_marker(-122.4194, 37.7749, color="#ff0000")
m.add_marker(-122.2712, 37.8044, color="#00ff00")

# Add markers m.add_marker(-122.4194, 37.7749, color="#ff0000") m.add_marker(-122.2712, 37.8044, color="#00ff00")

In [ ]:

# Fly to location
m.fly_to(-122.4194, 37.7749, zoom=14)

# Fly to location m.fly_to(-122.4194, 37.7749, zoom=14)

In [ ]:

# Export to HTML
m.to_html("openlayers_example.html")

# Export to HTML m.to_html("openlayers_example.html")