From 9c7c9795d9f16d3f1b516ff993bbc54abe91aed7 Mon Sep 17 00:00:00 2001 From: gcdev373 Date: Fri, 27 Aug 2021 16:31:16 +0100 Subject: [PATCH] Fix gh-44 and gh-45 markers not refreshing correctly --- CHANGELOG.md | 2 + war/vis/FloorMap.js | 130 +++++++++++++++++++++++++------------------- 2 files changed, 77 insertions(+), 55 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8371243..dca8af1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased] +* Fix gh-44 FloorMap - Apply changed marker settings without having to save. +* Fix gh-45 FloorMap - Update markers when dashboard filters are applied. * Fix gh-43 FloorMap - Save zones only works once. diff --git a/war/vis/FloorMap.js b/war/vis/FloorMap.js index ae1c12d..8e7ebd8 100644 --- a/war/vis/FloorMap.js +++ b/war/vis/FloorMap.js @@ -295,8 +295,16 @@ function floormapBaseLayerChanged (vis, gridName, e) { allFloorMapMaps[gridName].removeLayer(vis.zoneLayers[zonesForLevel]); } } + for (markersForLevel in vis.markerLayers) { + if (allFloorMapMaps[gridName].hasLayer(vis.markerLayers[markersForLevel])) { + // < Awesome here, could store the active layer + allFloorMapMaps[gridName].removeLayer(vis.markerLayers[markersForLevel]); + } + } } + allFloorMapMaps[gridName].addLayer(vis.markerLayers[myLayerId]); + if (zoneDictionaryUuid) { if (differentFloor) { allFloorMapMaps[gridName].addLayer(vis.zoneLayers[myLayerId]); @@ -452,7 +460,7 @@ function floormapBaseLayerChanged (vis, gridName, e) { this.element.style.gridTemplateColumns = "auto"; this.element.style.gridGap = "5px 5px"; - this.markers = {}; + this.markerLayers = {};//1 layer per floor per map this.layerControls = {};//1 control per map this.drawControls = {}; // 1 control per map this.currentLayer = {}; //1 layer name per map @@ -600,6 +608,12 @@ function floormapBaseLayerChanged (vis, gridName, e) { } if (data && data !== null) { + //Clear all marker layers associated with this map + for (markerLayerId in this.markerLayers) { + if (markerLayerId.startsWith(gridName)){ + this.markerLayers[markerLayerId].clearLayers(); + } + } const seriesArray = data.values; const vis = this; //Allow this to be accessed within closures @@ -772,9 +786,13 @@ function floormapBaseLayerChanged (vis, gridName, e) { } //Create the zone layer (actually not needed if no zone resource defined) - if (!this.zoneLayers[layerId] ) { + if (!this.zoneLayers[layerId]) { this.zoneLayers[layerId] = new L.FeatureGroup(); } + + if (!this.markerLayers[layerId]) { + this.markerLayers[layerId] = L.layerGroup(); + } //Load any zone data and create associated zone polygons this.initialiseZonesForLayer(gridName, campusId, buildingId, floorId, layerId); @@ -784,70 +802,65 @@ function floormapBaseLayerChanged (vis, gridName, e) { } const dataKey = this.createDataKey(val); - if (!this.markers[gridName]) { - this.markers[gridName] = new Map(); - } + + - if (!this.markers[gridName].has(dataKey)) { - var marker; - const x = parseFloat(val[floormapIndexX]); - const y = parseFloat(val[floormapIndexY]); + + var marker; + const x = parseFloat(val[floormapIndexX]); + const y = parseFloat(val[floormapIndexY]); - var colour = undefined; - if (val.length > floormapIndexSeries && val[floormapIndexSeries]) { - colour = color(val[floormapIndexSeries]); - } + var colour = undefined; + if (val.length > floormapIndexSeries && val[floormapIndexSeries]) { + colour = color(val[floormapIndexSeries]); + } - if (val.length > floormapIndexIcon && val[floormapIndexIcon]) { - const iconName = val[floormapIndexIcon]; + if (val.length > floormapIndexIcon && val[floormapIndexIcon]) { + const iconName = val[floormapIndexIcon]; - if (!colour) { - colour = color(iconName); - } - var markerHtml = "
"; - - var markerIcon = L.divIcon({ - className: 'custom-div-icon', - html: markerHtml, - iconSize: [30, 42], - iconAnchor: [15, 42] - }); + if (!colour) { + colour = color(iconName); + } + var markerHtml = "
"; + + var markerIcon = L.divIcon({ + className: 'custom-div-icon', + html: markerHtml, + iconSize: [30, 42], + iconAnchor: [15, 42] + }); - //Position is y,x deriving from latlon - marker = L.marker([y,x], { icon: markerIcon }); + //Position is y,x deriving from latlon + marker = L.marker([y,x], { icon: markerIcon }); - } else { - //Use small circles rather than icons - if (!colour) { - colour = "red"; - } - - //Position is y,x deriving from latlon - marker = L.circleMarker([y,x], {radius: 5, - stroke: false, - fillOpacity: 1.0, - color: colour, fill: true}); + } else { + //Use small circles rather than icons + if (!colour) { + colour = "red"; } - //Add popup details - if (val.length > floormapIndexName && val[floormapIndexName]) { - var popupHeading = "Information"; - if (val.length > floormapIndexSeries && val[floormapIndexSeries]) { - popupHeading = val[floormapIndexSeries]; - } - - const popupDetail = val[floormapIndexName]; + //Position is y,x deriving from latlon + marker = L.circleMarker([y,x], {radius: 5, + stroke: false, + fillOpacity: 1.0, + color: colour, fill: true}); + } - marker.bindPopup('

' + popupHeading + '
' + popupDetail + '

'); + //Add popup details + if (val.length > floormapIndexName && val[floormapIndexName]) { + var popupHeading = "Information"; + if (val.length > floormapIndexSeries && val[floormapIndexSeries]) { + popupHeading = val[floormapIndexSeries]; } - this.layers[layerId].addLayer(marker); - this.markers[gridName].set(dataKey, marker); - } else { - // console.log("Not updating marker " + val[1] + ":" + val[2]); + const popupDetail = val[floormapIndexName]; + + marker.bindPopup('

' + popupHeading + '
' + popupDetail + '

'); } + this.markerLayers[layerId].addLayer(marker); + } } @@ -874,7 +887,7 @@ function floormapBaseLayerChanged (vis, gridName, e) { //Remove the resources associated with this grid that are not now needed delete allFloorMapMaps[elemToRemoveId]; - delete this.markers[elemToRemoveId]; + delete this.layerControls[elemToRemoveId]; delete this.currentLayer[elemToRemoveId]; delete this.zonesInitialisedForMap[elemToRemoveId]; @@ -888,10 +901,17 @@ function floormapBaseLayerChanged (vis, gridName, e) { for (const zoneLayer in this.zoneLayers) { if (zoneLayer.startsWith(elemToRemoveId)) { - delete this.layers[zoneLayer]; + delete this.zoneLayers[zoneLayer]; } } + for (const markerLayer in this.markerLayers) { + if (markerLayer.startsWith(elemToRemoveId)) { + delete this.markerLayers[markerLayer]; + } + } + + const elemToRemove = document.getElementById(elemToRemoveId); if (elemToRemove) {