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