diff --git a/static/js/visualization.js b/static/js/visualization.js
index 94c8d2a..32ce025 100644
--- a/static/js/visualization.js
+++ b/static/js/visualization.js
@@ -1,5 +1,8 @@
'use strict';
import $ from 'jquery'
+
+import './lib/oms.min'
+
import filter from './filter'
import colorUtils from './colors'
@@ -17,6 +20,20 @@ class Visualization {
this.data = data
this.colors = colors
+ // set up OMS
+ this.oms = new OverlappingMarkerSpiderfier(map, {
+ keepSpiderfied: true,
+ circleSpiralSwitchover: 12,
+ })
+
+ var popup = new L.Popup();
+ this.oms.addListener('click', function (marker) {
+ popup.setContent(marker.description.replace(/\n/g, '
'))
+ popup.setLatLng(marker.getLatLng())
+ map.openPopup(popup)
+ })
+
+ // set up markers
this._markers = new Map()
this.setupMarkers()
}
@@ -123,16 +140,19 @@ class Visualization {
var marker = L.marker([incident.lat, incident.lng], options)
.addTo(this.map)
+ marker.description = incident.description
+
var color = colorUtils.hexToRGB(this._pickColor(incident))
$(marker._icon).css({
borderColor: `rgba(${color[0]},${color[1]},${color[2]},.5)`,
backgroundColor: `rgba(${color[0]},${color[1]},${color[2]},.2)`
})
+ this.oms.addMarker(marker)
this._markers.set(incident, marker)
})
- return this;
+ return this
}
/**
@@ -146,12 +166,13 @@ class Visualization {
incidents = this.data
for (var [incident, marker] of this._markers)
- if (incidents.indexOf(incident) == -1)
+ if (incidents.indexOf(incident) == -1) {
this.map.removeLayer(marker)
- else
- marker
- .addTo(this.map)
- .bindPopup(incident.description.replace(/\n/g, '
'))
+ this.oms.removeMarker(marker)
+ } else {
+ this.map.addLayer(marker)
+ this.oms.addMarker(marker)
+ }
return this
}