Using GeoJSON with Leaflet¶

This notebook demonstrates interactive GeoJSON features on a Leaflet map, inspired by the Leaflet GeoJSON Tutorial.

Features covered:

• Loading GeoJSON with different geometry types
• Interactive popups showing feature properties
• Sticky tooltips on hover
• Custom styling
• Layer groups and layer control

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import LeafletMap

from anymap_ts import LeafletMap

GeoJSON with popups and tooltips¶

Use popup_properties to show feature properties when clicking, and tooltip_property for hover text.

In [ ]:

cities = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]},
            "properties": {
                "name": "San Francisco",
                "state": "CA",
                "population": 874000,
            },
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-118.2437, 34.0522]},
            "properties": {"name": "Los Angeles", "state": "CA", "population": 3971000},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.3321, 47.6062]},
            "properties": {"name": "Seattle", "state": "WA", "population": 737000},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.6765, 45.5231]},
            "properties": {"name": "Portland", "state": "OR", "population": 653000},
        },
    ],
}

m = LeafletMap(center=[-120, 40], zoom=5, controls={})
m.add_basemap("CartoDB.Positron")
m.add_control("zoom", position="topleft")

m.add_geojson(
    cities,
    name="West Coast Cities",
    style={
        "radius": 10,
        "fillColor": "#e74c3c",
        "color": "#fff",
        "weight": 2,
        "fillOpacity": 0.8,
    },
    popup_properties=["name", "state", "population"],
    tooltip_property="name",
)

m

cities = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]}, "properties": { "name": "San Francisco", "state": "CA", "population": 874000, }, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-118.2437, 34.0522]}, "properties": {"name": "Los Angeles", "state": "CA", "population": 3971000}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.3321, 47.6062]}, "properties": {"name": "Seattle", "state": "WA", "population": 737000}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.6765, 45.5231]}, "properties": {"name": "Portland", "state": "OR", "population": 653000}, }, ], } m = LeafletMap(center=[-120, 40], zoom=5, controls={}) m.add_basemap("CartoDB.Positron") m.add_control("zoom", position="topleft") m.add_geojson( cities, name="West Coast Cities", style={ "radius": 10, "fillColor": "#e74c3c", "color": "#fff", "weight": 2, "fillOpacity": 0.8, }, popup_properties=["name", "state", "population"], tooltip_property="name", ) m

Show all properties in popups¶

Set popup_properties=True to show all feature properties.

In [ ]:

parks = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-111.1, 36.0],
                        [-111.1, 36.3],
                        [-112.2, 36.3],
                        [-112.2, 36.0],
                        [-111.1, 36.0],
                    ]
                ],
            },
            "properties": {
                "name": "Grand Canyon NP",
                "state": "AZ",
                "visitors_2023": "6.1M",
                "established": 1919,
            },
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-119.9, 37.5],
                        [-119.9, 38.2],
                        [-119.2, 38.2],
                        [-119.2, 37.5],
                        [-119.9, 37.5],
                    ]
                ],
            },
            "properties": {
                "name": "Yosemite NP",
                "state": "CA",
                "visitors_2023": "3.9M",
                "established": 1890,
            },
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-110.0, 44.0],
                        [-110.0, 45.1],
                        [-111.2, 45.1],
                        [-111.2, 44.0],
                        [-110.0, 44.0],
                    ]
                ],
            },
            "properties": {
                "name": "Yellowstone NP",
                "state": "WY",
                "visitors_2023": "4.5M",
                "established": 1872,
            },
        },
    ],
}

m2 = LeafletMap(center=[-112, 39], zoom=5, controls={})
m2.add_basemap("OpenStreetMap")
m2.add_control("zoom", position="topleft")

m2.add_geojson(
    parks,
    name="National Parks",
    style={"fillColor": "#27ae60", "color": "#1e8449", "weight": 2, "fillOpacity": 0.3},
    popup_properties=True,
    tooltip_property="name",
)

m2

parks = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [-111.1, 36.0], [-111.1, 36.3], [-112.2, 36.3], [-112.2, 36.0], [-111.1, 36.0], ] ], }, "properties": { "name": "Grand Canyon NP", "state": "AZ", "visitors_2023": "6.1M", "established": 1919, }, }, { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [-119.9, 37.5], [-119.9, 38.2], [-119.2, 38.2], [-119.2, 37.5], [-119.9, 37.5], ] ], }, "properties": { "name": "Yosemite NP", "state": "CA", "visitors_2023": "3.9M", "established": 1890, }, }, { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [-110.0, 44.0], [-110.0, 45.1], [-111.2, 45.1], [-111.2, 44.0], [-110.0, 44.0], ] ], }, "properties": { "name": "Yellowstone NP", "state": "WY", "visitors_2023": "4.5M", "established": 1872, }, }, ], } m2 = LeafletMap(center=[-112, 39], zoom=5, controls={}) m2.add_basemap("OpenStreetMap") m2.add_control("zoom", position="topleft") m2.add_geojson( parks, name="National Parks", style={"fillColor": "#27ae60", "color": "#1e8449", "weight": 2, "fillOpacity": 0.3}, popup_properties=True, tooltip_property="name", ) m2

Multiple GeoJSON layers with layer control¶

Add different geometry types as separate layers and toggle them independently.

In [ ]:

routes = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-122.4194, 37.7749],
                    [-121.8906, 37.3382],
                    [-121.4944, 38.5816],
                    [-122.4194, 37.7749],
                ],
            },
            "properties": {"name": "Bay Area Loop", "distance": "200 mi"},
        },
    ],
}

m3 = LeafletMap(center=[-122, 37.8], zoom=8, controls={})
m3.add_basemap("CartoDB.Positron")
m3.add_control("zoom", position="topleft")

m3.add_geojson(
    cities,
    name="Cities",
    style={
        "radius": 8,
        "fillColor": "#e74c3c",
        "color": "#fff",
        "weight": 2,
        "fillOpacity": 0.8,
    },
    popup_properties=["name", "population"],
    tooltip_property="name",
    fit_bounds=False,
)

m3.add_geojson(
    routes,
    name="Routes",
    style={"color": "#3498db", "weight": 3, "dashArray": "8 4"},
    popup_properties=True,
    fit_bounds=False,
)

m3.add_layer_control(position="topright", collapsed=False)
m3

routes = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-122.4194, 37.7749], [-121.8906, 37.3382], [-121.4944, 38.5816], [-122.4194, 37.7749], ], }, "properties": {"name": "Bay Area Loop", "distance": "200 mi"}, }, ], } m3 = LeafletMap(center=[-122, 37.8], zoom=8, controls={}) m3.add_basemap("CartoDB.Positron") m3.add_control("zoom", position="topleft") m3.add_geojson( cities, name="Cities", style={ "radius": 8, "fillColor": "#e74c3c", "color": "#fff", "weight": 2, "fillOpacity": 0.8, }, popup_properties=["name", "population"], tooltip_property="name", fit_bounds=False, ) m3.add_geojson( routes, name="Routes", style={"color": "#3498db", "weight": 3, "dashArray": "8 4"}, popup_properties=True, fit_bounds=False, ) m3.add_layer_control(position="topright", collapsed=False) m3