compressed tippecanoe tiles served locally

.gitignore

@@ -2,3 +2,5 @@ node_modules
 config/dbconfig.json
 public/files
 cache
+tiles
+public/tiles
\ No newline at end of file

package.json

@@ -8,14 +8,26 @@
     "start": "node pgserver.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "nodemonConfig": {
+    "ignore": [
+      "public/tiles",
+      "tiles"
+    ]
+  },
   "author": "Anne Blankert, Geodan",
   "license": "ISC",
   "dependencies": {
+    "@mapbox/mbtiles": "^0.12.1",
     "@mapbox/sphericalmercator": "^1.1.0",
+    "@turf/bbox": "^6.0.1",
+    "@turf/turf": "^5.1.6",
+    "compression": "^1.7.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",
+    "geojson2mvt": "0.0.4",
     "morgan": "^1.9.1",
     "nodemon": "^1.19.2",
+    "path": "^0.12.7",
     "pg": "^7.12.1"
   }
 }

pgserver.js

@@ -4,15 +4,62 @@ const express = require('express');
 const logger = require('morgan');
 const cors = require('cors');
 
+const MBTiles = require('@mapbox/mbtiles');
+const p = require("path");
+
 const app = express();
 
+const compression = require('compression');
+//app.use(compression({ threshold: 6 }));
+app.use(compression());
 
 //app.use(logger('dev'));
 app.use(logger('combined', {
     skip: function (req, res) { return res.statusCode < 400 }
 }));
 app.use(cors());
+
+// Enable CORS and set correct mime type/content encoding
+let header = {
+    "Access-Control-Allow-Origin":"*",
+    "Access-Control-Allow-Headers":"Origin, X-Requested-With, Content-Type, Accept",
+    "Content-Type":"application/x-protobuf",
+    "Content-Encoding":"gzip"
+};
+
+let options = {
+    extensions: ['pbf'],
+    setHeaders: function (res, path, req) {
+        let ext = path.split('.').pop()
+        //console.log(res)
+        if (ext === 'pbf') {
+            /*res.header('Content-Type', 'application/x-protobuf');
+            res.header('Access-Control-Allow-Origin', '*');
+            res.header('Access-Control-Allow-Methods', 'GET');
+            res.header('Access-Control-Allow-Headers', 'Content-Type');
+            //res.header('Content-Encoding', 'gzip');*/
+            res.header(header);
+        }
+    }
+}
 app.use('/', express.static(__dirname + '/public'));
+//app.use('/', express.static(__dirname + '/public', options));
+
+// Route which handles requests like the following: /<mbtiles-name>/0/1/2.pbf
+app.get('/denue/:z/:x/:y.pbf', function(req, res) {
+    new MBTiles(p.join(__dirname, '/public/outC.mbtiles'), function(err, mbtiles) {
+        mbtiles.getTile(req.params.z, req.params.x, req.params.y, function(err, tile, headers) {
+            if (err) {
+                res.set({"Content-Type": "text/plain"});
+                res.status(404).send('Tile rendering error: ' + err + '\n');
+            } else {
+                res.set(header);
+                res.send(tile);
+            }
+        });
+        if (err) console.log("error opening database");
+    });
+});
 
 const {Pool} = require('pg');
 const dbconfig = require('./config/dbconfig.json');
@@ -27,6 +74,7 @@ const geojson = require('./geojson.js')(app, readOnlyPool);
 const geobuf = require('./geobuf.js')(app, readOnlyPool);
 const listLayers = require('./list_layers.js')(app, readOnlyPool);
 const query = require('./query.js')(app, readOnlyPool);
+const geojsonmvt = require('./geojsonmvt.js')(app, readOnlyPool);
 
 const server = app.listen(pgserverconfig.port);
 server.setTimeout(600000);

public/js/functions.js

@@ -26,17 +26,18 @@ const mapboxLayer = (table, n, polygon, box) => {
         id: table+"-"+n,
         source: {
             type: "vector",
-            tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=denue_geom_4326&columns=${columns.join(",")}&filter=${filter}`],
+            //tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=denue_geom_4326&columns=${columns.join(",")}&filter=${filter}`],
             //tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=denue_geom_4326&columns=${columns.join(",")}`],
-            //maxzoom: 19,
-            //minzoom: 6
+            tiles: ['http://localhost:8090/denue/{z}/{x}/{y}.pbf'],
+            maxzoom: 14,
+            minzoom: 8
         },
-        "source-layer": table,
+        "source-layer": "denue",
         type: "circle",
         "paint": {
-            //"circle-opacity": 0.5,
-            "circle-opacity": ['case', ['within',  polygon], 0.5, 0],
-            //"circle-radius": 1,
+            "circle-opacity": 0.5,
+            //"circle-opacity": ['case', ['within',  polygon], 0.5, 0],
+            //"circle-radius": 3,
             //"circle-radius": ['case', ['within',  polygon], 1, 0],
             "circle-radius": [
                 "interpolate",
@@ -54,7 +55,21 @@ const mapboxLayer = (table, n, polygon, box) => {
                 100, "rgb(158,1,66)"
             ]
         }
-        /*type: "heatmap",
+        /*"type": "symbol",
+        "paint": {
+            "icon-opacity": 0.8,
+        },
+        'layout': {
+            "icon-size": {
+                "stops": [
+                    [5, 0.1], [6, 0.1], [7, 0.1], [8, 0.1], [9, 0.1], [10, 0.2], [11, 0.2], [12, 0.2], [13, 0.9], [14, 1]
+                ]
+            },
+            "icon-image": "airport-11",
+            "icon-allow-overlap": true,
+            "icon-ignore-placement": true
+        }/
+        type: "heatmap",
         "paint": {
             //"heatmap-opacity": ['case', ['within',  polygon], 0.1, 0],
             "heatmap-intensity": 0.1,
@@ -119,7 +134,8 @@ let map = new mapboxgl.Map({
     accessToken: "pk.eyJ1IjoiZGV2ZWxvcGdlbyIsImEiOiJja2dwcXFic20wYnJnMzBrbG11d3dwYTkyIn0.4WwFOH6C7hDQXV9obU6mAw",
     style: 'mapbox://styles/mapbox/dark-v10',
     center: [-99.17, 19.36],
-    zoom: 9
+    zoom: 9,
+    maxZoom: 20
 });
 
 map.addControl(new mapboxgl.NavigationControl());
@@ -160,9 +176,9 @@ map.on("style.load", async () => {
             }
             singlePolys.push(pieces);
             box = JSON.parse(g.box);
-            //tiles = mapboxLayer("dim_denue2019", i, polygon, box);
-            //map.addLayer(tiles);
-            geojsonLayer("dim_denue_2019", i, polygon, box);
+            tiles = mapboxLayer("dim_denue2019", i, polygon, box);
+            map.addLayer(tiles);
+            //geojsonLayer("dim_denue_2019", i, polygon, box);
         });
     });