test raster

KoalaGeo · Oct 4, 2023 · 75a545f · 75a545f
1 parent 10dca68
commit 75a545f
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 25 deletions.
diff --git a/radon/radon-leaflet-raster.html b/radon/radon-leaflet-raster.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_raster.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-leaflet.html → radon/radon-leaflet-vector.html b/radon/radon-leaflet.html → radon/radon-leaflet-vector.html
@@ -19,7 +19,7 @@
 
             const p = new pmtiles.PMTiles("radon_v2.pmtiles")
             p.getHeader().then(h => {
-                let layer = pmtiles.leafletRasterLayer(p, {
+                let layer = pmtiles.leafletVectorLayer(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>.'
                 });

diff --git a/radon/radon-maplibre.html b/radon/radon-maplibre.html
@@ -21,18 +21,18 @@
             let protocol = new pmtiles.Protocol();
             maplibregl.addProtocol("pmtiles",protocol.tile);
 
-            let PMTILES_URL = "https://protomaps.github.io/PMTiles/protomaps(vector)ODbL_firenze.pmtiles";
+            let PMTILES_URL = "https://britishgeologicalsurvey.github.io/sensor-things-api-demo/web-maps/radon_v2.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,
+                    zoom: h.maxZoom-6,
                     center: [h.centerLon, h.centerLat],
                     style: {
                         version:8,
@@ -45,37 +45,21 @@
                         },
                         layers: [
                             {
-                                "id":"buildings",
+                                "id":"Radon_Indicative_Atlas_v3",
                                 "source": "example_source",
-                                "source-layer":"landuse",
+                                "source-layer":"Radon_Indicative_Atlas_v3",
                                 "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;
             })
+            // Add zoom and rotation controls to the map.
+            map.addControl(new maplibregl.NavigationControl());
         </script>
     </body>
 </html>
diff --git a/radon/radon-ol-raster.html b/radon/radon-ol-raster.html
@@ -0,0 +1,35 @@
+<html>
+    <head>
+        <title>PMTiles Radon Vector Example</title>
+        <meta charset="utf-8"/>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
+        <script src="https://unpkg.com/[email protected]/dist/olpmtiles.js"></script>
+        <style>
+            body, #map {
+                height:100vh;
+                margin: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="map"></div>
+        <script type="text/javascript">
+            const rasterLayer = new ol.layer.Tile({
+              source: new ol.source.XYZ({
+                url: "radon_raster.pmtiles/{z}/{x}/{y}.png", // Modify the URL to match your raster PMTiles file
+                attributions: ["© British Geological Survey"]
+              })
+            });
+            ol.proj.useGeographic();
+            const map = new ol.Map({
+              layers: [rasterLayer],
+              target: 'map',
+              view: new ol.View({
+                center: [1.4, 53.1],
+                zoom: 5
+              }),
+            });
+        </script>        
+    </body>
+</html>
diff --git a/radon/radon-ol.html b/radon/radon-ol.html
@@ -60,7 +60,7 @@
           const vectorLayer = new ol.layer.VectorTile({
             declutter: true,
             source: new olpmtiles.PMTilesVectorSource({
-              url: "https://koalageo.github.io/QGIS-Leaflet-Maps/radon/radon_v2.pmtiles",
+              url: "radon_v2.pmtiles",
               attributions: ["© British Geological Survey"]
             }),
             style: getStyle // Use the custom style function for styling

diff --git a/radon/radon_raster.mbtiles b/radon/radon_raster.mbtiles
diff --git a/radon/radon_raster.pmtiles b/radon/radon_raster.pmtiles