diff --git a/frontend/app/map/lines/lines.js b/frontend/app/map/lines/lines.js index c5c0e6ab..56392d9b 100644 --- a/frontend/app/map/lines/lines.js +++ b/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 diff --git a/frontend/app/utils/utils.js b/frontend/app/utils/utils.js index a13384de..4ccdadf0 100644 --- a/frontend/app/utils/utils.js +++ b/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;