Don't use blur filter for highlighted objects (makes everything slow)

frontend/app/map/lines/lines.js

@@ -91,7 +91,7 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout, $r
 				var style = {
 					color : '#'+line.colour,
 					weight : line.width,
-					opacity : 0.7
+					opacity : 0.5
 				};
 
 				// Two points that are both outside of the viewport should not be connected, as the piece in between
@@ -102,7 +102,9 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout, $r
 
 				if(line.id != null && openLine && line.id == openLine.id) {
 					openLineHighlight.setLatLngs(splitLatLngs).setStyle(Object.assign(style, {
-						color: '#000000'
+						weight: Math.round(line.width*2),
+						color: "#"+fmUtils.makeTextColour(line.colour),
+						opacity: 1
 					}));
 
 					if(!_doNotRerenderPopup)
@@ -169,7 +171,6 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout, $r
 					pane: "fmHighlightShadowPane",
 					interactive: false
 				}).addTo(map.map);
-				fmUtils.blurFilter(openLineHighlight, "fmLinesBlur", 4);
 
 				linesById[line.id].remove();
 				linesById[line.id].options.pane = "fmHighlightPane";

frontend/app/map/markers/markers.js

@@ -30,7 +30,9 @@ fm.app.factory("fmMapMarkers", function($uibModal, fmUtils, $compile, $timeout,
 		var markersUi = {
 			_addMarker : function(marker) {
 				if(!markersById[marker.id]) {
-					markersById[marker.id] = L.marker([ 0, 0 ], { icon: fmUtils.createMarkerIcon(marker.colour, marker.size, marker.symbol)}).addTo(map.markerCluster)
+					markersById[marker.id] = L.marker([ 0, 0 ], {
+						icon: fmUtils.createMarkerIcon(marker.colour, marker.size, marker.symbol)
+					}).addTo(map.markerCluster)
 						.on("click", function(e) {
 							markersUi.showMarkerInfoBox(map.client.markers[marker.id] || marker);
 						}.fmWrapApply($rootScope))
@@ -42,7 +44,8 @@ fm.app.factory("fmMapMarkers", function($uibModal, fmUtils, $compile, $timeout,
 
 				markersById[marker.id]
 					.setLatLng([ marker.lat, marker.lon ])
-					.setIcon(fmUtils.createMarkerIcon(marker.colour, marker.size, marker.symbol, null, openMarker && openMarker.id == marker.id));
+					.setIcon(fmUtils.createMarkerIcon(marker.colour, marker.size, marker.symbol, null, openMarker && openMarker.id == marker.id))
+					.setOpacity(0.7);
 
 				if(openMarker && openMarker.id == marker.id)
 					markersUi.showMarkerInfoBox(marker);
@@ -90,6 +93,7 @@ fm.app.factory("fmMapMarkers", function($uibModal, fmUtils, $compile, $timeout,
 							markersById[marker.id].remove();
 							markersById[marker.id].options.pane = "markerPane";
 							markersById[marker.id].setIcon(fmUtils.createMarkerIcon(marker.colour, marker.size, marker.symbol));
+							markersById[marker.id].setOpacity(0.7);
 							markersById[marker.id].addTo(map.map);
 						}
 					}).hide,
@@ -99,6 +103,7 @@ fm.app.factory("fmMapMarkers", function($uibModal, fmUtils, $compile, $timeout,
 				markersById[marker.id].remove();
 				markersById[marker.id].options.pane = "fmHighlightMarkerPane";
 				markersById[marker.id].setIcon(fmUtils.createMarkerIcon(marker.colour, marker.size, marker.symbol, null, true));
+				markersById[marker.id].setOpacity(1);
 				markersById[marker.id].addTo(map.map);
 			},
 			editMarker: function(marker) {

frontend/app/utils/marker-graphic.ejs

@@ -1,25 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="<%=width + padding*2%>" height="<%=height + padding*2%>" version="1.1">
-<%
-	if(highlight) {
-%>
-	<defs>
-        <filter id="b">
-            <feGaussianBlur stdDeviation="2.5 2.5" result="blur" />
-        </filter>
-	</defs>
-<%
-	}
-%>
 	<g transform="translate(<%=padding%> <%=padding%>) scale(<%=width / 23%> <%=height / 31%>)">
-<%
-	if(highlight) {
-%>
-		<path style="fill:#<%=borderColour%>;filter:url(#b)" d="M11.5-4.179c-9.907 0-15.568 5.661-15.568 15.568S9.996 38.279 11.5 38.279c1.504 0 15.568-16.983 15.568-26.89S21.407-4.179 11.5-4.179z"/>
-<%
-	}
-%>
-		<path style="stroke:#<%=borderColour%>;stroke-linecap:round;fill:#<%=colour%>" d="m11.5 0.5c-7 0-11 4-11 11s9.9375 19 11 19 11-12 11-19-4-11-11-11z"/>
+		<path style="stroke:#<%=borderColour%>;<% if(highlight){ %>stroke-width:3;<% } %>stroke-linecap:round;fill:#<%=colour%>" d="m11.5 0.5c-7 0-11 4-11 11s9.9375 19 11 19 11-12 11-19-4-11-11-11z"/>
 <%
 	if(symbol && fmIcons[symbol]) {
 %>

frontend/app/utils/utils.js

@@ -75,39 +75,6 @@ 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;