import solara
import leafmap.maplibregl as leafmap


def create_map():

    m = leafmap.Map(
        style="dark-matter",
        projection="globe",
        height="750px",
        center=[-100, 40],
        zoom=4,
        sidebar_visible=True,
    )

    building_pmtiles = "https://overturemaps-tiles-us-west-2-beta.s3.amazonaws.com/2025-04-23/buildings.pmtiles"
    road_pmtiles = "https://overturemaps-tiles-us-west-2-beta.s3.amazonaws.com/2025-04-23/transportation.pmtiles"
    building_style = {
        "layers": [
            {
                "id": "Buildings",
                "source": "buildings",
                "source-layer": "building",
                "type": "line",
                "paint": {
                    "line-color": "#ff0000",
                    "line-width": 1,
                },
            },
        ]
    }
    road_style = {
        "layers": [
            {
                "id": "Roads",
                "source": "transportation",
                "source-layer": "segment",
                "type": "line",
                "paint": {
                    "line-color": "#ffffff",
                    "line-width": 2,
                },
            },
        ]
    }
    m.add_pmtiles(
        building_pmtiles, style=building_style, tooltip=True, fit_bounds=False
    )
    m.add_pmtiles(road_pmtiles, style=road_style, tooltip=True, fit_bounds=False)
    return m


@solara.component
def Page():
    m = create_map()
    return m.to_solara()