markers: more readable code by using functional programming

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,17 +35,15 @@ function cssStyle (style) {
 }
 
 function markerLine (data) {
-  var ret = '<svg anchorX="13" anchorY="8" width="25" height="15">'
+  let ret = '<svg anchorX="13" anchorY="8" width="25" height="15">'
 
-  data = parseOptions(data)
+  let styles = 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]) || {}
-    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>'
 
@@ -53,16 +51,13 @@ function markerLine (data) {
 }
 
 function markerPolygon (data) {
-  var ret = '<svg anchorX="13" anchorY="8" width="25" height="25">'
-
-  data = parseOptions(data)
+  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>'
 
@@ -70,34 +65,27 @@ function markerPolygon (data) {
 }
 
 function markerCircle (data) {
-  var ret = '<svg anchorX="13" anchorY="13" width="25" height="25">'
+  let 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]) || {}
+  let styles = parseOptions(data)
 
+  styles.forEach(style => {
     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">'
+  let ret = '<svg anchorX="13" anchorY="45" width="25" height="45" signAnchorX="0" signAnchorY="-31">'
 
-  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]) || {}
+  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>'
 
@@ -106,18 +94,17 @@ function markerPointer (data) {
 
 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' ]
-    }
+    let ret = [
+      { fillColor: '#f2756a', color: '#000000', width: 1, radius: 12, fillOpacity: 1 },
+    ]
 
     if (data && data.color) {
-      ret.style.fillColor = data.color
-      ret.style.fillOpacity = 0.2
+      ret[0].fillColor = data.color
+      ret[0].fillOpacity = 0.2
     }
 
     if (data) for (let k in data) {
-      ret.style[k] = data[k]
+      ret[0][k] = data[k]
     }
 
     return ret
@@ -134,7 +121,7 @@ function parseOptions (data) {
     data.styles = data.styles.split(/,/g)
   }
 
-  return data
+  return data.styles.map(k => (k === 'default' ? data.style : data['style:' + k]) || {})
 }
 
 OverpassLayer.twig.extendFunction('markerLine', markerLine)