Experiment: experimenting with PMTiles

package-lock.json

@@ -78,7 +78,7 @@
         "pg": "^8.11.3",
         "pic4carto": "^2.1.15",
         "pluscodes": "^2.6.0",
-        "pmtiles": "^4.2.1",
+        "pmtiles": "^4.3.0",
         "prompt-sync": "^4.2.0",
         "qrcode-generator": "^1.4.4",
         "showdown": "^2.1.0",
@@ -23516,9 +23516,10 @@
       "integrity": "sha512-+3sW+Qt+znuN2uMFFvebo2m5MsaTjBXOzEYvkfx4RMeOYnNCQv3OWeQujfRAo6nzg7D+5vD2b3tihtwW3b5pfg=="
     },
     "node_modules/pmtiles": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-4.2.1.tgz",
-      "integrity": "sha512-Z73aph49f7KpU7JPb+zDWr+62wPv9jF3p+tvvL26/XeECnzUHnQ0nGopXGPYnq+OQXqyaXZPrsNdKxSD+2HlLA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-4.3.0.tgz",
+      "integrity": "sha512-wnzQeSiYT/MyO63o7AVxwt7+uKqU0QUy2lHrivM7GvecNy0m1A4voVyGey7bujnEW5Hn+ZzLdvHPoFaqrOzbPA==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "fflate": "^0.8.2"
       }

package.json

@@ -243,7 +243,7 @@
     "pg": "^8.11.3",
     "pic4carto": "^2.1.15",
     "pluscodes": "^2.6.0",
-    "pmtiles": "^4.2.1",
+    "pmtiles": "^4.3.0",
     "prompt-sync": "^4.2.0",
     "qrcode-generator": "^1.4.4",
     "showdown": "^2.1.0",

src/Models/RasterLayers.ts

@@ -5,11 +5,12 @@ import * as globallayersEli from "../assets/generated/editor-layer-index-global.
 import * as bingJson from "../assets/bing.json"
 
 import { BBox } from "../Logic/BBox"
-import { Store, Stores, UIEventSource } from "../Logic/UIEventSource"
+import { Store, Stores } from "../Logic/UIEventSource"
 import { GeoOperations } from "../Logic/GeoOperations"
 import { EliCategory, RasterLayerProperties } from "./RasterLayerProperties"
 import { Utils } from "../Utils"
 import { default as ELI } from "../../public/assets/data/editor-layer-index.json"
+
 export type EditorLayerIndex = (Feature<Polygon, EditorLayerIndexProperties> & RasterLayerPolygon)[]
 
 export class AvailableRasterLayers {

src/UI/SingleThemeGui.svelte

@@ -50,6 +50,7 @@
   let webgl_supported = webgl_support()
 
   let availableLayers = UIEventSource.FromPromise(getAvailableLayers())
+  availableLayers.addCallbackAndRun(av => console.log("Available layers are", av))
   const state = new WithSearchState(theme, availableLayers)
 </script>
 

src/UI/Test.svelte

@@ -1,3 +1,63 @@
-<script lang="ts"></script>
+<script lang="ts">
+  import { PMTiles } from "pmtiles"
+
+  // What piece of the map to download and cache locally for the current map view?
+  const gentBBox = {
+    "type": "Feature",
+    "properties": {},
+    "geometry": {
+      "coordinates": [
+        [
+          [
+            3.6911333519349228,
+            51.069673467969096
+          ],
+          [
+            3.6911333519349228,
+            51.02886180987505
+          ],
+          [
+            3.773873676856965,
+            51.02886180987505
+          ],
+          [
+            3.773873676856965,
+            51.069673467969096
+          ],
+          [
+            3.6911333519349228,
+            51.069673467969096
+          ]
+        ]
+      ],
+      "type": "Polygon"
+    }
+  }
+
+  // URL or fetch source of the PMTiles archive
+  let source = new PMTiles("https://cache.mapcomplete.org/planet-latest.pmtiles")
+
+  async function test(z: number, x: number, y: number) {
+
+
+    const meta = await source.getMetadata()
+    console.log(meta)
+    const minzoom = meta["minzoom"]
+    const maxzoom = meta["maxzoom"]
+    console.log("Range is", minzoom, maxzoom)
+    for (const l of meta["vector_layers"]) {
+      //    console.log(l)
+    }
+//    const header = await source.getHeader()
+//    console.log(header)
+    let resp = await source.getZxy(z, x, y)
+    console.log(resp)
+//    let tileData = resp?.data
+    // do something with tileData
+  }
+
+  test(14, 8338, 5469) // Elf-julistraat Brugge
+  test(15, 12233, 10534)
+</script>
 
 Nothing to test

src/assets/global-raster-layers.json

@@ -30,7 +30,7 @@
         "text": "Protomaps",
         "url": "https://protomaps.com/"
       },
-      "url": "https://cache.mapcomplete.org/planet-latest.pmtiles"
+      "url": "https://cache.mapcomplete.org/global-basemap.pmtiles"
     },
     {
       "name": "OpenStreetMap Carto",