add leaflet & maplibre

KoalaGeo · Oct 4, 2023 · 9c89012 · 9c89012
1 parent cc2ba06
commit 9c89012
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 0 deletions.
diff --git a/radon/radon-leaflet.html b/radon/radon-leaflet.html
@@ -0,0 +1,30 @@
+<html>
+    <head>
+        <title>PMTiles Leaflet Example</title>
+        <meta charset="utf-8"/>
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+        <script src="https://unpkg.com/[email protected]/dist/index.js"></script>
+        <style>
+            body, #map {
+                height:100vh;
+                margin: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="map"></div>
+        <script type="text/javascript">
+            const map = L.map('map').setView([0, 0], 0);
+
+            const p = new pmtiles.PMTiles("radon_v2.pmtiles")
+            p.getHeader().then(h => {
+                let layer = pmtiles.leafletRasterLayer(p, {
+                    maxzoom:h.maxZoom,
+                    attribution:'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
+                });
+                layer.addTo(map);
+            })
+        </script>
+    </body>
+</html>
diff --git a/radon/radon-maplibre.html b/radon/radon-maplibre.html
@@ -0,0 +1,81 @@
+<html>
+    <head>
+        <title>PMTiles MapLibre Example</title>
+        <meta charset="utf-8"/>
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" crossorigin="anonymous">
+        <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" crossorigin="anonymous"></script>
+        <script src="https://unpkg.com/[email protected]/dist/index.js"></script>
+        <style>
+            body {
+                margin: 0;
+            }
+            #map {
+                height:100%; width:100%;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="map"></div>
+        <script type="text/javascript">
+            // add the PMTiles plugin to the maplibregl global.
+            let protocol = new pmtiles.Protocol();
+            maplibregl.addProtocol("pmtiles",protocol.tile);
+
+            let PMTILES_URL = "https://protomaps.github.io/PMTiles/protomaps(vector)ODbL_firenze.pmtiles";
+
+            const p = new pmtiles.PMTiles(PMTILES_URL);
+
+            // this is so we share one instance across the JS code and the map renderer
+            protocol.add(p);
+
+            // we first fetch the header so we can get the center lon, lat of the map.
+            p.getHeader().then(h => {
+                const map = new maplibregl.Map({
+                    container: 'map',
+                    zoom: h.maxZoom-2,
+                    center: [h.centerLon, h.centerLat],
+                    style: {
+                        version:8,
+                        sources: {
+                            "example_source": {
+                                type: "vector",
+                                url: "pmtiles://" + PMTILES_URL,
+                                attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
+                            }
+                        },
+                        layers: [
+                            {
+                                "id":"buildings",
+                                "source": "example_source",
+                                "source-layer":"landuse",
+                                "type": "fill",
+                                "paint": {
+                                    "fill-color": "steelblue"
+                                }
+                            },
+                            {
+                                "id":"roads",
+                                "source": "example_source",
+                                "source-layer":"roads",
+                                "type": "line",
+                                "paint": {
+                                    "line-color": "black"
+                                }
+                            },
+                            {
+                                "id":"mask",
+                                "source": "example_source",
+                                "source-layer":"mask",
+                                "type": "fill",
+                                "paint": {
+                                    "fill-color": "white"
+                                }
+                            }
+                        ]
+                    }
+                });
+                map.showTileBoundaries = true;
+            })
+        </script>
+    </body>
+</html>
diff --git a/radon/radon.html → radon/radon-ol.html b/radon/radon.html → radon/radon-ol.html