Networkmap bugfix

Fix icons don't show up after reload

Issue-ID: CCSDK-2879
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: Ic752d969acb0985e4ae97cec101ac2bbe0895716

4 files changed, 397 insertions, 304 deletions

diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx
index ceb51d41a..8db279a35 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx
@@ -29,19 +29,16 @@ import MapPopup from './mapPopup';
 import { SetPopupPositionAction, SelectMultipleLinksAction, SelectMultipleSitesAction } from '../actions/popupActions';
 import { Feature } from '../model/Feature';
 import { HighlightLinkAction, HighlightSiteAction, SetCoordinatesAction, SetStatistics } from '../actions/mapActions';
-import { addDistance, getUniqueFeatures } from '../utils/mapUtils';
+import { addDistance, getUniqueFeatures, increaseBoundingBox } from '../utils/mapUtils';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
 import SearchBar from './searchBar';
 import { verifyResponse, IsTileServerReachableAction, handleConnectionError } from '../actions/connectivityAction';
 import ConnectionInfo from './connectionInfo'
-import { showIconLayers, addBaseLayers } from '../utils/mapLayers';
-import lamp from '../../icons/lamp.png';
-import apartment from '../../icons/apartment.png';
-import datacenter from '../../icons/datacenter.png';
-import factory from '../../icons/factory.png';
+import { showIconLayers, addBaseLayers, addBaseSources, addIconLayers } from '../utils/mapLayers';
 import Statistics from './statistics';
 import IconSwitch from './iconSwitch';
+import { addImages } from '../services/mapImagesService';
 
 type coordinates = { lat: number, lon: number, zoom: number }
 
@@ -113,34 +110,16 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
 
         map.on('load', (ev) => {
 
-            addBaseLayers(map, this.props.selectedSite, this.props.selectedLink);
-            map.loadImage(
-                lamp,
-                function (error: any, image: any) {
-                    if (error) throw error;
-                    map.addImage('lamp', image);
-                });
-
-            map.loadImage(
-                datacenter,
-                function (error: any, image: any) {
-                    if (error) throw error;
-                    map.addImage('data-center', image);
-                });
-
-            map.loadImage(
-                apartment,
-                function (error: any, image: any) {
-                    if (error) throw error;
-                    map.addImage('house', image);
-                });
-
-                map.loadImage(
-                    factory,
-                    function (error: any, image: any) {
-                        if (error) throw error;
-                        map.addImage('factory', image);
-                    });               
+            addBaseSources(map, this.props.selectedSite, this.props.selectedLink);
+                
+            addImages(map, (result: boolean)=>{
+                if(map.getZoom()>11)
+                {
+                    addIconLayers(map, this.props.selectedSite?.properties.id)
+                }else{
+                    addBaseLayers(map, this.props.selectedSite, this.props.selectedLink);
+                }
+            });             
 
             const boundingBox = map.getBounds();
 
@@ -149,18 +128,18 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
                 .then(result => verifyResponse(result))
                 .then(result => result.json())
                 .then(features => {
-                    if (map.getLayer('fibre-lines')) {
+                    if (map.getSource('lines')) {
                         (map.getSource('lines') as mapboxgl.GeoJSONSource).setData(features);
                     }
                 })
                 .catch(error => this.props.handleConnectionError(error));
 
 
-            fetch(`${URL_API}/sites/geoJson/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`)
+                fetch(`${URL_API}/sites/geoJson/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`)
                 .then(result => verifyResponse(result))
                 .then(result => result.json())
                 .then(features => {
-                    if (map.getLayer('points')) {
+                    if (map.getSource('points')) {
                         (map.getSource('points') as mapboxgl.GeoJSONSource).setData(features);
                     }
                 })
@@ -201,20 +180,14 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
 
             } else { // data is shown as icons
 
-                const clickedLamps = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-lamps'] }), "id");
-                const buildings = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-building'] }), "id");
-                const houses = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-data-center'] }), "id");
-                const factories = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-factory'] }), "id");
-
-                const combinedFeatures = [...clickedLamps, ...buildings, ...houses, ...factories];
-
+                const clickedSites = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-lamps', 'point-building', 'point-data-center', 'point-factory', 'point-remaining'] }), "id");
                 const clickedLines = getUniqueFeatures(map.queryRenderedFeatures([[e.point.x - 5, e.point.y - 5],
                 [e.point.x + 5, e.point.y + 5]], {
                     layers: ['microwave-lines', 'fibre-lines']
                 }), "id");
 
-                if (combinedFeatures.length > 0)
-                    this.showSitePopup(combinedFeatures, e.point.x, e.point.y);
+                if (clickedSites.length > 0)
+                    this.showSitePopup(clickedSites, e.point.x, e.point.y);
                 else if (clickedLines.length != 0) {
                     this.showLinkPopup(clickedLines, e.point.x, e.point.y);
                 }
@@ -237,14 +210,18 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
 
             const currentUrl = window.location.href;
             const parts = currentUrl.split(URL_BASEPATH);
-            const detailsPath = parts[1].split("/details/");
+            if(parts.length>0){
 
-            if (detailsPath[1] !== undefined && detailsPath[1].length > 0) {
-                this.props.history.replace(`/${URL_BASEPATH}/${map.getCenter().lat.toFixed(4)},${map.getCenter().lng.toFixed(4)},${mapZoom.toFixed(2)}/details/${detailsPath[1]}`)
-            }
-            else {
-                this.props.history.replace(`/${URL_BASEPATH}/${map.getCenter().lat.toFixed(4)},${map.getCenter().lng.toFixed(4)},${mapZoom.toFixed(2)}`)
+                const detailsPath = parts[1].split("/details/");
+
+                if (detailsPath[1] !== undefined && detailsPath[1].length > 0) {
+                    this.props.history.replace(`/${URL_BASEPATH}/${map.getCenter().lat.toFixed(4)},${map.getCenter().lng.toFixed(4)},${mapZoom.toFixed(2)}/details/${detailsPath[1]}`)
+                }
+                else {
+                    this.props.history.replace(`/${URL_BASEPATH}/${map.getCenter().lat.toFixed(4)},${map.getCenter().lng.toFixed(4)},${mapZoom.toFixed(2)}`)
+                }
             }
+           
             
             //switch icon layers if applicable
             showIconLayers(map, this.props.showIcons, this.props.selectedSite?.properties.id);
@@ -310,7 +287,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
                         map.setFilter('point-lamps', ['==', 'type', 'street lamp']);
                         map.setFilter('point-data-center', ['==', 'type', 'data center']);
                         map.setFilter('point-building', ['==', 'type', 'high rise building']);
-                        map.setFilter('point-factory', ['==', 'type', 'factory'])
+                        map.setFilter('point-factory', ['==', 'type', 'factory']);
 
                         if (this.props.selectedSite?.properties.type !== undefined) {
                             switch (this.props.selectedSite?.properties.type) {
@@ -325,7 +302,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
                                     break;
                                 case 'factory':
                                     map.setFilter('point-factory', ["all", ['==', 'type', 'factory'], ['!=', 'id', this.props.selectedSite.properties.id]]);
-                                    break;
+                                    break;    
                             }
                         }
                     }
@@ -462,10 +439,8 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
 
                     lastBoundingBox = bbox;
 
-                    const distance = map.getCenter().distanceTo(bbox.getNorthEast()); // radius of visible area (center -> corner) (in meters)
-
                     //calculate new boundingBox
-                    const increasedBoundingBox = addDistance(bbox.getSouth(), bbox.getWest(), bbox.getNorth(), bbox.getEast(), (distance / 1000) / 2)
+                    const increasedBoundingBox = increaseBoundingBox(map);
 
                     await this.draw('lines', `${URL_API}/links/geoJson/${increasedBoundingBox.west},${increasedBoundingBox.south},${increasedBoundingBox.east},${increasedBoundingBox.north}`);
                     await this.draw('points', `${URL_API}/sites/geoJson/${increasedBoundingBox.west},${increasedBoundingBox.south},${increasedBoundingBox.east},${increasedBoundingBox.north}`);
@@ -474,7 +449,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
                     // bbox is contained in last one, do nothing
                     isLoadingInProgress = false;
 
-                } else { // bbox is not fully contained in old one, extend 
+                } else { // bbox is not fully contained in old one, extend
 
                     lastBoundingBox.extend(bbox);
 
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts b/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts
new file mode 100644
index 000000000..c414b15c9
--- /dev/null
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts
@@ -0,0 +1,54 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+import * as mapboxgl from 'mapbox-gl';
+import apartment from '../../icons/apartment.png';
+import datacenter from '../../icons/datacenter.png';
+import factory from '../../icons/factory.png';
+import lamp from '../../icons/lamp.png';
+
+type ImagesLoaded = (allImagesLoaded: boolean) => void;
+type MapImages = {name: string, url: string}
+
+export const Images : MapImages[]  = [{name: 'data-center', url: datacenter}, {name: 'house', url: apartment}, {name: 'factory', url: factory},{name: 'lamp', url: lamp}] ;
+
+export const addImages = (map: mapboxgl.Map, callback?: ImagesLoaded) =>{
+
+    Images.forEach(image => {
+       
+        map.loadImage(
+            image.url,
+            function (error: any, img: any) {
+                if (error) throw error;
+                map.addImage(image.name, img);
+                allImagesLoaded(map, callback);
+            });
+    });
+}
+
+const allImagesLoaded = (map: mapboxgl.Map, callback?: ImagesLoaded) =>{
+
+    const loadedImages = Images.map(image =>{
+        return map.hasImage(image.name);
+    });
+
+    const allImagesLoaded = loadedImages.filter(el => !el);
+    if(allImagesLoaded.length===0){
+        callback && callback(true);
+    }
+}
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts
index f2cabf501..b54212e5c 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts
@@ -22,37 +22,271 @@ import { Feature } from 'model/Feature';
 const fibreLinkColor = "#1154d9";
 const microwaveLinkColor="#039903";
 
+export const addBaseSources = (map: mapboxgl.Map, selectedPoint: Feature|null, selectedLine: Feature|null) =>{
+    
+
+    // make sure the sources don't already exist
+    // (if the networkmap app gets opened quickly within short time periods, the prior sources might not be fully removed)
+
+    if(!map.getSource("lines")){
+        
+        map.addSource('lines', {
+            type: 'geojson',
+            data: { type: "FeatureCollection", features: [] }
+        });
+    }
+    
+    if(!map.getSource("selectedLine"))
+    {
+        const features = selectedLine !== null ? [selectedLine] : [];
+        map.addSource('selectedLine', {
+            type: 'geojson',
+            data: { type: "FeatureCollection", features: features }
+        });
+    }
+
+    if(!map.getSource("points"))
+    {
+        map.addSource('points', {
+            type: 'geojson',
+            data: { type: "FeatureCollection", features: [] }
+        });
+    }
+
+    if(!map.getSource("selectedPoints"))
+    {
+        const selectedPointFeature = selectedPoint !== null ? [selectedPoint] : [];
+        map.addSource('selectedPoints', {
+            type: 'geojson',
+            data: { type: "FeatureCollection", features: selectedPointFeature }
+    
+        });
+    }
+
+    if(!map.getSource("alarmedPoints"))
+    {
+        map.addSource("alarmedPoints", {
+            type: 'geojson',
+            data: {type:"FeatureCollection", features:[]}
+        });
+    }
+}
 
 export const addBaseLayers = (map: mapboxgl.Map, selectedPoint: Feature|null, selectedLine: Feature|null) => {
-       
-    const boundingBox = map.getBounds();
-    map.addSource('lines', {
-        type: 'geojson',
-        data: { type: "FeatureCollection", features: [] }
+
+    addCommonLayers(map);
+
+    map.addLayer({
+        id: 'points',
+        source: 'points',
+        type: 'circle',
+        paint: {
+            'circle-color': '#11b4da',
+            'circle-radius': 7,
+            'circle-stroke-width': 1,
+            'circle-stroke-color': '#fff'
+        }
     });
 
-    const features = selectedLine !== null ? [selectedLine] : [];
+    map.addLayer({
+        id: 'selectedPoints',
+        source: 'selectedPoints',
+        type: 'circle',
+        paint: {
+            'circle-color': '#116bda',
+            'circle-radius': 9,
+            'circle-stroke-width': 1,
+            'circle-stroke-color': '#fff'
+        }
+    });
 
-    map.addSource('selectedLine', {
-        type: 'geojson',
-        data: { type: "FeatureCollection", features: features }
+    map.addLayer({
+        id: 'alarmedPoints',
+        source: 'alarmedPoints',
+        type: 'circle',
+        paint: {
+            'circle-color': '#CC0000',
+            'circle-radius': 9,
+            'circle-stroke-width': 1,
+            'circle-stroke-color': '#fff'
+        }
     });
+}
 
-    map.addSource('points', {
-        type: 'geojson',
-        data: { type: "FeatureCollection", features: [] }
+export const addIconLayers = (map: mapboxgl.Map, selectedSiteId?: string) =>{
+
+    addCommonLayers(map);
+    createIconLayers(map, selectedSiteId);
+}
+
+const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
+    map.addLayer({
+        'id': 'point-lamps',
+        'type': 'symbol',
+        'source': 'points',
+        'layout': {
+            'icon-allow-overlap': true,
+            'icon-image': 'lamp',
+            'icon-size': 0.1
+
+        },
+        'filter': createFilter("street lamp", selectedSiteId),
+    });
+
+    map.addLayer({
+        'id': 'point-building',
+        'type': 'symbol',
+        'source': 'points',
+        'filter': createFilter("high rise building", selectedSiteId),
+        'layout': {
+            'icon-allow-overlap': true,
+            'icon-image': 'house',
+            'icon-size': 0.1
+        }
     });
 
-    const selectedPointFeature = selectedPoint !== null ? [selectedPoint] : [];
+    map.addLayer({
+        'id': 'point-data-center',
+        'type': 'symbol',
+        'source': 'points',
+        'filter': createFilter("data center", selectedSiteId),
+        'layout': {
+            'icon-allow-overlap': true,
+            'icon-image': 'data-center',
+            'icon-size': 0.1
+        } });
+
+        map.addLayer({
+            'id': 'point-factory',
+            'type': 'symbol',
+            'source': 'points',
+            'filter': createFilter("factory", selectedSiteId),
+            'layout': {
+                'icon-allow-overlap': true,
+                'icon-image': 'factory',
+                'icon-size': 0.2
+            }
+        });
 
+        //alarm layers
+
+        map.addLayer({
+            'id': 'point-lamps-alarm',
+            'type': 'symbol',
+            'source': 'alarmedPoints',
+            'layout': {
+                'icon-allow-overlap': true,
+                'icon-image': 'lamp-red',
+                'icon-size': 0.1
+
+            },
+            'filter': createFilter("street lamp"),
+        });
+
+        map.addLayer({
+            'id': 'point-building-alarm',
+            'type': 'symbol',
+            'source': 'alarmedPoints',
+            'filter': createFilter("high rise building"),
+            'layout': {
+                'icon-allow-overlap': true,
+                'icon-image': 'house-red',
+                'icon-size': 0.1
+            }
+        });
+
+        map.addLayer({
+            'id': 'point-data-center-alarm',
+            'type': 'symbol',
+            'source': 'alarmedPoints',
+            'filter': createFilter("data center"),
+            'layout': {
+                'icon-allow-overlap': true,
+                'icon-image': 'data-center_red',
+                'icon-size': 0.1
+            } });
+
+            map.addLayer({
+                'id': 'point-factory-alarm',
+                'type': 'symbol',
+                'source': 'alarmedPoints',
+                'filter': createFilter("factory"),
+                'layout': {
+                    'icon-allow-overlap': true,
+                    'icon-image': 'factory-red',
+                    'icon-size': 0.2
+                }
+            });
 
-    map.addSource('selectedPoints', {
-        type: 'geojson',
-        data: { type: "FeatureCollection", features: selectedPointFeature }
 
+
+    map.addLayer({
+        id: 'point-remaining',
+        source: 'points',
+        type: 'circle',
+        'filter': ['none', ['==', 'type', "high rise building"], ['==', 'type', "data center"], ['==', 'type', "factory"], ['==', 'type', "street lamp"] ],
+        paint: {
+            'circle-color': '#11b4da',
+            'circle-radius': 7,
+            'circle-stroke-width': 1,
+            'circle-stroke-color': '#fff'
+        }
+    });
+
+    map.addLayer({
+        'id': 'select-point-lamps',
+        'type': 'symbol',
+        'source': 'selectedPoints',
+        'layout': {
+            'icon-allow-overlap': true,
+            'icon-image': 'lamp',
+            'icon-size': 0.15
+
+        },
+        'filter': ['==', 'type', 'street lamp'],
     });
 
     map.addLayer({
+        'id': 'select-point-buildings',
+        'type': 'symbol',
+        'source': 'selectedPoints',
+        'filter': ['==', 'type', 'high rise building'],
+        'layout': {
+            'icon-allow-overlap': true,
+            'icon-image': 'house',
+            'icon-size': 0.15
+        }
+    });
+
+    map.addLayer({
+        'id': 'select-point-data-center',
+        'type': 'symbol',
+        'source': 'selectedPoints',
+        'filter': ['==', 'type', 'data center'],
+        'layout': {
+            'icon-allow-overlap': true,
+            'icon-image': 'data-center',
+            'icon-size': 0.15
+        }
+    });
+
+
+    map.addLayer({
+        'id': 'select-point-factory',
+        'type': 'symbol',
+        'source': 'selectedPoints',
+        'filter': ['==', 'type', 'factory'],
+        'layout': {
+            'icon-allow-overlap': true,
+            'icon-image': 'factory',
+            'icon-size': 0.3
+        }
+    });
+}
+
+ const addCommonLayers = (map: mapboxgl.Map) =>{
+    
+    map.addLayer({
         'id': 'microwave-lines',
         'type': 'line',
         'source': 'lines',
@@ -111,49 +345,6 @@ export const addBaseLayers = (map: mapboxgl.Map, selectedPoint: Feature|null, se
         },
         'filter': ['==', 'type', 'fibre']
     });
-
-
-
-    map.addLayer({
-        id: 'points',
-        source: 'points',
-        type: 'circle',
-        paint: {
-            'circle-color': '#11b4da',
-            'circle-radius': 7,
-            'circle-stroke-width': 1,
-            'circle-stroke-color': '#fff'
-        }
-    });
-
-    map.addLayer({
-        id: 'selectedPoints',
-        source: 'selectedPoints',
-        type: 'circle',
-        paint: {
-            'circle-color': '#116bda',
-            'circle-radius': 9,
-            'circle-stroke-width': 1,
-            'circle-stroke-color': '#fff'
-        }
-    });
-
-    map.addSource("alarmedPoints", {
-        type: 'geojson',
-        data: {type:"FeatureCollection", features:[]}
-    })
-
-    map.addLayer({
-        id: 'alarmedPoints',
-        source: 'alarmedPoints',
-        type: 'circle',
-        paint: {
-            'circle-color': '#CC0000',
-            'circle-radius': 9,
-            'circle-stroke-width': 1,
-            'circle-stroke-color': '#fff'
-        }
-    });
 }
 
 export const removeBaseLayers = (map: mapboxgl.Map) => {
@@ -162,11 +353,23 @@ export const removeBaseLayers = (map: mapboxgl.Map) => {
     map.removeLayer("lines");
     map.removeLayer('selectedPoints');
     map.removeLayer('selectedLine');
+}
 
-    map.removeSource("points");
-    map.removeSource("lines");
-    map.removeSource('selectedPoints');
-    map.removeSource('selectedLine');
+const removeIconLayers = (map: mapboxgl.Map) =>{
+
+    map.removeLayer('point-building');
+    map.removeLayer('point-lamps');
+    map.removeLayer('point-data-center');
+    map.removeLayer('point-factory');
+    map.removeLayer('point-remaining');
+    map.removeLayer('select-point-data-center');
+    map.removeLayer('select-point-buildings');
+    map.removeLayer('select-point-lamps');
+    map.removeLayer('select-point-factory');
+    map.removeLayer('point-building-alarm');
+    map.removeLayer('point-lamps-alarm');
+    map.removeLayer('point-data-center-alarm');
+    map.removeLayer('point-factory-alarm');
 }
 
 let checkedLayers = false;
@@ -200,169 +403,9 @@ export const showIconLayers = (map: mapboxgl.Map, show: boolean, selectedSiteId?
             map.removeLayer('points');
             map.setLayoutProperty('alarmedPoints', 'visibility', 'none');
             map.setLayoutProperty('selectedPoints', 'visibility', 'none');
+            createIconLayers(map,selectedSiteId);
+            //map.moveLayer('point-remaining','selectedPoints');
 
-            map.addLayer({
-                'id': 'point-lamps',
-                'type': 'symbol',
-                'source': 'points',
-                'layout': {
-                    'icon-allow-overlap': true,
-                    'icon-image': 'lamp',
-                    'icon-size': 0.1
-
-                },
-                'filter': createFilter("street lamp", selectedSiteId),
-            });
-
-            map.addLayer({
-                'id': 'point-building',
-                'type': 'symbol',
-                'source': 'points',
-                'filter': createFilter("high rise building", selectedSiteId),
-                'layout': {
-                    'icon-allow-overlap': true,
-                    'icon-image': 'house',
-                    'icon-size': 0.1
-                }
-            });
-
-            map.addLayer({
-                'id': 'point-data-center',
-                'type': 'symbol',
-                'source': 'points',
-                'filter': createFilter("data center", selectedSiteId),
-                'layout': {
-                    'icon-allow-overlap': true,
-                    'icon-image': 'data-center',
-                    'icon-size': 0.1
-                } });
-
-                map.addLayer({
-                    'id': 'point-factory',
-                    'type': 'symbol',
-                    'source': 'points',
-                    'filter': createFilter("factory", selectedSiteId),
-                    'layout': {
-                        'icon-allow-overlap': true,
-                        'icon-image': 'factory',
-                        'icon-size': 0.2
-                    }
-                });
-
-                //alarm layers
-
-                map.addLayer({
-                    'id': 'point-lamps-alarm',
-                    'type': 'symbol',
-                    'source': 'alarmedPoints',
-                    'layout': {
-                        'icon-allow-overlap': true,
-                        'icon-image': 'lamp-red',
-                        'icon-size': 0.1
-    
-                    },
-                    'filter': createFilter("street lamp"),
-                });
-    
-                map.addLayer({
-                    'id': 'point-building-alarm',
-                    'type': 'symbol',
-                    'source': 'alarmedPoints',
-                    'filter': createFilter("high rise building"),
-                    'layout': {
-                        'icon-allow-overlap': true,
-                        'icon-image': 'house-red',
-                        'icon-size': 0.1
-                    }
-                });
-    
-                map.addLayer({
-                    'id': 'point-data-center-alarm',
-                    'type': 'symbol',
-                    'source': 'alarmedPoints',
-                    'filter': createFilter("data center"),
-                    'layout': {
-                        'icon-allow-overlap': true,
-                        'icon-image': 'data-center_red',
-                        'icon-size': 0.1
-                    } });
-
-                    map.addLayer({
-                        'id': 'point-factory-alarm',
-                        'type': 'symbol',
-                        'source': 'alarmedPoints',
-                        'filter': createFilter("factory"),
-                        'layout': {
-                            'icon-allow-overlap': true,
-                            'icon-image': 'factory-red',
-                            'icon-size': 0.2
-                        }
-                    });
-
-
-
-            map.addLayer({
-                id: 'point-remaining',
-                source: 'points',
-                type: 'circle',
-                'filter': ['==', 'type', ''],
-                paint: {
-                    'circle-color': '#11b4da',
-                    'circle-radius': 7,
-                    'circle-stroke-width': 1,
-                    'circle-stroke-color': '#fff'
-                }
-            });
-
-            map.addLayer({
-                'id': 'select-point-lamps',
-                'type': 'symbol',
-                'source': 'selectedPoints',
-                'layout': {
-                    'icon-allow-overlap': true,
-                    'icon-image': 'lamp',
-                    'icon-size': 0.15
-
-                },
-                'filter': ['==', 'type', 'street lamp'],
-            });
-
-            map.addLayer({
-                'id': 'select-point-buildings',
-                'type': 'symbol',
-                'source': 'selectedPoints',
-                'filter': ['==', 'type', 'high rise building'],
-                'layout': {
-                    'icon-allow-overlap': true,
-                    'icon-image': 'house',
-                    'icon-size': 0.15
-                }
-            });
-
-            map.addLayer({
-                'id': 'select-point-data-center',
-                'type': 'symbol',
-                'source': 'selectedPoints',
-                'filter': ['==', 'type', 'data center'],
-                'layout': {
-                    'icon-allow-overlap': true,
-                    'icon-image': 'data-center',
-                    'icon-size': 0.15
-                }
-            });
-
-
-            map.addLayer({
-                'id': 'select-point-factory',
-                'type': 'symbol',
-                'source': 'selectedPoints',
-                'filter': ['==', 'type', 'factory'],
-                'layout': {
-                    'icon-allow-overlap': true,
-                    'icon-image': 'factory',
-                    'icon-size': 0.3
-                }
-            });
             }
         }
         }
@@ -372,34 +415,46 @@ export const showIconLayers = (map: mapboxgl.Map, show: boolean, selectedSiteId?
     }
 }else{
     swapLayersBack(map);
-
 }
-    
 }
 
 export const swapLayersBack = (map: mapboxgl.Map) =>{
     checkedLayers=false;
-    if (map.getLayer('points') === undefined) {
 
-        map.setLayoutProperty('selectedPoints', 'visibility', 'visible');
-        map.setLayoutProperty('alarmedPoints', 'visibility', 'visible');
+    if(map.getLayer('selectedPoints') === undefined){
+        map.addLayer({
+            id: 'selectedPoints',
+            source: 'selectedPoints',
+            type: 'circle',
+            paint: {
+                'circle-color': '#116bda',
+                'circle-radius': 9,
+                'circle-stroke-width': 1,
+                'circle-stroke-color': '#fff'
+            }
+        });
+    }
 
+    if(map.getLayer('alarmedPoints') === undefined){
+        map.addLayer({
+            id: 'alarmedPoints',
+            source: 'alarmedPoints',
+            type: 'circle',
+            paint: {
+                'circle-color': '#CC0000',
+                'circle-radius': 9,
+                'circle-stroke-width': 1,
+                'circle-stroke-color': '#fff'
+            }
+        });
+    }
 
-        map.removeLayer('point-building');
-        map.removeLayer('point-lamps');
-        map.removeLayer('point-data-center');
-        map.removeLayer('point-factory');
-        map.removeLayer('point-remaining');
-        map.removeLayer('select-point-data-center');
-        map.removeLayer('select-point-buildings');
-        map.removeLayer('select-point-lamps');
-        map.removeLayer('select-point-factory');
-        map.removeLayer('point-building-alarm');
-        map.removeLayer('point-lamps-alarm');
-        map.removeLayer('point-data-center-alarm');
-        map.removeLayer('point-factory-alarm');
 
+    if (map.getLayer('points') === undefined) {
 
+        map.setLayoutProperty('selectedPoints', 'visibility', 'visible');
+        map.setLayoutProperty('alarmedPoints', 'visibility', 'visible');
+        removeIconLayers(map);
 
         map.addLayer({
             id: 'points',
@@ -413,9 +468,7 @@ export const swapLayersBack = (map: mapboxgl.Map) =>{
             }
         });
 
-        map.moveLayer('points', map.getLayer('selectedPoints').id)
-
-
+        map.moveLayer('points', map.getLayer('selectedPoints').id);
     }
 }
 
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapUtils.ts b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapUtils.ts
index 34cdc0638..da3e97ee3 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapUtils.ts
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapUtils.ts
@@ -21,6 +21,17 @@ const EARTHRADIUSM = 6378137;
 type updatedCoordinates = { south: number, west: number, north: number, east: number };
 
 
+export const increaseBoundingBox = (map: mapboxgl.Map) =>{
+
+    const bbox = map.getBounds();
+
+    const distance = map.getCenter().distanceTo(bbox.getNorthEast()); // radius of visible area (center -> corner) (in meters)
+
+    //calculate new boundingBox
+    const increasedBoundingBox = addDistance(bbox.getSouth(), bbox.getWest(), bbox.getNorth(), bbox.getEast(), (distance / 1000) / 2);
+    return increasedBoundingBox;
+}
+
 
 
 export const addDistance = (south: number, west: number, north: number, east: number, distanceKm: number): updatedCoordinates => {