From 852d4449850b6f724a5e105e0442f7962aa53503 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= <skunk@xover.mud.at>
Date: Tue, 17 Oct 2017 14:50:34 +0200
Subject: [PATCH] Info: allow showing markers

---
 src/index.js   |  1 +
 src/markers.js | 27 +++++++++++++++++++++++++++
 style.css      |  5 +++++
 3 files changed, 33 insertions(+)
 create mode 100644 src/markers.js

diff --git a/src/index.js b/src/index.js
index b05ae984..48f6eec9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -25,6 +25,7 @@ require('./overpassChooser')
 require('./fullscreen')
 require('./mapLayers')
 require('./twigFunctions')
+require('./markers')
 require('./categories')
 require('./wikipedia')
 require('./image')
diff --git a/src/markers.js b/src/markers.js
new file mode 100644
index 00000000..25d4f856
--- /dev/null
+++ b/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>'
+}
diff --git a/style.css b/style.css
index ba5ade3d..fb046562 100644
--- a/style.css
+++ b/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;