🔳 accurate calculation of current viewport bbox

main.js

@@ -17,7 +17,7 @@ const Tile = require(__dirname+'/src/Tile')
 termap = new Termap();
 
 // TODO: abstracing this class, create loader class
-data = fs.readFileSync(__dirname+"/tiles/regensburg.pbf.gz");
+data = fs.readFileSync(__dirname+"/tiles/germany.pbf.gz");
 tile = new Tile(data);
 termap.renderer.features = tile.layers
 termap._draw();

src/Renderer.coffee

@@ -93,7 +93,7 @@ module.exports = class Renderer
     @canvas.reset()
 
     @canvas.translate @view[0], @view[1]
-    @_drawLayers()
+    @_renderLayers()
 
     unless @lastDrawAt
       @_clearScreen()
@@ -113,7 +113,7 @@ module.exports = class Renderer
   _write: (output) ->
     @output.write output
 
-  _drawLayers: ->
+  _renderLayers: ->
     for layer in @config.drawOrder
       if layer.indexOf(':') isnt -1
         [layer, filter] = layer.split /:/

src/Termap.coffee

@@ -31,8 +31,10 @@ module.exports = class Termap
 
   degree: 0
   center:
-    lat: 0
+    #lat: 49.0189
-    lon: 0
+    #lon: 12.0990
+    lat: 0 #26.7
+    lon: 0 #20.2
 
   zoom: 0
   view: [0, 0]
@@ -149,12 +151,14 @@ module.exports = class Termap
   _getTiles: ->
 
   _getBBox: ->
-    [x, y] = mercator.ll [@center.lng, @center.lat]
+    [x, y] = utils.ll2xy @center.lon, @center.lat
-    width = @width * Math.pow(2, @zoom)
+    meterPerPixel = utils.metersPerPixel @zoom, @center.lat
-    height = @height * Math.pow(2, @zoom)
+
-    zoom = 18-@zoom
+    width = @width * meterPerPixel * .5
-    [width, height, zoom]
+    height = @height * meterPerPixel * .5
-    #mercator.inverse([x - width/2, y + width/2]).concat mercator.inverse([x + width/2, y - width/2])
+
+    mercator.inverse([x - width, y + height]).concat mercator.inverse([x + width, y - height])
+
 
   _getFooter: ->
     # features = @renderer.featuresAt @mousePosition.x-1-(@view[0]>>1), @mousePosition.y-1-(@view[1]>>2)
@@ -166,8 +170,8 @@ module.exports = class Termap
     # ).join(", ")+"] "+
     # "#{@mousePosition.x} #{@mousePosition.y}"
     #"center: [#{utils.digits @center.lat, 2}, #{utils.digits @center.lng, 2}]}"
-    "zoom: #{utils.digits @zoom, 2} "
+    "zoom: #{utils.digits @zoom, 2} "+
-    #"bbox: [#{@_getBBox().map((z) -> utils.digits(z, 2)).join(', ')}]"
+    "bbox: [#{@_getBBox().map((z) -> utils.digits(z, 2)).join(', ')}]"
 
     #features.map((f) -> JSON.stringify f.feature.properties).join(" - ")
 

src/utils.coffee

@@ -5,6 +5,9 @@
   methods used all around
 ###
 
+constants =
+  RADIUS: 6378137
+
 utils =
   clamp: (num, min, max) ->
     if num <= min then min else if num >= max then max else num
@@ -21,6 +24,25 @@ utils =
       j = i
     inside
 
+  ll2xy: (lon, lat) ->
+    [
+      utils.deg2rad(lon)*constants.RADIUS,
+      Math.log(Math.tan(Math.PI/4 + utils.deg2rad(lat)/2)) * constants.RADIUS
+    ]
+
+  ll2tile: (lon, lat, zoom) ->
+    x: Math.floor (lon+180)/360*Math.pow(2, zoom)
+    y: Math.floor (1-Math.log(Math.tan(lat*Math.PI/180)+1/Math.cos(lat*Math.PI/180))/Math.PI)/2*Math.pow(2, zoom)
+
+  tile2ll: (x, y, zoom) ->
+    n = Math.PI - 2*Math.PI*y/Math.pow(2, zoom)
+
+    lon: x/Math.pow(2, zoom)*360-180
+    lat: 180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n)))
+
+  metersPerPixel: (zoom, lat = 0) ->
+    (Math.cos(lat * Math.PI/180) * 2 * Math.PI * constants.RADIUS) / (256 * Math.pow(2, zoom))
+
   deg2rad: (angle) ->
     # (angle / 180) * Math.PI
     angle * 0.017453292519943295
@@ -45,7 +67,4 @@ utils =
   digits: (number, digits) ->
     Math.floor(number*Math.pow(10, digits))/Math.pow(10, digits)
 
-  metersPerPixel: (zoom, lat = 0) ->
-    utils.rad2deg(40075017*Math.cos(utils.deg2rad(lat))/Math.pow(2, zoom+8))
-
 module.exports = utils

styles/bright.json

@@ -1,5 +1,14 @@
 {
   "name": "Bright",
+  "constants": {
+    "@water": "#55c",
+    "@country_label_1": "#ff0",
+    "@country_label_2": "#ff0",
+    "@country_label_3": "#ff0",
+    "@country_label_4": "#ff0",
+    "@admin_level_2": "#f00",
+    "@admin_level_3": "#ccf"
+  },
   "layers": [
     {
       "type": "background",
@@ -183,7 +192,7 @@
       "type": "fill",
       "id": "water",
       "paint": {
-        "fill-color": "#303090"
+        "fill-color": "@water"
       },
       "source-layer": "water"
     },
@@ -1418,7 +1427,7 @@
       "type": "line",
       "id": "admin_level_3",
       "paint": {
-        "line-color": "#9e9cab",
+        "line-color": "@admin_level_3",
         "line-width": {
           "base": 1,
           "stops": [
@@ -1456,7 +1465,7 @@
       "type": "line",
       "id": "admin_level_2",
       "paint": {
-        "line-color": "#9e9cab",
+        "line-color": "@admin_level_2",
         "line-width": {
           "base": 1,
           "stops": [
@@ -2205,7 +2214,7 @@
       "type": "symbol",
       "id": "country_label_4",
       "paint": {
-        "text-color": "#334"
+        "text-color": "@country_label_4"
       },
       "source-layer": "country_label",
       "filter": [
@@ -2232,7 +2241,7 @@
       "type": "symbol",
       "id": "country_label_3",
       "paint": {
-        "text-color": "#334"
+        "text-color": "@country_label_3"
       },
       "source-layer": "country_label",
       "filter": [
@@ -2259,7 +2268,7 @@
       "type": "symbol",
       "id": "country_label_2",
       "paint": {
-        "text-color": "#334"
+        "text-color": "@country_label_2"
       },
       "source-layer": "country_label",
       "filter": [
@@ -2286,7 +2295,7 @@
       "type": "symbol",
       "id": "country_label_1",
       "paint": {
-        "text-color": "#334"
+        "text-color": "@country_label_1"
       },
       "source-layer": "country_label",
       "filter": [