diff options
Diffstat (limited to 'sdnr/wt/odlux')
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 => { |