In [1]:
from maplibreum import Map

# Create a map instance
m = Map(center=[-46.65, -23.56], zoom=12, title="São Paulo Highlights")

# Add controls
m.add_control("navigation", "top-left")
m.add_control("scale", "bottom-left", options={"maxWidth":200,"unit":"imperial"})
m.add_control("fullscreen", "top-right")
In [2]:
# Add a GeoJSON source with multiple feature types
geojson_source = {
    "type": "geojson",
    "data": {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {
                    "name": "São Paulo Cathedral",
                    "category": "Landmark",
                    "popup_html": "<strong>São Paulo Cathedral</strong><br>Historic heart of the city."
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [-46.6339, -23.5503]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "name": "Municipal Market",
                    "category": "Market",
                    "popup_html": "<strong>Municipal Market</strong><br>Famous for gourmet snacks."
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [-46.6275, -23.5412]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "name": "Museum of Modern Art",
                    "category": "Museum",
                    "popup_html": "<strong>MAM</strong><br>Art museum inside Ibirapuera Park."
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [-46.6557, -23.5874]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "name": "Historic Day Tour",
                    "popup_html": "<strong>Historic Day Tour</strong><br>Suggested route connecting city highlights."
                },
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [-46.6339, -23.5503],
                        [-46.6290, -23.5530],
                        [-46.6280, -23.5565],
                        [-46.6415, -23.5640],
                        [-46.6505, -23.5730],
                        [-46.6557, -23.5874]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "name": "Ibirapuera Park",
                    "popup_html": "<strong>Ibirapuera Park</strong><br>Green oasis perfect for an afternoon stroll."
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[
                        [-46.6643, -23.5888],
                        [-46.6588, -23.5980],
                        [-46.6498, -23.5965],
                        [-46.6463, -23.5897],
                        [-46.6538, -23.5838],
                        [-46.6643, -23.5888]
                    ]]
                }
            }
        ]
    }
}
m.add_source("city-tour", geojson_source)
Out[2]:
'city-tour'
In [3]:
points_layer = {
    "id": "city-tour-points",
    "type": "circle",
    "filter": ["==", ["geometry-type"], "Point"],
    "paint": {
        "circle-radius": [
            "interpolate",
            ["linear"],
            ["zoom"],
            10, 6,
            14, 14
        ],
        "circle-color": [
            "match",
            ["get", "category"],
            "Landmark", "#e76f51",
            "Market", "#f4a261",
            "Museum", "#2a9d8f",
            "#007cbf"
        ],
        "circle-stroke-color": "#ffffff",
        "circle-stroke-width": 1.5
    }
}

route_layer = {
    "id": "city-tour-route",
    "type": "line",
    "filter": ["==", ["geometry-type"], "LineString"],
    "layout": {"line-cap": "round", "line-join": "round"},
    "paint": {
        "line-color": "#264653",
        "line-width": 4,
        "line-opacity": 0.8,
        "line-dasharray": [1.2, 1]
    }
}

park_layer = {
    "id": "city-tour-park",
    "type": "fill",
    "filter": ["==", ["geometry-type"], "Polygon"],
    "paint": {
        "fill-color": "#2a9d8f",
        "fill-opacity": 0.35
    }
}
In [4]:
m.add_layer(points_layer, source="city-tour")
m.add_layer(route_layer, source="city-tour")
m.add_layer(park_layer, source="city-tour")

m.add_popup(html="", layer_id="city-tour-points", prop="popup_html")
m.add_popup(html="", layer_id="city-tour-route", prop="popup_html")
m.add_popup(html="", layer_id="city-tour-park", prop="popup_html")
m.add_tooltip(layer_id="city-tour-points", prop="name")

# Export to HTML
m.save("sample_map.html")

# In a Jupyter notebook, just display:
m
Out[4]:
In [5]:
m.add_marker(draggable=True, popup='Drag me!')
Out[5]:
<maplibreum.core.Marker at 0x7f2f509278d0>