summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-10-09 21:08:54 +0200
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-10-09 21:08:54 +0200
commitf8196fc099fd35947d3903051ad543aa3cefccbb (patch)
tree67fc5cc856b5e38379e88a33939e3d730aa720c3
parent0f280166f426fe313dd333f7fe78ad4c6cac62b6 (diff)
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
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx91
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts54
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts545
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/utils/mapUtils.ts11
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 => {