markers: adapt all markers to be able to show multiple styles + documentation

doc/Icons.md

@@ -48,3 +48,30 @@ 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
+{{ 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:
+```html
+{{ 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/markers.js

@@ -37,12 +37,7 @@ function cssStyle (style) {
 function markerLine (data) {
   var ret = '<svg anchorX="13" anchorY="8" width="25" height="15">'
 
-  if (!('styles' in data)) {
-    data = {
-      style: data,
-      styles: [ 'default' ]
-    }
-  }
+  data = parseOptions(data)
 
   for (var i = 0; i < data.styles.length; i++) {
     var k = data.styles[i]
@@ -60,12 +55,7 @@ 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' ]
-    }
-  }
+  data = parseOptions(data)
 
   for (var i = 0; i < data.styles.length; i++) {
     var k = data.styles[i]
@@ -79,21 +69,72 @@ function markerPolygon (data) {
   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 markerCircle (data) {
+  var ret = '<svg anchorX="13" anchorY="13" width="25" height="25">'
+
+  data = parseOptions(data)
+
+  for (var i = 0; i < data.styles.length; i++) {
+    var k = data.styles[i]
+    var style = (k === 'default' ? data.style : data['style:' + k]) || {}
+
+    ret += '<circle cx="12.5" cy="12.5" r="' + (style.radius || 12) + '" style="' + cssStyle(style) + '"/>'
+  }
+
+  ret += '</svg>'
+  console.log(ret)
+
+  return ret
+}
+
+function markerPointer (data) {
+  var ret = '<svg anchorX="13" anchorY="45" width="25" height="45" signAnchorX="0" signAnchorY="-31">'
+
+  data = parseOptions(data)
 
-  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>'
+  for (var i = 0; i < data.styles.length; i++) {
+    var k = data.styles[i]
+    var style = (k === 'default' ? data.style : data['style:' + k]) || {}
+
+    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 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 = {
+      style: { fillColor: '#f2756a', color: '#000000', width: 1, radius: 12, fillOpacity: 1 },
+      styles: [ 'default' ]
+    }
+
+    if (data && data.color) {
+      ret.style.fillColor = data.color
+      ret.style.fillOpacity = 0.2
+    }
+
+    if (data) for (let k in data) {
+      ret.style[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
 }
 
 OverpassLayer.twig.extendFunction('markerLine', markerLine)