Merge branch 'marker-units--casing'

README.md

@@ -90,9 +90,10 @@ The following values are possible for categories (the only mandatory value is qu
 * feature: an object describing how the feature will be formatted resp. styled.
   * style: a Leaflet style.
     * stroke: Whether to draw stroke along the path. Set it to false or empty string to disable borders on polygons or circles. (boolean, true)
-    * width: Stroke width in pixels (number, 3)
+    * width: Stroke width, optionally with unit ('px' for width in screen pixels (default) or 'm' for width in world meters). Default: '3px'.
     * color: Stroke color (string, '#3388ff')
     * opacity: Stroke opacity (number, 1.0)
+    * offset: Offset stroke to left or right ('px' for width in screen pixels (default) or 'm' for width in world meters). Default: '0px'.
     * lineCap: shape at end of the stroke (string, 'round')
     * lineJoin: shape at corners of the stroke (string, 'round')
     * dashArray: stroke dash pattern (string, null)
@@ -115,6 +116,7 @@ The following values are possible for categories (the only mandatory value is qu
     * pattern-angleCorrection: degrees (arrowHead and marker only)
     * pattern-rotate: false (marker only)
     * pattern-path-*: Options for the path, e.g. pattern-path-width, pattern-path-color.
+    * pane: show vector on the specified pane (usually defined: 'overlayPane' (default), 'hover', 'selected', 'casing')
   * title: the title of the feature popup, the object in the list and the details page. (default: localized tags for 'name', 'operator' or 'ref', default: 'unknown')
   * body: the body for the feature popup and the details page.
   * description: a short description shown in the list next to the title.

src/CategoryOverpass.js

@@ -433,7 +433,10 @@ CategoryOverpass.prototype.updateInfo = function () {
     'const': this.data.const
   }
   if (this.map) {
-    data.map = { zoom: map.getZoom() }
+    data.map = {
+      zoom: this.map.getZoom(),
+      metersPerPixel: this.map.getMetersPerPixel()
+    }
   }
   this.domInfo.innerHTML = this.templateInfo.render(data)
   this.updateAssets(this.domInfo)

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>')
 
@@ -58,6 +60,8 @@ window.onload = function () {
 
   map.createPane('selected')
   map.getPane('selected').style.zIndex = 498
+  map.createPane('casing')
+  map.getPane('casing').style.zIndex = 399
 }
 
 function onload2 (initState) {

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

src/markers.js

@@ -1,11 +1,12 @@
 var OverpassLayer = require('overpass-layer')
+var parseLength = require('overpass-layer/src/parseLength')
 
 function cssStyle (style) {
   let ret = ''
   if ('color' in style) {
     ret += 'stroke: ' + style.color + ';'
   }
-  ret += 'stroke-width: ' + ('width' in style ? style.width : '3') + ';'
+  ret += 'stroke-width: ' + parseLength('width' in style ? style.width : '3', global.map.getMetersPerPixel()) + ';'
   if ('dashArray' in style) {
     ret += 'stroke-dasharray: ' + style.dashArray + ';'
   }
@@ -15,9 +16,6 @@ function cssStyle (style) {
   if ('dashOffset' in style) {
     ret += 'stroke-dashoffset: ' + style.dashOffset + ';'
   }
-  if ('offset' in style) {
-    ret += 'stroke-offset: ' + style.dashOffset + ';'
-  }
   if ('fillColor' in style) {
     ret += 'fill: ' + style.fillColor + ';'
   } else if ('color' in style) {
@@ -40,7 +38,7 @@ function markerLine (data) {
   let ret = '<svg anchorX="13" anchorY="8" width="25" height="15">'
 
   styles.forEach(style => {
-    let y = 8.0 + parseFloat('offset' in style ? style.offset : 0)
+    let y = 8.0 + parseLength('offset' in style ? style.offset : 0, global.map.getMetersPerPixel())
 
     ret += '<line x1="0" y1="' + y + '" x2="25" y2="' + y + '" style="' + cssStyle(style) + '"/>'
   })