Move blur filter into a utils function

frontend/app/map/lines/lines.js

@@ -13,26 +13,12 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout, $r
 
 		let openLine = null;
 		let openLineHighlight = null;
-		let openElevationPlot = null;
 
 		let linePopupBaseScope = $rootScope.$new();
 		linePopupBaseScope.persistentSettings = {};
 		linePopupBaseScope.client = map.client;
 		linePopupBaseScope.className = css.className;
 
-		setTimeout(() => {
-			// Make sure that the renderer is added to the map
-			L.polyline([], {pane: "shadowPane"}).addTo(map.map).remove();
-
-			// http://stackoverflow.com/a/28237435/242365
-			let blurFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
-			blurFilter.setAttribute("id", "fmLinesBlur");
-			let blurFilterBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
-			blurFilterBlur.setAttribute("stdDeviation", "4");
-			blurFilter.appendChild(blurFilterBlur);
-			$(map.map.getPane("shadowPane")).find("> svg").append(blurFilter);
-		}, 0);
-
 		map.client.on("line", function(data) {
 			setTimeout(function() { // trackPoints needs to be copied over
 				if(map.client.filterFunc(map.client.lines[data.id]))
@@ -168,7 +154,7 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout, $r
 					pane: "shadowPane",
 					interactive: false
 				}).addTo(map.map);
-				openLineHighlight._path.style.filter = 'url(#fmLinesBlur)';
+				fmUtils.blurFilter(openLineHighlight, "fmLinesBlur", 4);
 
 				linesUi._addLine(line, true); // To render the openLineHighlight
 

frontend/app/utils/utils.js

@@ -75,6 +75,39 @@ fm.app.factory("fmUtils", function($parse, fmIcons) {
 		});
 	};
 
+	fmUtils.blurFilter = function(layer, filterId, stdDeviation) {
+		if(layer instanceof L.LayerGroup) {
+			layer.eachLayer((layer) => {
+				if(layer instanceof L.Path || layer instanceof L.LayerGroup)
+					fmUtils.blurFilter(layer, filterId, stdDeviation);
+			});
+			return;
+		}
+
+		if(!layer._map) {
+			layer.once("add", () => {
+				fmUtils.blurFilter(layer, filterId, stdDeviation);
+			});
+			return;
+		}
+
+		let svg = $(layer.getPane()).find("> svg");
+		if(svg.length == 0)
+			throw new Error(`SVG for pane ${layer.getPane()} could not be found.`);
+
+		if(svg.find("filter").filter(function() { return $(this).attr("id") == filterId; }).length == 0) {
+			// http://stackoverflow.com/a/28237435/242365
+			let blurFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
+			blurFilter.setAttribute("id", filterId);
+			let blurFilterBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
+			blurFilterBlur.setAttribute("stdDeviation", stdDeviation);
+			blurFilter.appendChild(blurFilterBlur);
+			svg.append(blurFilter);
+		}
+
+		layer._path.style.filter = `url(#${filterId})`;
+	};
+
 	fmUtils.makeTextColour = function(backgroundColour, threshold) {
 		if(threshold == null)
 			threshold = 0.5;