from anymap import MapLibreMap
# Create a basic map
m = MapLibreMap(
    center=[-122.4194, 37.7749],  # San Francisco
    zoom=12,
    height="600px"
)
m

from anymap import MapLibreMap
# Create a map with custom settings
m = MapLibreMap(
    center=[-74.0060, 40.7128],  # New York City
    zoom=13,
    height="500px",
    bearing=45,  # Map rotation
    pitch=60     # 3D tilt
)

# Add a marker with popup
m.add_marker(
    lat=40.7128,
    lng=-74.0060,
    popup="<h3>New York City</h3><p>The Big Apple</p>"
)

# Add GeoJSON data
geojson_data = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-74.0060, 40.7128]
            },
            "properties": {"name": "NYC"}
        }
    ]
}
m.add_geojson_layer(
    layer_id="cities",
    geojson_data=geojson_data,
    layer_type="circle",
    paint={
        "circle-radius": 8,
        "circle-color": "#ff0000"
    }
)

def handle_click(event):
    lat, lng = event['lngLat']
    print(f"Clicked at: {lat:.4f}, {lng:.4f}")
m.on_map_event('click', handle_click)

# Change map properties
m.set_center(-0.1278, 51.5074)  # London
m.set_zoom(14)
# Animate to a location
m.fly_to(2.3522, 48.8566, zoom=15)  # Paris

# Cell 1
m = MapLibreMap(center=[0, 0], zoom=2)
m
# Cell 2 - Same map instance
m.add_marker(0, 0, popup="Origin")
# Cell 3 - Display again
m

# Add and remove layers
m.add_source("my-source", {
    "type": "geojson",
    "data": geojson_data
})
m.add_layer("my-layer", {
    "id": "my-layer",
    "type": "circle",
    "source": "my-source",
    "paint": {"circle-radius": 5}
})
# Remove layers
m.remove_layer("my-layer")
m.remove_source("my-source")

# Call any MapLibre GL JS method
m.call_js_method('easeTo', {
    'center': [lng, lat],
    'zoom': 14,
    'duration': 2000
})