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 }