Merge branch 'markers-improve'

doc/Icons.md

@@ -48,3 +48,32 @@ You can pass URL options to the icon to modify its look. Note that every icon is
 <img data-src="temaki:shinto">
 <img data-src="temaki:shinto?fill=red">
 ```
+
+#### Markers
+Simple syntax (example: a black line):
+```html
+<img data-src="marker:line?width=3&amp;color=black">
+{{ markerLine({ width: 3, color: 'black' })|raw }}
+```
+
+The following marker types are available: line, polygon (a rectangle), circle, pointer
+
+The following style parameters are possible:
+* `color`: outline color, default `#000000`.
+* `width`: outline width, default `3`.
+* `offset`: outline offset, default `0`.
+* `fillColor`: color of the fill, default value of `color`. If no `color` is set, use `#f2756a`.
+* `fillOpacity`: opacity of the fill, default `0.2`.
+* `dashArray`: outline dashes, e.g. `5,5'. Default: `none`.
+* `dashOffset`: offset of outline dashes. Default: `0`.
+
+Syntax with multiple symbols (example: a white line with a black casing). Only styles which are listed in the `styles` parameter will be used. Instead of `style:default:width` use `style:width`:
+```html
+<img data-src="marker:line?styles=casing,default&amp;style:width=2&amp;style:color=white&amp;style:casing:width=4&amp;style:casing:color=black">
+{{ markerLine({ styles: 'casing,default', 'style:casing': { color: 'black', width: 4 }, default: { color: 'black', width: 2 }})|raw }}
+```
+
+You can use the `evaluate` function, to emulate a fake object (e.g. for map keys). The following example would draw a line, which looks like the symbol which is generated by this category for an OSM object with the tags highway=primary and maxspeed=80:
+```html
+{{ markerLine(evaluate({ "highway": "primary", "maxspeed": "80" }))|raw }}
+```

src/CategoryOverpass.js

@@ -218,6 +218,32 @@ CategoryOverpass.prototype.updateAssets = function (div) {
           }
         })
       }
+    } else if (src.match(/^(marker):.*/)) {
+      let m = src.match(/^(marker):([a-z0-9-_]*)(?:\?(.*))?$/)
+      if (m) {
+        let span = document.createElement('span')
+        img.parentNode.insertBefore(span, img)
+        img.parentNode.removeChild(img)
+        i--
+        let param = m[3] ? qs(m[3]) : {}
+
+        if (param.styles) {
+          let newParam = { styles: param.styles }
+          for (let k in param) {
+            let m = k.match(/^(style|style:.*)?:([^:]*)$/)
+            if (m) {
+              if (!(m[1] in newParam)) {
+                newParam[m[1]] = {}
+              }
+              newParam[m[1]][m[2]] = param[k]
+            }
+          }
+          param = newParam
+        }
+        console.log(param)
+
+        span.innerHTML = markers[m[2]](param)
+      }
     } else if (!src.match(/^(https?:|data:|\.|\/)/)) {
       img.setAttribute('src', (typeof openstreetbrowserPrefix === 'undefined' ? './' : openstreetbrowserPrefix) +
       'asset.php?repo=' + this.options.repositoryId + '&file=' + encodeURIComponent(img.getAttribute('data-src') || img.getAttribute('src')))

src/markers.js

@@ -1,7 +1,7 @@
 var OverpassLayer = require('overpass-layer')
 
 function cssStyle (style) {
-  var ret = ''
+  let ret = ''
   if ('color' in style) {
     ret += 'stroke: ' + style.color + ';'
   }
@@ -35,22 +35,15 @@ function cssStyle (style) {
 }
 
 function markerLine (data) {
-  var ret = '<svg anchorX="13" anchorY="8" width="25" height="15">'
+  let styles = parseOptions(data)
 
-  if (!('styles' in data)) {
-    data = {
-      style: data,
-      styles: [ 'default' ]
-    }
-  }
+  let ret = '<svg anchorX="13" anchorY="8" width="25" height="15">'
 
-  for (var i = 0; i < data.styles.length; i++) {
-    var k = data.styles[i]
-    var style = (k === 'default' ? data.style : data['style:' + k]) || {}
-    var y = 8.0 + parseFloat('offset' in style ? style.offset : 0)
+  styles.forEach(style => {
+    let y = 8.0 + parseFloat('offset' in style ? style.offset : 0)
 
     ret += '<line x1="0" y1="' + y + '" x2="25" y2="' + y + '" style="' + cssStyle(style) + '"/>'
-  }
+  })
 
   ret += '</svg>'
 
@@ -58,42 +51,81 @@ function markerLine (data) {
 }
 
 function markerPolygon (data) {
-  var ret = '<svg anchorX="13" anchorY="8" width="25" height="25">'
-
-  if (!('styles' in data)) {
-    data = {
-      style: data,
-      styles: [ 'default' ]
-    }
-  }
+  let ret = '<svg anchorX="13" anchorY="8" width="25" height="25">'
 
-  for (var i = 0; i < data.styles.length; i++) {
-    var k = data.styles[i]
-    var style = (k === 'default' ? data.style : data['style:' + k]) || {}
+  let styles = parseOptions(data)
 
+  styles.forEach(style => {
     ret += '<rect x="3" y="3" width="18" height="18" style="' + cssStyle(style) + '"/>'
-  }
+  })
+
+  ret += '</svg>'
+
+  return ret
+}
+
+function markerCircle (data) {
+  let styles = parseOptions(data)
+
+  let c = styles
+    .map(style => (style.size || style.radius || 12) + (style.width / 2))
+    .sort()[0]
+
+  let ret = '<svg anchorX="' + (c + 0.5) + ' anchorY="' + (c + 0.5) + '" width="' + (c * 2) + '" height="' + (c * 2) + '">'
+
+  styles.forEach(style => {
+    ret += '<circle cx="' + c + '" cy="' + c + '" r="' + (style.radius || 12) + '" style="' + cssStyle(style) + '"/>'
+  })
 
   ret += '</svg>'
 
   return ret
 }
 
-function markerCircle (style) {
-  var fillColor = 'fillColor' in style ? style.fillColor : '#f2756a'
-  var color = 'color' in style ? style.color : '#000000'
-  var width = 'width' in style ? style.width : 1
-  var radius = 'radius' in style ? style.radius : 12
+function markerPointer (data) {
+  let ret = '<svg anchorX="13" anchorY="45" width="25" height="45" signAnchorX="0" signAnchorY="-31">'
+
+  let styles = parseOptions(data)
+
+  styles.forEach(style => {
+    ret += '<path d="M0.5,12.5 A 12,12 0 0 1 24.5,12.5 C 24.5,23 13,30 12.5,44.5 C 12,30 0.5,23 0.5,12.5" style="' + cssStyle(style) + '"/>'
+  })
+
+  ret += '</svg>'
 
-  return '<svg anchorX="13" anchorY="13" width="25" height="25"><circle cx="12.5" cy="12.5" r=' + radius + ' style="stroke: ' + color + '; stroke-width: ' + width + '; fill: ' + fillColor + ';"/></svg>'
+  return ret
 }
 
-function markerPointer (style) {
-  var fillColor = 'fillColor' in style ? style.fillColor : '#f2756a'
-  var color = 'color' in style ? style.color : '#000000'
-  var width = 'width' in style ? style.width : 1
+function parseOptions (data) {
+  if (!data || !('style' in data) && !('styles' in data)) {
+    let ret = [
+      { fillColor: '#f2756a', color: '#000000', width: 1, radius: 12, fillOpacity: 1 },
+    ]
+
+    if (data && data.color) {
+      ret[0].fillColor = data.color
+      ret[0].fillOpacity = 0.2
+    }
+
+    if (data) for (let k in data) {
+      ret[0][k] = data[k]
+    }
+
+    return ret
+  }
+
+  if (!('styles' in data)) {
+    data = {
+      style: data,
+      styles: [ 'default' ]
+    }
+  }
+
+  if (typeof data.styles === 'string') {
+    data.styles = data.styles.split(/,/g)
+  }
 
-  return '<svg anchorX="13" anchorY="45" width="25" height="45" signAnchorX="0" signAnchorY="-31"><path d="M0.5,12.5 A 12,12 0 0 1 24.5,12.5 C 24.5,23 13,30 12.5,44.5 C 12,30 0.5,23 0.5,12.5" style="stroke: ' + color + '; stroke-width: ' + width + '; fill: ' + fillColor + ';"/></svg>'
+  return data.styles.map(k => (k === 'default' ? data.style : data['style:' + k]) || {})
 }
 
 OverpassLayer.twig.extendFunction('markerLine', markerLine)