Define a map.getMetersPerPixel() function

src/CategoryOverpass.js

@@ -435,7 +435,7 @@ CategoryOverpass.prototype.updateInfo = function () {
   if (this.map) {
     data.map = {
       zoom: this.map.getZoom(),
-      metersPerPixel: 40075016.686 * Math.abs(Math.cos(this.map.getCenter().lat / 180 * Math.PI)) / Math.pow(2, this.map.getZoom() + 8)
+      metersPerPixel: this.map.getMetersPerPixel()
     }
   }
   this.domInfo.innerHTML = this.templateInfo.render(data)

src/index.js

@@ -11,6 +11,7 @@ global.OpenStreetBrowserLoader = OpenStreetBrowserLoader
 require('./CategoryIndex')
 require('./CategoryOverpass')
 require('./category.css')
+const mapMetersPerPixel = require('./map-getMetersPerPixel')
 
 global.map = null
 global.baseCategory = null
@@ -43,6 +44,7 @@ window.onload = function () {
   var initState = config.defaultView
 
   map = L.map('map')
+  map.getMetersPerPixel = mapMetersPerPixel.bind(map)
 
   map.attributionControl.setPrefix('<a target="_blank" href="https://wiki.openstreetmap.org/wiki/OpenStreetBrowser">OpenStreetBrowser</a>')
 

src/map-getMetersPerPixel.js

@@ -0,0 +1,5 @@
+function getMetersPerPixel () {
+  return 40075016.686 * Math.abs(Math.cos(this.getCenter().lat / 180 * Math.PI)) / Math.pow(2, this.getZoom() + 8)
+}
+
+module.exports = getMetersPerPixel