Add PMTiles Raster Layer

Author: stfnkth

examples/standalone/layers/geojson_vector_layer.py

@@ -3,12 +3,14 @@
 data = "https://openlayers.org/en/latest/examples/data/geojson/roads-seoul.geojson"
 
 topojson_layer = ol.VectorLayer(
-    source=ol.VectorSource(
-        url=data,
-        format=ol.formats.GeoJSON()
+    source=ol.VectorSource(url=data, format=ol.formats.GeoJSON()),
+    style=ol.FlatStyle(
+        fill_color="rgba(255,210,120,0.5)",
+        stroke_color="green",
+        stroke_width=3,
+        circle_radius=5,
     ),
-    style=ol.FlatStyle(fill_color="rgba(255,210,120,0.5)", stroke_color="green", stroke_width=3, circle_radius=5),
-    fit_bounds=True
+    fit_bounds=True,
 )
 
 zoom_slider = ol.ZoomSliderControl()

examples/standalone/layers/gpx_vector_layer.py

@@ -3,11 +3,10 @@
 data = "https://openlayers.org/en/latest/examples/data/gpx/fells_loop.gpx"
 
 gpx_layer = ol.VectorLayer(
-    source=ol.VectorSource(
-        url=data,
-        format=ol.formats.GPX()
+    source=ol.VectorSource(url=data, format=ol.formats.GPX()),
+    style=ol.FlatStyle(
+        circle_fill_color="red", stroke_color="green", stroke_width=3, circle_radius=5
     ),
-    style=ol.FlatStyle(circle_fill_color="red", stroke_color="green", stroke_width=3, circle_radius=5)
 )
 
 m = ol.Map()

examples/standalone/layers/kml_vector_layer.py

@@ -3,10 +3,7 @@
 data = "https://openlayers.org/en/latest/examples/data//kml/states.kml"
 
 kml_layer = ol.VectorLayer(
-    source=ol.VectorSource(
-        url=data,
-        format=ol.formats.KML()
-    ),
+    source=ol.VectorSource(url=data, format=ol.formats.KML()),
     # style=ol.FlatStyle(fill_color="rgba(255,210,120,0.5)", stroke_color="green", stroke_width=3, circle_radius=5)
 )
 
@@ -16,6 +13,9 @@
 # m.add_call("addDragAndDropVectorLayers")
 m.add_drag_and_drop_vector_layers_interaction(
     formats=[ol.formats.KML(extract_styles=False)],
-    style=ol.FlatStyle(stroke_color="red", stroke_width=3, circle_radius=5, circle_stroke_color="green"))
+    style=ol.FlatStyle(
+        stroke_color="red", stroke_width=3, circle_radius=5, circle_stroke_color="green"
+    ),
+)
 m.add_call("addDrawInteraction", "LineString")
 m.save("/tmp/ol-example.html")

examples/standalone/layers/pmtiles_raster_layer.py

@@ -0,0 +1,20 @@
+import openlayers as ol
+from openlayers.models.sources import PMTilesRasterSource
+
+url = "https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles"
+
+pmtiles = ol.WebGLTileLayer(
+    id="pmtiles-raster",
+    source=PMTilesRasterSource(
+        url=url,
+        attributions=[
+            "https://github.com/tilezen/joerd/blob/master/docs/attribution.md"
+        ],
+        tile_size=[512, 512],
+    ),
+)
+
+view = ol.View(center=(0, 0), zoom=1)
+
+m = ol.Map(view=view, layers=[pmtiles])
+m.save()

examples/standalone/layers/pmtiles_vector_layer.py

@@ -2,23 +2,20 @@
 from openlayers.models.sources import PMTilesVectorSource
 from openlayers.styles import default_style
 
-url = "https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles"
-
-LayerModel = ol.layers.VectorTileLayer
-LayerModel = ol.layers.WebGLVectorTileLayer
+url = (
+    "https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles"
+)
 
-pmtiles = LayerModel(
-    id="pmtiles",
-    style=default_style(stroke_color="green", stroke_with=3),
+pmtiles = ol.layers.VectorTileLayer(
+    id="pmtiles-vector",
+    style=default_style(stroke_color="green", stroke_width=2),
     source=PMTilesVectorSource(
-        url=url,
-        attributions=["© Land Information New Zealand"]
-    )
+        url=url, attributions=["© Land Information New Zealand"]
+    ),
 )
 
-view = ol.View(center=(172.606201,-43.556510), zoom=12)
+view = ol.View(center=(172.606201, -43.556510), zoom=12)
 
 m = ol.Map(view=view, layers=[pmtiles])
-# m.add_layer(pmtiles)
 m.add_tooltip()
 m.save()

examples/standalone/layers/topojson_vector_layer.py

@@ -3,12 +3,14 @@
 data = "https://openlayers.org/en/latest/examples/data/topojson/fr-departments.json"
 
 topojson_layer = ol.VectorLayer(
-    source=ol.VectorSource(
-        url=data,
-        format=ol.formats.TopoJSON()
+    source=ol.VectorSource(url=data, format=ol.formats.TopoJSON()),
+    style=ol.FlatStyle(
+        fill_color="rgba(255,210,120,0.5)",
+        stroke_color="green",
+        stroke_width=3,
+        circle_radius=5,
     ),
-    style=ol.FlatStyle(fill_color="rgba(255,210,120,0.5)", stroke_color="green", stroke_width=3, circle_radius=5),
-    fit_bounds=True
+    fit_bounds=True,
 )
 
 m = ol.Map()

src/openlayers/js/openlayers.standalone.js

@@ -34,6 +34,7 @@ class ImageTileSource(Source):
     min_zoom: float | int | None = Field(0, serialization_alias="minZoom")
     max_zoom: float | int | None = Field(20, serialization_alias="maxZoom")
 
+
 """
 const vectorLayer = new VectorTile({
   declutter: true,
@@ -43,10 +44,16 @@ class ImageTileSource(Source):
   }),
 """
 
+# PMTiles extension
+# See https://docs.protomaps.com/pmtiles/openlayers
 class PMTilesVectorSource(Source):
     url: str
     attributions: list[str] = None
 
 
+class PMTilesRasterSource(PMTilesVectorSource):
+    tile_size: tuple[int, int] = Field(None, serialization_alias="tileSize")
+
+
 # --- Source type
-SourceT = Union[OSM, VectorSource, GeoTIFFSource, ImageTileSource, PMTilesVectorSource]
+SourceT = Union[OSM, VectorSource, GeoTIFFSource, ImageTileSource, PMTilesVectorSource, PMTilesRasterSource]

src/openlayers/models/sources.py

@@ -7,6 +7,7 @@
     Source,
     SourceT,
     VectorSource,
+    PMTilesVectorSource
 )
 
 __all__ = ["OSM", "GeoTIFFSource", "VectorSource", "ImageTileSource"]

src/openlayers/sources.py

@@ -2,15 +2,16 @@ import OSM from "ol/source/OSM";
 import VectorSource from "ol/source/Vector";
 import GeoTIFFSource from 'ol/source/GeoTIFF.js';
 import ImageTileSource from "ol/source/ImageTile";
-import { PMTilesVectorSource } from "ol-pmtiles";
+import { PMTilesVectorSource, PMTilesRasterSource } from "ol-pmtiles";
 
 const sourceCatalog: SourceCatalog = {
     OSM: OSM,
     VectorSource: VectorSource,
     GeoTIFFSource: GeoTIFFSource,
     GeoJSONSource: VectorSource,
     ImageTileSource: ImageTileSource,
-    PMTilesVectorSource: PMTilesVectorSource
+    PMTilesVectorSource: PMTilesVectorSource,
+    PMTilesRasterSource: PMTilesRasterSource
 };
 
 export { sourceCatalog };