Markers: Add new 'marker' data-src images

doc/Icons.md

@@ -52,6 +52,7 @@ You can pass URL options to the icon to modify its look. Note that every icon is
 #### Markers
 Simple syntax (example: a black line):
 ```html
+<img data-src="marker:line?width=3&amp;color=black">
 {{ markerLine({ width: 3, color: 'black' })|raw }}
 ```
 
@@ -66,8 +67,9 @@ The following style parameters are possible:
 * `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:
+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 }}
 ```
 

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')))