Add ability to load raster pmtiles

to close #312

Author: dceejay

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v5.5.0 - Add ability to load raster pmtiles files. Issue #312
  - v5.4.0 - Let msg.payload.command.zoomLevels set an array of acceptable zoom levels. Issue #312
  - v5.3.0 - Let msg.payload.popupOptions object set Leaflet popup options so it can be customised. Issue #311
  - v5.2.0 - Allow left click send back co-ords. Let Button be replaceable more easily and take value property. Issue #308 and #309

README.md

@@ -13,6 +13,7 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
 
 ### Updates
 
+- v5.5.0 - Add ability to load raster pmtiles files. Issue #312
 - v5.4.0 - Let msg.payload.command.zoomLevels set an array of acceptable zoom levels. Issue #312
 - v5.3.0 - Let msg.payload.popupOptions object set Leaflet popup options so it can be customised. Issue #311
 - v5.2.0 - Allow left click send back co-ords. Let Button be replaceable more easily and take value property. Issue #308 and #309
@@ -772,15 +773,19 @@ You can also load them dynamically with a command like
 
 Where `opt` can be as per the options file mentioned above - or omitted completely.
 
+NOTE: for some reason many files converted to pmtiles format fail to load/display. In this case you can easily use the tileserver-gl map server either natively or via docker (see below) to serve the pmtiles format file.
+
 ### Using a Docker Map Server
 
-I have found the easiest to use mapserver for a decent generic map to be Tileserver-gl. It uses mbtiles format maps - for example from [MapTiler Data](https://data.maptiler.com/downloads/planet/). You can download your mbtiles file into a directory and then from that directory run
+I have found the easiest to use mapserver for a decent generic map to be Tileserver-gl. It uses mbtiles or pmtiles format maps - for example from [MapTiler Data](https://data.maptiler.com/downloads/planet/). You can download your mbtiles file into a directory and then from that directory run
 ```
 docker run --name maptiler -d -v $(pwd):/data -p 1884:8080 maptiler/tileserver-gl -p 8080 --mbtiles yourMapFile.mbtiles
 ```
 and use a url like `"url": "http://localhost:1884/styles/basic-preview/{z}/{x}/{y}.png"`
 
-Other more traditional map servers include containers like https://hub.docker.com/r/camptocamp/mapserver, then assuming you have the mapfile 'my-app.map' in the current working directory, you could mount it as:
+This also works for pmtiles format map files.
+
+Other more traditional map servers include containers like https://hub.docker.com/r/camptocamp/mapserver,  which then assuming you have the mapfile 'my-app.map' in the current working directory, you could mount it as:
 ```
 docker run -d --name camptocamp -v $(pwd):/etc/mapserver/:ro -p 1881:80 camptocamp/mapserver
 ```

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "5.4.0",
+    "version": "5.5.0",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "@turf/bezier-spline": "~7.2.0",

worldmap/index.html

@@ -77,6 +77,7 @@
     <script src="leaflet/VectorTileLayer.umd.min.js"></script>
     <script src="leaflet/esri-leaflet.js"></script>
     <script src="leaflet/protomaps-leaflet.min.js"></script>
+    <script src="leaflet/pmtiles.js"></script>
     <script src="leaflet/Semicircle.js"></script>
     <script src="leaflet/Leaflet.LimitZoom.js"></script>
     <script src="leaflet/leaflet-arc.min.js"></script>

worldmap/leaflet/pmtiles.js

@@ -2727,29 +2727,33 @@ function doCommand(cmd) {
                 basemaps[cmd.map.name].removeFrom(map);
                 existsalready = true;
             }
-            let opt = {};
-            if (cmd.map.hasOwnProperty("opt")) { opt = cmd.map.opt || {}; }
-
-            if (!opt.paintRules && !opt.labelRules && !opt.backgroundColor && !opt.theme) {
-                opt.theme = "light"; // light, dark, white, black, grayscale
-            };
-
-            opt.url = cmd.map.pmtiles;
-            opt.attribution = opt.attribution || '© Protomaps & OSM';
-            opt.maxDataZoom = opt.maxDataZoom || 15;
-            opt.maxZoom = opt.maxZoom || 20;
-
-            console.log("New PMtiles:",cmd.map.name,opt);
-            basemaps[cmd.map.name] = protomapsL.leafletLayer(opt);
-            if (!existsalready) {
-                layercontrol.addBaseLayer(basemaps[cmd.map.name],cmd.map.name);
-            }
-            if (Object.keys(basemaps).length === 1) {
-                baselayername = cmd.map.name;
-                basemaps[baselayername].addTo(map);
-            }
-            if (pmtloaded === "") { pmtloaded = cmd.map.name; }
-        } catch(e) { console.log(e); }
+            const p = new pmtiles.PMTiles(cmd.map.pmtiles);
+            p.getHeader().then((h) => {
+                var opt = cmd.map.opt || {};
+                if (!opt.maxZoom) { opt.maxZoom = h.maxZoom || 20; }
+                opt.maxDataZoom = opt.maxDataZoom || 15;
+                opt.attribution = opt.attribution || '© Protomaps & OSM';
+                if (!opt.paintRules && !opt.labelRules && !opt.backgroundColor && !opt.theme) {
+                    opt.theme = "light"; // light, dark, white, black, grayscale
+                }
+                if (h.tileType === 1) {
+                    opt.url = cmd.map.pmtiles;
+                    basemaps[cmd.map.name] = protomapsL.leafletLayer(opt);
+                }
+                else {
+                    basemaps[cmd.map.name] = pmtiles.leafletRasterLayer(p, opt);
+                }
+                if (!existsalready) {
+                    layercontrol.addBaseLayer(basemaps[cmd.map.name],cmd.map.name);
+                }
+                if (Object.keys(basemaps).length === 1) {
+                    baselayername = cmd.map.name;
+                    basemaps[baselayername].addTo(map);
+                }
+                if (pmtloaded === "") { pmtloaded = cmd.map.name; }
+            });
+        }
+        catch(e) { console.log(e); }
     }
     // Add or swap new minimap layer
     if (cmd.map && cmd.map.hasOwnProperty("minimap")) {