Add PMTiles example

pages/01_globe.py

@@ -5,7 +5,7 @@ import leafmap.maplibregl as leafmap
 
 def create_map():
 
-    m = leafmap.Map(style="liberty", projection="globe", height="750px")
+    m = leafmap.Map(style="liberty", projection="globe", height="750px", zoom=2.5)
     m.create_container(sidebar_visible=True)
     return m
 

pages/02_sidebar.py

@@ -5,7 +5,7 @@ import leafmap.maplibregl as leafmap
 
 def create_map():
 
-    m = leafmap.Map(style="dark-matter", projection="globe", height="750px")
+    m = leafmap.Map(style="dark-matter", projection="globe", height="750px", zoom=2.5)
     m.create_container(sidebar_visible=True)
 
     m.add_ee_layer(asset_id="ESA/WorldCover/v200", opacity=0.8)

pages/03_overture.py

@@ -0,0 +1,27 @@
+import solara
+import reacton.ipyvuetify as rv
+import leafmap.maplibregl as leafmap
+
+
+def create_map():
+
+    m = leafmap.Map(
+        center=[-74.0095, 40.7046],
+        zoom=16,
+        pitch=60,
+        bearing=-17,
+        style="positron",
+        height="750px",
+    )
+    m.create_container(sidebar_visible=True)
+    m.add_basemap("Esri.WorldImagery", visible=False)
+    m.add_overture_3d_buildings(template="simple")
+    m.add_layer_control()
+    return m
+
+
+@solara.component
+def Page():
+    m = create_map()
+    container = rv.Row(children=[m.container])
+    return container

pages/04_pmtiles.py

@@ -0,0 +1,58 @@
+import solara
+import reacton.ipyvuetify as rv
+import leafmap.maplibregl as leafmap
+
+
+def create_map():
+
+    m = leafmap.Map(
+        style="dark-matter",
+        projection="globe",
+        height="750px",
+        center=[-100, 40],
+        zoom=4,
+    )
+    m.create_container(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()
+    container = rv.Row(children=[m.container])
+    return container