Popups Example¶

This notebook demonstrates how to add interactive popups to map layers using the add_popup method.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic Popup with Property List¶

In [ ]:

from anymap_ts import Map

# Create sample GeoJSON data
geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4, 37.8]},
            "properties": {
                "name": "San Francisco",
                "population": 884363,
                "state": "California",
            },
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.3, 47.6]},
            "properties": {
                "name": "Seattle",
                "population": 737015,
                "state": "Washington",
            },
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.7, 45.5]},
            "properties": {"name": "Portland", "population": 652503, "state": "Oregon"},
        },
    ],
}

m = Map(center=[-122.4, 45], zoom=5)
m.add_vector(geojson, name="cities")
m.add_popup("cities", properties=["name", "population", "state"])
m

from anymap_ts import Map # Create sample GeoJSON data geojson = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4, 37.8]}, "properties": { "name": "San Francisco", "population": 884363, "state": "California", }, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.3, 47.6]}, "properties": { "name": "Seattle", "population": 737015, "state": "Washington", }, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.7, 45.5]}, "properties": {"name": "Portland", "population": 652503, "state": "Oregon"}, }, ], } m = Map(center=[-122.4, 45], zoom=5) m.add_vector(geojson, name="cities") m.add_popup("cities", properties=["name", "population", "state"]) m

Custom HTML Template Popup¶

In [ ]:

m2 = Map(center=[-122.4, 45], zoom=5)
m2.add_vector(geojson, name="cities-custom")
m2.add_popup(
    "cities-custom",
    template="<h3>{name}</h3><p>Population: {population}</p><p>State: {state}</p>",
)
m2

m2 = Map(center=[-122.4, 45], zoom=5) m2.add_vector(geojson, name="cities-custom") m2.add_popup( "cities-custom", template="

{name}

Population: {population}

State: {state}

", ) m2

Popup on Polygon Layer¶

In [ ]:

polygon_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 A", "type": "residential"},
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-122.3, 37.7],
                        [-122.1, 37.7],
                        [-122.1, 37.9],
                        [-122.3, 37.9],
                        [-122.3, 37.7],
                    ]
                ],
            },
            "properties": {"name": "Area B", "type": "commercial"},
        },
    ],
}

m3 = Map(center=[-122.3, 37.8], zoom=11)
m3.add_vector(
    polygon_geojson, name="areas", paint={"fill-color": "#3388ff", "fill-opacity": 0.5}
)
m3.add_popup("areas")
m3

polygon_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 A", "type": "residential"}, }, { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [-122.3, 37.7], [-122.1, 37.7], [-122.1, 37.9], [-122.3, 37.9], [-122.3, 37.7], ] ], }, "properties": {"name": "Area B", "type": "commercial"}, }, ], } m3 = Map(center=[-122.3, 37.8], zoom=11) m3.add_vector( polygon_geojson, name="areas", paint={"fill-color": "#3388ff", "fill-opacity": 0.5} ) m3.add_popup("areas") m3

Export to HTML¶

In [ ]:

m3.to_html("popups_example.html")

m3.to_html("popups_example.html")