Info: allow showing markers

src/index.js

@@ -25,6 +25,7 @@ require('./overpassChooser')
 require('./fullscreen')
 require('./mapLayers')
 require('./twigFunctions')
+require('./markers')
 require('./categories')
 require('./wikipedia')
 require('./image')

src/markers.js

@@ -0,0 +1,27 @@
+var OverpassLayer = require('overpass-layer')
+
+function markerPointer (style) {
+  var fill = 'fillColor' in style ? style.fillColor : '#f2756a'
+  var strokeWidth = 'weight' in style ? style.weight : 1
+  var strokeColor = 'border' in style ? style.border : '#000000'
+
+  return '<svg width="25" height="45"><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: ' + strokeColor + '; stroke-width: ' + strokeWidth + '; fill: ' + fill + ';"/></svg>'
+}
+
+OverpassLayer.twig.extendFunction('markerLine', function (style) {
+  return '<svg width="25" height="15"><line x1="0" y1="8" x2="25" y2="8" style="stroke: ' + style.color + '; stroke-width: ' + style.weight + '"/></svg>'
+})
+OverpassLayer.twig.extendFunction('markerCircle', function (style) {
+  var fill = 'fillColor' in style ? style.fillColor : '#f2756a'
+  var strokeWidth = 'weight' in style ? style.weight : 1
+  var strokeColor = 'border' in style ? style.border : '#000000'
+
+  return '<svg width="25" height="25"><circle cx="12.5" cy="12.5" r="12" style="stroke: ' + strokeColor + '; stroke-width: ' + strokeWidth + '; fill: ' + fill + ';"/></svg>'
+})
+OverpassLayer.twig.extendFunction('markerPointer', function (style) {
+  var fill = 'fillColor' in style ? style.fillColor : '#f2756a'
+  var strokeWidth = 'weight' in style ? style.weight : 1
+  var strokeColor = 'border' in style ? style.border : '#000000'
+
+  return '<svg width="25" height="45"><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: ' + strokeColor + '; stroke-width: ' + strokeWidth + '; fill: ' + fill + ';"/></svg>'
+}

style.css

@@ -222,6 +222,11 @@ ul.overpass-layer-list > li > .markerParent {
 }
 ul.overpass-layer-list > li > .markerParent > .marker {
 }
+.info > table > tr > td:first-of-type,
+.info > table > tbody > tr > td:first-of-type {
+  position: relative;
+}
+.info .sign,
 ul.overpass-layer-list > li > .markerParent > .icon {
   text-align: center;
   position: absolute;