sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18
  19 import * as mapboxgl from 'mapbox-gl';
  20 import { Feature } from 'model/Feature';
  21
  22
  23 export const addBaseLayers = (map: mapboxgl.Map, selectedPoint: Feature|null, selectedLine: Feature|null) => {
  24
  25     const boundingBox = map.getBounds();
  26     map.addSource('lines', {
  27         type: 'geojson',
  28         data: { type: "FeatureCollection", features: [] }
  29     });
  30
  31     const features = selectedLine !== null ? [selectedLine] : [];
  32
  33     map.addSource('selectedLine', {
  34         type: 'geojson',
  35         data: { type: "FeatureCollection", features: features }
  36     });
  37
  38     map.addSource('points', {
  39         type: 'geojson',
  40         data: { type: "FeatureCollection", features: [] }
  41     });
  42
  43     const selectedPointFeature = selectedPoint !== null ? [selectedPoint] : [];
  44
  45
  46     map.addSource('selectedPoints', {
  47         type: 'geojson',
  48         data: { type: "FeatureCollection", features: selectedPointFeature }
  49
  50     });
  51
  52     map.addLayer({
  53         'id': 'lines',
  54         'type': 'line',
  55         'source': 'lines',
  56         'layout': {
  57             'line-join': 'round',
  58             'line-cap': 'round'
  59         },
  60         'paint': {
  61             'line-color': '#888',
  62             'line-width': 2
  63         }
  64     });
  65
  66     map.addLayer({
  67         'id': 'selectedLine',
  68         'type': 'line',
  69         'source': 'selectedLine',
  70         'layout': {
  71             'line-join': 'round',
  72             'line-cap': 'round'
  73         },
  74         'paint': {
  75             'line-color': '#888',
  76             'line-width': 4
  77         }
  78     });
  79
  80
  81
  82     map.addLayer({
  83         id: 'points',
  84         source: 'points',
  85         type: 'circle',
  86         paint: {
  87             'circle-color': '#11b4da',
  88             'circle-radius': 7,
  89             'circle-stroke-width': 1,
  90             'circle-stroke-color': '#fff'
  91         }
  92     });
  93
  94     map.addLayer({
  95         id: 'selectedPoints',
  96         source: 'selectedPoints',
  97         type: 'circle',
  98         paint: {
  99             'circle-color': '#116bda',
 100             'circle-radius': 9,
 101             'circle-stroke-width': 1,
 102             'circle-stroke-color': '#fff'
 103         }
 104     });
 105
 106     map.addSource("alarmedPoints", {
 107         type: 'geojson',
 108         data: {type:"FeatureCollection", features:[]}
 109     })
 110
 111     map.addLayer({
 112         id: 'alarmedPoints',
 113         source: 'alarmedPoints',
 114         type: 'circle',
 115         paint: {
 116             'circle-color': '#CC0000',
 117             'circle-radius': 9,
 118             'circle-stroke-width': 1,
 119             'circle-stroke-color': '#fff'
 120         }
 121     });
 122 }
 123
 124 export const removeBaseLayers = (map: mapboxgl.Map) => {
 125
 126     map.removeLayer("points");
 127     map.removeLayer("lines");
 128     map.removeLayer('selectedPoints');
 129     map.removeLayer('selectedLine');
 130
 131     map.removeSource("points");
 132     map.removeSource("lines");
 133     map.removeSource('selectedPoints');
 134     map.removeSource('selectedLine');
 135 }
 136
 137 let checkedLayers = false;
 138
 139 const createFilter = (type:'street lamp'|'high rise building'|'data center', selectedSiteId?:string) =>{
 140
 141     return selectedSiteId === undefined ? ['==', 'type', type] : ["all", ['==', 'type', type], ['!=', 'id', selectedSiteId]]
 142 }
 143
 144 export const showIconLayers = (map: mapboxgl.Map, show: boolean, selectedSiteId?: string) => {
 145
 146     const zoom = map.getZoom();
 147
 148         if(show){
 149
 150     if (zoom > 11) {
 151
 152         const bounds = map.getBounds();
 153
 154         if(map.getLayer('points')!== undefined && map.getLayer('point-lamps')===undefined && !checkedLayers){
 155
 156         // if sites don't have a type don't change layers to icons
 157         const elements = map.queryRenderedFeatures( undefined,{
 158                 layers: ['points'], filter:['has', 'type']
 159             });
 160             checkedLayers=true;
 161
 162             if(elements.length>0 && elements.length<1000){
 163
 164         if (map.getLayer('point-lamps') === undefined) {
 165             map.removeLayer('points');
 166
 167             map.setLayoutProperty('selectedPoints', 'visibility', 'none');
 168
 169             map.addLayer({
 170                 'id': 'point-lamps',
 171                 'type': 'symbol',
 172                 'source': 'points',
 173                 'layout': {
 174                     'icon-allow-overlap': true,
 175                     'icon-image': 'lamp',
 176                     'icon-size': 0.1
 177
 178                 },
 179                 'filter': createFilter("street lamp", selectedSiteId),
 180             });
 181
 182             map.addLayer({
 183                 'id': 'point-building',
 184                 'type': 'symbol',
 185                 'source': 'points',
 186                 'filter': createFilter("high rise building", selectedSiteId),
 187                 'layout': {
 188                     'icon-allow-overlap': true,
 189                     'icon-image': 'house',
 190                     'icon-size': 0.1
 191                 }
 192             });
 193
 194             map.addLayer({
 195                 'id': 'point-data-center',
 196                 'type': 'symbol',
 197                 'source': 'points',
 198                 'filter': createFilter("data center", selectedSiteId),
 199                 'layout': {
 200                     'icon-allow-overlap': true,
 201                     'icon-image': 'data-center',
 202                     'icon-size': 0.1
 203                 } });
 204
 205             map.addLayer({
 206                 id: 'point-remaining',
 207                 source: 'points',
 208                 type: 'circle',
 209                 'filter': ['==', 'type', ''],
 210                 paint: {
 211                     'circle-color': '#11b4da',
 212                     'circle-radius': 7,
 213                     'circle-stroke-width': 1,
 214                     'circle-stroke-color': '#fff'
 215                 }
 216             });
 217
 218             map.addLayer({
 219                 'id': 'select-point-lamps',
 220                 'type': 'symbol',
 221                 'source': 'selectedPoints',
 222                 'layout': {
 223                     'icon-allow-overlap': true,
 224                     'icon-image': 'lamp',
 225                     'icon-size': 0.15
 226
 227                 },
 228                 'filter': ['==', 'type', 'street lamp'],
 229             });
 230
 231             map.addLayer({
 232                 'id': 'select-point-buildings',
 233                 'type': 'symbol',
 234                 'source': 'selectedPoints',
 235                 'filter': ['==', 'type', 'high rise building'],
 236                 'layout': {
 237                     'icon-allow-overlap': true,
 238                     'icon-image': 'house',
 239                     'icon-size': 0.15
 240                 }
 241             });
 242
 243             map.addLayer({
 244                 'id': 'select-point-data-center',
 245                 'type': 'symbol',
 246                 'source': 'selectedPoints',
 247                 'filter': ['==', 'type', 'data center'],
 248                 'layout': {
 249                     'icon-allow-overlap': true,
 250                     'icon-image': 'data-center',
 251                     'icon-size': 0.15
 252                 }
 253             });
 254             }
 255         }
 256         }
 257
 258     } else {
 259         swapLayersBack(map);
 260     }
 261 }else{
 262     swapLayersBack(map);
 263
 264 }
 265
 266 }
 267
 268 export const swapLayersBack = (map: mapboxgl.Map) =>{
 269     checkedLayers=false;
 270     if (map.getLayer('points') === undefined) {
 271
 272         map.setLayoutProperty('selectedPoints', 'visibility', 'visible');
 273
 274         map.removeLayer('point-building');
 275         map.removeLayer('point-lamps');
 276         map.removeLayer('point-data-center');
 277         map.removeLayer('point-remaining');
 278         map.removeLayer('select-point-data-center');
 279         map.removeLayer('select-point-buildings');
 280         map.removeLayer('select-point-lamps');
 281
 282
 283
 284         map.addLayer({
 285             id: 'points',
 286             source: 'points',
 287             type: 'circle',
 288             paint: {
 289                 'circle-color': '#11b4da',
 290                 'circle-radius': 7,
 291                 'circle-stroke-width': 1,
 292                 'circle-stroke-color': '#fff'
 293             }
 294         });
 295
 296         map.moveLayer('points', map.getLayer('selectedPoints').id)
 297
 298
 299     }
 300 }
 301
 302 const addClusterLayers = (map: mapboxgl.Map, data: any) => {
 303     map.addSource('clusters', {
 304         type: 'geojson',
 305         data: data
 306     });
 307
 308     map.addSource('selectedLine', {
 309         type: 'geojson',
 310         data: { type: "FeatureCollection", features: [] }
 311     });
 312
 313     map.addSource('selectedPoints', {
 314         type: 'geojson',
 315         data: { type: "FeatureCollection", features: [] }
 316
 317     });
 318
 319     map.addLayer({
 320         id: 'clusters',
 321         type: 'circle',
 322         source: 'clusters',
 323         filter: ['has', 'count'],
 324         paint: {
 325             'circle-color': [
 326                 'step',
 327                 ['get', 'count'],
 328                 '#51bbd6',
 329                 100,
 330                 '#f1f075',
 331                 750,
 332                 '#f28cb1'
 333             ],
 334             'circle-radius': [
 335                 'step',
 336                 ['get', 'count'],
 337                 20,
 338                 100,
 339                 30,
 340                 750,
 341                 40
 342             ]
 343         }
 344     });
 345
 346
 347     map.addLayer({
 348         id: 'cluster-count',
 349         type: 'symbol',
 350         source: 'clusters',
 351         filter: ['has', 'count'],
 352         layout: {
 353             'text-field': '{count}',
 354             'text-font': ['Roboto Bold'],
 355             'text-size': 12
 356         }
 357     });
 358
 359     map.addLayer({
 360         'id': 'selectedLine',
 361         'type': 'line',
 362         'source': 'selectedLine',
 363         'layout': {
 364             'line-join': 'round',
 365             'line-cap': 'round'
 366         },
 367         'paint': {
 368             'line-color': '#888',
 369             'line-width': 4
 370         }
 371     });
 372
 373     map.addLayer({
 374         id: 'unclustered-points',
 375         source: 'clusters',
 376         filter: ['!', ['has', 'count'],],
 377         type: 'circle',
 378         paint: {
 379             'circle-color': '#11b4da',
 380             'circle-radius': 7,
 381             'circle-stroke-width': 1,
 382             'circle-stroke-color': '#fff'
 383         }
 384     });
 385
 386     map.addLayer({
 387         id: 'selectedPoints',
 388         source: 'selectedPoints',
 389         type: 'circle',
 390         paint: {
 391             'circle-color': '#116bda',
 392             'circle-radius': 9,
 393             'circle-stroke-width': 1,
 394             'circle-stroke-color': '#fff'
 395         }
 396     });
 397
 398 }