Leaflet Example¶

This notebook demonstrates the Leaflet integration in anymap-ts.

Leaflet is a lightweight, open-source JavaScript library for mobile-friendly interactive maps.

In [ ]:

from anymap_ts import LeafletMap

# Create a Leaflet map
m = LeafletMap(center=[-122.4, 37.8], zoom=10)
m.add_basemap("OpenStreetMap")
m

from anymap_ts import LeafletMap # Create a Leaflet map m = LeafletMap(center=[-122.4, 37.8], zoom=10) m.add_basemap("OpenStreetMap") m

In [ ]:

# Add markers
m.add_marker(-122.4194, 37.7749, popup="San Francisco")
m.add_marker(-122.2712, 37.8044, popup="Oakland")

# Add markers m.add_marker(-122.4194, 37.7749, popup="San Francisco") m.add_marker(-122.2712, 37.8044, popup="Oakland")

In [ ]:

# Add GeoJSON
geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-122.5, 37.7],
                        [-122.3, 37.7],
                        [-122.3, 37.9],
                        [-122.5, 37.9],
                        [-122.5, 37.7],
                    ]
                ],
            },
            "properties": {"name": "Area"},
        }
    ],
}

m.add_geojson(geojson, name="polygon")

# Add GeoJSON geojson = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [-122.5, 37.7], [-122.3, 37.7], [-122.3, 37.9], [-122.5, 37.9], [-122.5, 37.7], ] ], }, "properties": {"name": "Area"}, } ], } m.add_geojson(geojson, name="polygon")

In [ ]:

# Add controls
m.add_control("scale", position="bottom-left")

# Add controls m.add_control("scale", position="bottom-left")

In [ ]:

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

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