Add more information to popup windows

static/js/popup.js

@@ -0,0 +1,27 @@
+export default function template(incident) {
+  var html = ''
+  var monthMap = {
+    '01': 'Januar',
+    '02': 'Februar',
+    '03': 'März',
+    '04': 'April',
+    '05': 'Mai',
+    '06': 'Juni',
+    '07': 'Juli',
+    '08': 'August',
+    '09': 'September',
+    '10': 'Oktober',
+    '11': 'November',
+    '12': 'Dezember',
+  }
+
+  var dateComponents = incident.date.split('-')
+  var date = dateComponents[2] + '. ' + monthMap[dateComponents[1]] + ' ' + dateComponents[0]
+
+  html += '<div data-id="' + incident.id + '">'
+  html += '<h3 class="date">' + date + '</h3>'
+  html += '<p>' + incident.description.replace(/\n/g, '<br>') + '</p>'
+  html += '</div>'
+
+  return html
+}

static/js/visualization.js

@@ -5,6 +5,7 @@ import './lib/oms.min'
 
 import filter from './filter'
 import colorUtils from './colors'
+import template from './popup'
 
 class Visualization {
 
@@ -28,7 +29,7 @@ class Visualization {
 
     this.oms.legColors = {
       usual: 'rgba(0,0,0,.2)',
-      highlighted: 'rgba(0,0,0,.5)'
+      highlighted: 'rgba(0,0,0,.6)'
     }
 
     var popup = new L.Popup({
@@ -40,7 +41,7 @@ class Visualization {
       if (map.getZoom() < 10)
         map.setZoom(9)
 
-      popup.setContent(marker.description.replace(/\n/g, '<br>'))
+      popup.setContent(template(marker.incident))
       popup.setLatLng(marker.getLatLng())
       map.openPopup(popup)
     })
@@ -165,7 +166,7 @@ class Visualization {
       var marker = L.marker([incident.lat, incident.lng], options)
         .addTo(this.map)
 
-      marker.description = incident.description
+      marker.incident = incident
 
       var color = colorUtils.hexToRGB(this._pickColor(incident))
       $(marker._icon).css({