diff --git a/static/js/visualization.js b/static/js/visualization.js index 6f56256..a2b5d5c 100644 --- a/static/js/visualization.js +++ b/static/js/visualization.js @@ -17,7 +17,8 @@ class Visualization { this.data = data this.colors = colors - this._markers = [] + this._markers = new Map() + this.setupMarkers() } /** @@ -105,6 +106,24 @@ class Visualization { return this } + /** + * Sets up all markers for the first time so afterwards they only need to be + * faded in and out + * @return {Visualization} + * @chainable + */ + setupMarkers () { + this.data.forEach(incident => { + var options = { color: this._pickColor(incident) } + var marker = L.circleMarker([incident.lat, incident.lng], options) + .addTo(this.map) + + this._markers.set(incident, marker) + }) + + return this; + } + /** * Clear the map and render new markers * @param {Array[Object]} incidents The incidents to be shown @@ -115,25 +134,17 @@ class Visualization { if (incidents == null) incidents = this.data - this._markers.forEach(marker => { this.map.removeLayer(marker) }) - this._markers = incidents.map(incident => { - return this._createMarker(incident).bindPopup(incident.description.replace(/\n/g, '
')) - }) + for (var [incident, marker] of this._markers) + if (incidents.indexOf(incident) == -1) + this.map.removeLayer(marker) + else + marker + .addTo(this.map) + .bindPopup(incident.description.replace(/\n/g, '
')) return this } - /** - * Creates the correct marker for a single incident and adds it to the map - * @param {Object} data A single incident - * @return {L.CircleMarker} - */ - _createMarker (data) { - var options = { color: this._pickColor(data) } - var marker = L.circleMarker([data.lat, data.lng], options).addTo(this.map) - return marker - } - /** * Picks a color for a given incident based on its categories * @param {Object} incident A single incident