Switching to OpenMapTiles and Fixing Small Bugs

AUTHORS

@@ -6,3 +6,4 @@ Jannis R <mail@jannisr.de>
 Alexander Zhukov (https://github.com/ZhukovAlexander)
 Quincy Morgan (https://github.com/quincylvania)
 lennonhill (https://github.com/lennonhill)
+Raj Datta (https://github.com/ionmeo)

bin/mapscii.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+"use strict";
+require("../main.js");

package.json

@@ -13,7 +13,7 @@
     "url": "https://github.com/rastapasta/mapscii.git"
   },
   "bin": {
-    "mapscii": "./bin/mapscii.sh"
+    "mapscii": "./bin/mapscii.js"
   },
   "engines": {
     "node": ">=10"

src/Canvas.js

@@ -55,34 +55,97 @@ class Canvas {
   }
 
   polygon(rings, color) {
-    const vertices = [];
-    const holes = [];
+    const outerRings = [];
+    const innerRings = [];
+
     for (const ring of rings) {
-      if (vertices.length) {
-        if (ring.length < 3) continue;
-        holes.push(vertices.length / 2);
+      if (ring.length < 3) continue;
+      const area = this._calculateArea(ring);
+
+      if (area < 0) {
+        outerRings.push(ring);
       } else {
-        if (ring.length < 3) return false;
+        innerRings.push(ring);
       }
-      for (const point of ring) {
+    }
+
+    for (const outerRing of outerRings) {
+      const vertices = [];
+      const holes = [];
+
+      for (const point of outerRing) {
         vertices.push(point.x);
         vertices.push(point.y);
       }
+
+      const overlappingHoles = this._findOverlappingHoles(outerRing, innerRings);
+      for (const hole of overlappingHoles) {
+        if (hole.length >= 3) {
+          holes.push(vertices.length / 2);
+          for (const point of hole) {
+            vertices.push(point.x);
+            vertices.push(point.y);
+          }
+        }
+      }
+
+      let triangles;
+      try {
+        triangles = earcut(vertices, holes);
+      } catch (error) {
+        continue;
+      }
+      for (let i = 0; i < triangles.length; i += 3) {
+        const pa = this._polygonExtract(vertices, triangles[i]);
+        const pb = this._polygonExtract(vertices, triangles[i + 1]);
+        const pc = this._polygonExtract(vertices, triangles[i + 2]);
+        this._filledTriangle(pa, pb, pc, color);
+      }
     }
+    return true;
+  }
 
-    let triangles;
-    try {
-      triangles = earcut(vertices, holes);
-    } catch (error) {
-      return false;
+  _calculateArea(ring) {
+    let area = 0;
+    const n = ring.length;
+
+    for (let i = 0; i < n; i++) {
+      const j = (i + 1) % n;
+      area += (ring[j].x - ring[i].x) * (ring[j].y + ring[i].y);
     }
-    for (let i = 0; i < triangles.length; i += 3) {
-      const pa = this._polygonExtract(vertices, triangles[i]);
-      const pb = this._polygonExtract(vertices, triangles[i + 1]);
-      const pc = this._polygonExtract(vertices, triangles[i + 2]);
-      this._filledTriangle(pa, pb, pc, color);
+
+    return area / 2;
+  }
+
+  _findOverlappingHoles(outerRing, innerRings) {
+    const overlappingHoles = [];
+
+    for (const hole of innerRings) {
+      if (this._isPointInPolygon(hole[0], outerRing)) {
+        overlappingHoles.push(hole);
+      }
     }
-    return true;
+
+    return overlappingHoles;
+  }
+
+  _isPointInPolygon(point, polygon) {
+    let inside = false;
+    const n = polygon.length;
+
+    for (let i = 0, j = n - 1; i < n; j = i++) {
+      const xi = polygon[i].x;
+      const yi = polygon[i].y;
+      const xj = polygon[j].x;
+      const yj = polygon[j].y;
+
+      if (((yi > point.y) !== (yj > point.y)) &&
+          (point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi)) {
+        inside = !inside;
+      }
+    }
+
+    return inside;
   }
 
   _polygonExtract(vertices, pointId) {

src/Mapscii.js

@@ -32,6 +32,7 @@ class Mapscii {
 
     this.zoom = 0;
     this.minZoom = null;
+    this.maxZoom = null;
     config = Object.assign(config, options);
 
     this.center = {
@@ -45,16 +46,17 @@ class Mapscii {
       this._initKeyboard();
       this._initMouse();
     }
-    this._initTileSource();
+    await this._initTileSource();
     this._initRenderer();
     this._draw();
     this.notify('Welcome to MapSCII! Use your cursors to navigate, a/z to zoom, q to quit.');
   }
 
 
-  _initTileSource() {
+  async _initTileSource() {
     this.tileSource = new TileSource();
-    this.tileSource.init(config.source);
+    await this.tileSource.init(config.source);
+    this.maxZoom = this.tileSource.getMaxZoom();
   }
 
   _initKeyboard() {
@@ -291,8 +293,8 @@ class Mapscii {
     if (this.zoom+step < this.minZoom) {
       return this.zoom = this.minZoom;
     }
-    if (this.zoom+step > config.maxZoom) {
-      return this.zoom = config.maxZoom;
+    if (this.zoom+step > this.maxZoom) {
+      return this.zoom = this.maxZoom;
     }
 
     this.zoom += step;

src/Renderer.js

@@ -295,27 +295,28 @@ class Renderer {
   _generateDrawOrder(zoom) {
     if (zoom < 2) {
       return [
-        'admin',
+        'boundary',
         'water',
-        'country_label',
-        'marine_label',
+        'place',
+        'water_name',
       ];
-    } else {
+    }
+    else {
       return [
+        'landcover',
         'landuse',
         'water',
-        'marine_label',
+        'waterway',
+        'water_name',
+        'aeroway',
+        'park',
         'building',
-        'road',
-        'admin',
-        'country_label',
-        'state_label',
-        'water_label',
-        'place_label',
-        'rail_station_label',
-        'poi_label',
-        'road_label',
-        'housenum_label',
+        'transportation',
+        'boundary',
+        'place',
+        'poi',
+        'transportation_name',
+        'housenumber',
       ];
     }
   }

src/Styler.js

@@ -81,7 +81,7 @@ class Styler {
         filters = (() => {
           return filter.map((sub) => this._compileFilter(sub));
         }).call(this);
-        return (feature) => !!filters.find((appliesTo) => {
+        return (feature) => !filters.find((appliesTo) => {
           return !appliesTo(feature);
         });
       case 'any':

src/Tile.js

@@ -126,7 +126,7 @@ class Tile {
     let maxX = -2e308;
     let minY = 2e308;
     let maxY = -2e308;
-    const points = (deep ? data.points[0] : data.points);
+    const points = (deep ? data.points.flat() : data.points);
     for (const p of points) {
       if (p.x < minX) minX = p.x;
       if (p.x > maxX) maxX = p.x;

src/TileSource.js

@@ -31,7 +31,7 @@ const modes = {
 };
 
 class TileSource {
-  init(source) {
+  async init(source) {
     this.source = source;
 
     this.cache = {};
@@ -41,21 +41,23 @@ class TileSource {
     this.mode = null;
     this.mbtiles = null;
     this.styler = null;
+    this.maxZoom = null;
 
     if (this.source.startsWith('http')) {
       if (config.persistDownloadedTiles) {
         this._initPersistence();
       }
 
       this.mode = modes.HTTP;
+      this.maxZoom = config.maxZoom;
 
     } else if (this.source.endsWith('.mbtiles')) {
       if (!MBTiles) {
         throw new Error('MBTiles support must be installed with following command: \'npm install -g @mapbox/mbtiles\'');
       }
 
       this.mode = modes.MBTiles;
-      this.loadMBTiles(source);
+      await this.loadMBTiles(source);
     } else {
       throw new Error('source type isn\'t supported yet');
     }
@@ -68,7 +70,18 @@ class TileSource {
           reject(err);
         }
         this.mbtiles = mbtiles;
-        resolve();
+
+        this.mbtiles._db.all(
+          'SELECT MAX(zoom_level) as max_zoom FROM tiles',
+          (err, rows) => {
+            if (err || !rows || !rows[0]) {
+              this.maxZoom = config.maxZoom;
+            } else {
+              this.maxZoom = rows[0].max_zoom || config.maxZoom;
+            }
+            resolve();
+          }
+        );
       });
     });
   }
@@ -77,6 +90,10 @@ class TileSource {
     this.styler = styler;
   }
 
+  getMaxZoom() {
+    return this.maxZoom;
+  }
+
   getTile(z, x, y) {
     if (!this.mode) {
       throw new Error('no TileSource defined');
@@ -113,8 +130,8 @@ class TileSource {
         .then((buffer) => {
           if (config.persistDownloadedTiles) {
             this._persistTile(z, x, y, buffer);
-            return buffer;
           }
+          return buffer;
         });
     }
     return promise.then((buffer) => {

src/TileSource.spec.js

@@ -5,7 +5,7 @@ describe('TileSource', () => {
   describe('with a HTTP source', () => {
     test('sets the mode to 3', async () => {
       const tileSource = new TileSource();
-      await tileSource.init('http://mapscii.me/');
+      await tileSource.init('https://tiles.openfreemap.org/planet/map/');
       expect(tileSource.mode).toBe(3);
     });
   });

src/config.js

@@ -1,9 +1,7 @@
 module.exports = {
   language: 'en',
 
-  // TODO: adapt to osm2vectortiles successor openmaptiles v3)
-  // mapscii.me hosts the last available version, 2016-06-20
-  source: 'http://mapscii.me/',
+  source: 'https://tiles.openfreemap.org/planet/map/',
 
   //source: __dirname+"/../mbtiles/regensburg.mbtiles",
 
@@ -33,19 +31,16 @@ module.exports = {
   labelMargin: 5,
 
   layers: {
-    housenum_label: {
+    housenumber: {
       margin: 4
     },
-    poi_label: {
+    poi: {
       cluster: true,
       margin: 5,
     },
-    place_label: {
+    place: {
       cluster: true,
-    },
-    state_label: {
-      cluster: true,
-    },
+    }
   },
 
   input: process.stdin,