Demo osm-france pmtiles

kalisio · Jul 16, 2024 · eadcfaa · eadcfaa
1 parent 073df8f
commit eadcfaa
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 0 deletions.
diff --git a/demo/osm-france.html b/demo/osm-france.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>leaflet-pmtiles OpenMapTiles demo</title>
+	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+</head>
+<body>
+	<div id="map" style="position: absolute; top: 0; left:0; bottom:0; right: 0;"></div>
+
+	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+	<!--script src="https://unpkg.com/[email protected]/dist/protomaps-leaflet.min.js"></script-->
+	<script src="https://unpkg.com/protomaps-leaflet@latest/dist/protomaps-leaflet.min.js"></script>
+	<script src="leaflet-pmtiles.js"></script>
+	<script src="osm-france.js"></script>
+</body>
+</html>
diff --git a/demo/osm-france.js b/demo/osm-france.js
@@ -0,0 +1,94 @@
+async function run () {
+    const map = L.map('map', {
+      center: [47, 2],
+      zoom: 6,
+      zoomControl: false,
+      fullscreenControl: true
+    })
+
+    // mountain peak style
+    var mountainPeakStyle = 
+    {
+        radius: 10,
+        fillColor: "pink",
+        stroke: "red",
+        weight: 1,
+        opacity: 0.8,
+    }
+    // waterways style
+    var waterwaysStyle = 
+    {
+        color: "blue",
+        weight: 1,
+        opacity: 1,
+        dashOffset: [2,4]
+    }
+
+    // park style
+    var parkStyle = {
+        fillColor: "green",
+        opacity: 0.8
+    }
+
+    function transformLineToProtomapsStyle(paint_rules, layername, leafletstyle) {
+            paint_rules.push({   
+            dataLayer: layername,
+            symbolizer: new protomapsL.LineSymbolizer({
+                color: leafletstyle["color"],
+                width: leafletstyle["weight"],
+                opacity: leafletstyle["opacity"],
+                dashColor: leafletstyle["color"],
+                dash: leafletstyle['dashOffset'],
+            }),
+            })
+        return paint_rules
+    };
+
+    function transformPolygonToProtomapsStyle(paint_rules, layername, leafletstyle) {
+        paint_rules.push({   
+        dataLayer: layername,
+        symbolizer: new protomapsL.PolygonSymbolizer({
+            fill: leafletstyle["fillColor"],
+            width: leafletstyle["weight"],
+            opacity: leafletstyle["opacity"],
+            stroke: leafletstyle['stroke'],
+            /*perFeature: ,
+            doStroke: ,
+            pattern: ,*/
+        }),
+        })
+    return paint_rules
+    }
+
+    function transformCircleToProtomapsStyle(paint_rules, layername, leafletstyle) {
+        paint_rules.push({   
+            dataLayer: layername,
+            symbolizer: new protomapsL.CircleSymbolizer({
+                radius: leafletstyle['radius'],
+                fill: leafletstyle["fillColor"],
+                width: leafletstyle["weight"],
+                opacity: leafletstyle["opacity"],
+                stroke: leafletstyle['stroke'],
+            }),
+            })
+        return paint_rules
+    }
+
+
+    let paintRules = []
+    transformLineToProtomapsStyle(paintRules, 'waterway', waterwaysStyle)
+    transformPolygonToProtomapsStyle(paintRules, 'park', parkStyle)
+    transformCircleToProtomapsStyle(paintRules, 'mountain_peak', mountainPeakStyle)
+
+    console.log(paintRules)
+
+    // define dynamic paint rules
+
+    // display the layer by curling the pmtiles file and fitting it with the stylesheet
+    let yoyo = protomapsL.leafletLayer({
+        url:'http://127.0.0.1:8081/osm-france.pmtiles',
+        paintRules
+    }).addTo(map)
+}
+
+run()