fix(map): fix water or multipolygons in general

package.json

@@ -3,15 +3,15 @@
   "version": "1.0.0",
   "description": "AxiDrawJS allows you to use JavaScript to draw on any flat surface.",
   "dependencies": {
+    "@mapbox/vector-tile": "^1.3.1",
     "line2": "^0.2.1",
     "lodash.max": "^4.0.1",
     "lodash.min": "^4.0.1",
     "pbf": "^3.1.0",
     "perspective-camera": "^2.0.1",
     "simplify-js": "^1.2.3",
     "text-to-svg": "^3.1.3",
-    "vec2": "^1.6.0",
-    "vector-tile": "^1.3.0"
+    "vec2": "^1.6.0"
   },
   "devDependencies": {
     "@tweenjs/tween.js": "^17.2.0",

src/lib/load-lines-mapbox.js

@@ -1,14 +1,13 @@
 import flatten from 'geojson-flatten';
 import {tile} from 'd3-tile';
-import {VectorTile} from 'vector-tile';
+import {VectorTile} from '@mapbox/vector-tile';
 import getProjection from './get-projection';
 import Protobuf from 'pbf';
 
 const API_KEY = 'fApLQBTwQbaIclmV0CoOQA';
 const TILE_BASE_URL = 'https://tile.nextzen.org/tilezen/vector/v1/256/all/';
-const EXCLUDE_ROAD_TYPES = ['ferry', 'path', 'minor_road', 'rail'];
-
-const INCLUDED = ['road', 'water'];
+const INCLUDED_LAYERS = ['road', 'water'];
+const EXCLUDED_FEATURES = ['ferry', 'pedestrian'];
 
 /**
  * Loads vector tiles for a given viewport.
@@ -33,11 +32,22 @@ async function loadTiles(viewport) {
     const vectorLayers = new VectorTile(new Protobuf(buffer));
 
     for (const layer of Object.values(vectorLayers.layers)) {
-      if (!INCLUDED.includes(layer.name)) {continue;}
+      if (!INCLUDED_LAYERS.includes(layer.name)) {continue;}
 
       for (let i = 0; i < layer.length; i++) {
         const feature = layer.feature(i);
         const geojson = feature.toGeoJSON(visibleTile.x, visibleTile.y, visibleTile.z);
+
+        if (EXCLUDED_FEATURES.includes(geojson.properties.type)) {
+          continue;
+        }
+
+        // flatten multi polygon strings
+        if (geojson.geometry.type === 'MultiPolygon') {
+          geojson.geometry.coordinates = geojson.geometry.coordinates
+            .reduce((all, item) => all.concat(item), []);
+        }
+
         geojsons.push(geojson);
       }
     }

src/lib/load-lines.js

@@ -44,6 +44,12 @@ function getLines(features) {
   for (const feature of features) {
     if (feature.geometry.type === 'Point') continue;
 
+    // flatten multi polygon strings
+    if (feature.geometry.type === 'MultiPolygon') {
+      feature.geometry.coordinates = feature.geometry.coordinates
+        .reduce((all, item) => all.concat(item), []);
+    }
+
     flattened.push(...flatten(feature));
   }
 

src/lib/plot-map.js

@@ -1,6 +1,6 @@
 import getProjection from './get-projection';
 import {optimizeOrder} from './optimize-lines';
-import loadLines from './load-lines';
+import loadLines from './load-lines-mapbox';
 import mergeLines from './merge-lines';
 import simplifyLines from './simplify-lines';
 import cropLines from './crop-lines-by-circle';