from maplibreum import Map

# Create a map instance
m = Map(center=[-73.985, 40.75], zoom=11, title="Exploring NYC Layers")

# 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")

# Clustered points for major attractions
attractions = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "name": "Statue of Liberty",
                "popup_html": "<strong>Statue of Liberty</strong><br>Iconic harbor monument accessible by ferry."
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-74.0445, 40.6892]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "name": "Central Park",
                "popup_html": "<strong>Central Park</strong><br>Vast green space with bike paths and lakes."
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-73.9680, 40.7812]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "name": "Times Square",
                "popup_html": "<strong>Times Square</strong><br>Broadway lights, shows, and street performers."
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-73.9851, 40.7580]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "name": "Brooklyn Bridge Park",
                "popup_html": "<strong>Brooklyn Bridge Park</strong><br>Waterfront views back toward Manhattan."
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-73.9969, 40.7003]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "name": "The High Line",
                "popup_html": "<strong>The High Line</strong><br>Elevated park with art installations."
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-74.0048, 40.7479]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "name": "Museum of Modern Art",
                "popup_html": "<strong>MoMA</strong><br>World-class collection of modern art."
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-73.9776, 40.7614]
            }
        }
    ]
}
cluster = m.add_clustered_geojson(
    attractions,
    name="nyc-highlights",
    radius=60,
    max_zoom=12,
)

# Secondary GeoJSON source for contextual layers
context_layers = {
    "type": "geojson",
    "data": {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {
                    "name": "Hudson River Greenway",
                    "popup_html": "<strong>Hudson River Greenway</strong><br>Scenic bike route along Manhattan's west side."
                },
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [-74.0180, 40.7045],
                        [-74.0170, 40.7113],
                        [-74.0150, 40.7208],
                        [-74.0120, 40.7316],
                        [-74.0100, 40.7420],
                        [-74.0083, 40.7509],
                        [-74.0070, 40.7588],
                        [-74.0055, 40.7689],
                        [-74.0040, 40.7790]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "name": "Midtown Cultural Core",
                    "popup_html": "<strong>Midtown Cultural Core</strong><br>Theaters, museums, and iconic skyline views."
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[
                        [-74.0025, 40.7425],
                        [-73.9800, 40.7425],
                        [-73.9705, 40.7595],
                        [-73.9845, 40.7730],
                        [-74.0025, 40.7690],
                        [-74.0025, 40.7425]
                    ]]
                }
            }
        ]
    }
}
m.add_source("nyc-context", context_layers)

'nyc-context'

greenway_layer = {
    "id": "hudson-greenway",
    "type": "line",
    "filter": ["==", ["geometry-type"], "LineString"],
    "layout": {"line-cap": "round", "line-join": "round"},
    "paint": {
        "line-color": "#1d6996",
        "line-width": 4,
        "line-opacity": 0.7
    }
}

district_layer = {
    "id": "midtown-cultural-core",
    "type": "fill",
    "filter": ["==", ["geometry-type"], "Polygon"],
    "paint": {
        "fill-color": "#edc948",
        "fill-opacity": 0.25,
        "fill-outline-color": "#c28e0e"
    }
}

m.add_layer(greenway_layer, source="nyc-context")
m.add_layer(district_layer, source="nyc-context")

m.add_popup(html="", layer_id=cluster.unclustered_layer_id, prop="popup_html")
m.add_tooltip(layer_id=cluster.unclustered_layer_id, prop="name")
m.add_popup(html="", layer_id="hudson-greenway", prop="popup_html")
m.add_popup(html="", layer_id="midtown-cultural-core", prop="popup_html")

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

# In a Jupyter notebook, just display:
m