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 const fibreLinkColor = "#1154d9";
  23 const microwaveLinkColor="#039903";
  24
  25 export const addBaseSources = (map: mapboxgl.Map, selectedPoint: Feature|null, selectedLine: Feature|null) =>{
  26
  27
  28     // make sure the sources don't already exist
  29     // (if the networkmap app gets opened quickly within short time periods, the prior sources might not be fully removed)
  30
  31     if(!map.getSource("lines")){
  32
  33         map.addSource('lines', {
  34             type: 'geojson',
  35             data: { type: "FeatureCollection", features: [] }
  36         });
  37     }
  38
  39     if(!map.getSource("selectedLine"))
  40     {
  41         const features = selectedLine !== null ? [selectedLine] : [];
  42         map.addSource('selectedLine', {
  43             type: 'geojson',
  44             data: { type: "FeatureCollection", features: features }
  45         });
  46     }
  47
  48     if(!map.getSource("points"))
  49     {
  50         map.addSource('points', {
  51             type: 'geojson',
  52             data: { type: "FeatureCollection", features: [] }
  53         });
  54     }
  55
  56     if(!map.getSource("selectedPoints"))
  57     {
  58         const selectedPointFeature = selectedPoint !== null ? [selectedPoint] : [];
  59         map.addSource('selectedPoints', {
  60             type: 'geojson',
  61             data: { type: "FeatureCollection", features: selectedPointFeature }
  62
  63         });
  64     }
  65
  66     if(!map.getSource("alarmedPoints"))
  67     {
  68         map.addSource("alarmedPoints", {
  69             type: 'geojson',
  70             data: {type:"FeatureCollection", features:[]}
  71         });
  72     }
  73 }
  74
  75 export const addBaseLayers = (map: mapboxgl.Map, selectedPoint: Feature|null, selectedLine: Feature|null) => {
  76
  77     addCommonLayers(map);
  78
  79     map.addLayer({
  80         id: 'points',
  81         source: 'points',
  82         type: 'circle',
  83         paint: {
  84             'circle-color': '#11b4da',
  85             'circle-radius': 7,
  86             'circle-stroke-width': 1,
  87             'circle-stroke-color': '#fff'
  88         }
  89     });
  90
  91     map.addLayer({
  92         id: 'selectedPoints',
  93         source: 'selectedPoints',
  94         type: 'circle',
  95         paint: {
  96             'circle-color': '#116bda',
  97             'circle-radius': 9,
  98             'circle-stroke-width': 1,
  99             'circle-stroke-color': '#fff'
 100         }
 101     });
 102
 103     map.addLayer({
 104         id: 'alarmedPoints',
 105         source: 'alarmedPoints',
 106         type: 'circle',
 107         paint: {
 108             'circle-color': '#CC0000',
 109             'circle-radius': 9,
 110             'circle-stroke-width': 1,
 111             'circle-stroke-color': '#fff'
 112         }
 113     });
 114 }
 115
 116 export const addIconLayers = (map: mapboxgl.Map, selectedSiteId?: string) =>{
 117
 118     addCommonLayers(map);
 119     createIconLayers(map, selectedSiteId);
 120 }
 121
 122 const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
 123     map.addLayer({
 124         'id': 'point-lamps',
 125         'type': 'symbol',
 126         'source': 'points',
 127         'layout': {
 128             'icon-allow-overlap': true,
 129             'icon-image': 'lamp',
 130             'icon-size': 0.1
 131
 132         },
 133         'filter': createFilter("street lamp", selectedSiteId),
 134     });
 135
 136     map.addLayer({
 137         'id': 'point-building',
 138         'type': 'symbol',
 139         'source': 'points',
 140         'filter': createFilter("high rise building", selectedSiteId),
 141         'layout': {
 142             'icon-allow-overlap': true,
 143             'icon-image': 'house',
 144             'icon-size': 0.1
 145         }
 146     });
 147
 148     map.addLayer({
 149         'id': 'point-data-center',
 150         'type': 'symbol',
 151         'source': 'points',
 152         'filter': createFilter("data center", selectedSiteId),
 153         'layout': {
 154             'icon-allow-overlap': true,
 155             'icon-image': 'data-center',
 156             'icon-size': 0.1
 157         } });
 158
 159         map.addLayer({
 160             'id': 'point-factory',
 161             'type': 'symbol',
 162             'source': 'points',
 163             'filter': createFilter("factory", selectedSiteId),
 164             'layout': {
 165                 'icon-allow-overlap': true,
 166                 'icon-image': 'factory',
 167                 'icon-size': 0.2
 168             }
 169         });
 170
 171         //alarm layers
 172
 173         map.addLayer({
 174             'id': 'point-lamps-alarm',
 175             'type': 'symbol',
 176             'source': 'alarmedPoints',
 177             'layout': {
 178                 'icon-allow-overlap': true,
 179                 'icon-image': 'lamp-red',
 180                 'icon-size': 0.1
 181
 182             },
 183             'filter': createFilter("street lamp"),
 184         });
 185
 186         map.addLayer({
 187             'id': 'point-building-alarm',
 188             'type': 'symbol',
 189             'source': 'alarmedPoints',
 190             'filter': createFilter("high rise building"),
 191             'layout': {
 192                 'icon-allow-overlap': true,
 193                 'icon-image': 'house-red',
 194                 'icon-size': 0.1
 195             }
 196         });
 197
 198         map.addLayer({
 199             'id': 'point-data-center-alarm',
 200             'type': 'symbol',
 201             'source': 'alarmedPoints',
 202             'filter': createFilter("data center"),
 203             'layout': {
 204                 'icon-allow-overlap': true,
 205                 'icon-image': 'data-center_red',
 206                 'icon-size': 0.1
 207             } });
 208
 209             map.addLayer({
 210                 'id': 'point-factory-alarm',
 211                 'type': 'symbol',
 212                 'source': 'alarmedPoints',
 213                 'filter': createFilter("factory"),
 214                 'layout': {
 215                     'icon-allow-overlap': true,
 216                     'icon-image': 'factory-red',
 217                     'icon-size': 0.2
 218                 }
 219             });
 220
 221
 222
 223     map.addLayer({
 224         id: 'point-remaining',
 225         source: 'points',
 226         type: 'circle',
 227         'filter': ['none', ['==', 'type', "high rise building"], ['==', 'type', "data center"], ['==', 'type', "factory"], ['==', 'type', "street lamp"] ],
 228         paint: {
 229             'circle-color': '#11b4da',
 230             'circle-radius': 7,
 231             'circle-stroke-width': 1,
 232             'circle-stroke-color': '#fff'
 233         }
 234     });
 235
 236     map.addLayer({
 237         'id': 'select-point-lamps',
 238         'type': 'symbol',
 239         'source': 'selectedPoints',
 240         'layout': {
 241             'icon-allow-overlap': true,
 242             'icon-image': 'lamp',
 243             'icon-size': 0.15
 244
 245         },
 246         'filter': ['==', 'type', 'street lamp'],
 247     });
 248
 249     map.addLayer({
 250         'id': 'select-point-buildings',
 251         'type': 'symbol',
 252         'source': 'selectedPoints',
 253         'filter': ['==', 'type', 'high rise building'],
 254         'layout': {
 255             'icon-allow-overlap': true,
 256             'icon-image': 'house',
 257             'icon-size': 0.15
 258         }
 259     });
 260
 261     map.addLayer({
 262         'id': 'select-point-data-center',
 263         'type': 'symbol',
 264         'source': 'selectedPoints',
 265         'filter': ['==', 'type', 'data center'],
 266         'layout': {
 267             'icon-allow-overlap': true,
 268             'icon-image': 'data-center',
 269             'icon-size': 0.15
 270         }
 271     });
 272
 273
 274     map.addLayer({
 275         'id': 'select-point-factory',
 276         'type': 'symbol',
 277         'source': 'selectedPoints',
 278         'filter': ['==', 'type', 'factory'],
 279         'layout': {
 280             'icon-allow-overlap': true,
 281             'icon-image': 'factory',
 282             'icon-size': 0.3
 283         }
 284     });
 285 }
 286
 287  const addCommonLayers = (map: mapboxgl.Map) =>{
 288
 289     map.addLayer({
 290         'id': 'microwave-lines',
 291         'type': 'line',
 292         'source': 'lines',
 293         'layout': {
 294             'line-join': 'round',
 295             'line-cap': 'round'
 296         },
 297         'paint': {
 298             'line-color': microwaveLinkColor,
 299             'line-width': 2
 300         },
 301         'filter': ['==', 'type', 'microwave']
 302     });
 303
 304     map.addLayer({
 305         'id': 'fibre-lines',
 306         'type': 'line',
 307         'source': 'lines',
 308         'layout': {
 309             'line-join': 'round',
 310             'line-cap': 'round'
 311         },
 312         'paint': {
 313             'line-color': fibreLinkColor,
 314             'line-width': 2
 315         },
 316         'filter': ['==', 'type', 'fibre']
 317     });
 318
 319     map.addLayer({
 320         'id': 'selectedLineMicrowave',
 321         'type': 'line',
 322         'source': 'selectedLine',
 323         'layout': {
 324             'line-join': 'round',
 325             'line-cap': 'round'
 326         },
 327         'paint': {
 328             'line-color': microwaveLinkColor,
 329             'line-width': 4
 330         },
 331         'filter': ['==', 'type', 'microwave']
 332     });
 333
 334     map.addLayer({
 335         'id': 'selectedLineFibre',
 336         'type': 'line',
 337         'source': 'selectedLine',
 338         'layout': {
 339             'line-join': 'round',
 340             'line-cap': 'round'
 341         },
 342         'paint': {
 343             'line-color': fibreLinkColor,
 344             'line-width': 4
 345         },
 346         'filter': ['==', 'type', 'fibre']
 347     });
 348 }
 349
 350 export const removeBaseLayers = (map: mapboxgl.Map) => {
 351
 352     map.removeLayer("points");
 353     map.removeLayer("lines");
 354     map.removeLayer('selectedPoints');
 355     map.removeLayer('selectedLine');
 356 }
 357
 358 const removeIconLayers = (map: mapboxgl.Map) =>{
 359
 360     map.removeLayer('point-building');
 361     map.removeLayer('point-lamps');
 362     map.removeLayer('point-data-center');
 363     map.removeLayer('point-factory');
 364     map.removeLayer('point-remaining');
 365     map.removeLayer('select-point-data-center');
 366     map.removeLayer('select-point-buildings');
 367     map.removeLayer('select-point-lamps');
 368     map.removeLayer('select-point-factory');
 369     map.removeLayer('point-building-alarm');
 370     map.removeLayer('point-lamps-alarm');
 371     map.removeLayer('point-data-center-alarm');
 372     map.removeLayer('point-factory-alarm');
 373 }
 374
 375 let checkedLayers = false;
 376
 377 const createFilter = (type:'street lamp'|'high rise building'|'data center'|'factory', selectedSiteId?:string) =>{
 378
 379     return selectedSiteId === undefined ? ['==', 'type', type] : ["all", ['==', 'type', type], ['!=', 'id', selectedSiteId]]
 380 }
 381
 382 export const showIconLayers = (map: mapboxgl.Map, show: boolean, selectedSiteId?: string) => {
 383
 384     const zoom = map.getZoom();
 385
 386         if(show){
 387
 388     if (zoom > 11) {
 389
 390         const bounds = map.getBounds();
 391
 392         if(map.getLayer('points')!== undefined && map.getLayer('point-lamps')===undefined && !checkedLayers){
 393
 394         // if sites don't have a type don't change layers to icons
 395         const elements = map.queryRenderedFeatures( undefined,{
 396                 layers: ['points'], filter:['has', 'type']
 397             });
 398             checkedLayers=true;
 399
 400         if(elements.length>0 && elements.length<1000){
 401
 402         if (map.getLayer('point-lamps') === undefined) {
 403             map.removeLayer('points');
 404             map.setLayoutProperty('alarmedPoints', 'visibility', 'none');
 405             map.setLayoutProperty('selectedPoints', 'visibility', 'none');
 406             createIconLayers(map,selectedSiteId);
 407             //map.moveLayer('point-remaining','selectedPoints');
 408
 409             }
 410         }
 411         }
 412
 413     } else {
 414         swapLayersBack(map);
 415     }
 416 }else{
 417     swapLayersBack(map);
 418 }
 419 }
 420
 421 export const swapLayersBack = (map: mapboxgl.Map) =>{
 422     checkedLayers=false;
 423
 424     if(map.getLayer('selectedPoints') === undefined){
 425         map.addLayer({
 426             id: 'selectedPoints',
 427             source: 'selectedPoints',
 428             type: 'circle',
 429             paint: {
 430                 'circle-color': '#116bda',
 431                 'circle-radius': 9,
 432                 'circle-stroke-width': 1,
 433                 'circle-stroke-color': '#fff'
 434             }
 435         });
 436     }
 437
 438     if(map.getLayer('alarmedPoints') === undefined){
 439         map.addLayer({
 440             id: 'alarmedPoints',
 441             source: 'alarmedPoints',
 442             type: 'circle',
 443             paint: {
 444                 'circle-color': '#CC0000',
 445                 'circle-radius': 9,
 446                 'circle-stroke-width': 1,
 447                 'circle-stroke-color': '#fff'
 448             }
 449         });
 450     }
 451
 452
 453     if (map.getLayer('points') === undefined) {
 454
 455         map.setLayoutProperty('selectedPoints', 'visibility', 'visible');
 456         map.setLayoutProperty('alarmedPoints', 'visibility', 'visible');
 457         removeIconLayers(map);
 458
 459         map.addLayer({
 460             id: 'points',
 461             source: 'points',
 462             type: 'circle',
 463             paint: {
 464                 'circle-color': '#11b4da',
 465                 'circle-radius': 7,
 466                 'circle-stroke-width': 1,
 467                 'circle-stroke-color': '#fff'
 468             }
 469         });
 470
 471         map.moveLayer('points', map.getLayer('selectedPoints').id);
 472     }
 473 }
 474
 475 const addClusterLayers = (map: mapboxgl.Map, data: any) => {
 476     map.addSource('clusters', {
 477         type: 'geojson',
 478         data: data
 479     });
 480
 481     map.addSource('selectedLine', {
 482         type: 'geojson',
 483         data: { type: "FeatureCollection", features: [] }
 484     });
 485
 486     map.addSource('selectedPoints', {
 487         type: 'geojson',
 488         data: { type: "FeatureCollection", features: [] }
 489
 490     });
 491
 492     map.addLayer({
 493         id: 'clusters',
 494         type: 'circle',
 495         source: 'clusters',
 496         filter: ['has', 'count'],
 497         paint: {
 498             'circle-color': [
 499                 'step',
 500                 ['get', 'count'],
 501                 '#51bbd6',
 502                 100,
 503                 '#f1f075',
 504                 750,
 505                 '#f28cb1'
 506             ],
 507             'circle-radius': [
 508                 'step',
 509                 ['get', 'count'],
 510                 20,
 511                 100,
 512                 30,
 513                 750,
 514                 40
 515             ]
 516         }
 517     });
 518
 519
 520     map.addLayer({
 521         id: 'cluster-count',
 522         type: 'symbol',
 523         source: 'clusters',
 524         filter: ['has', 'count'],
 525         layout: {
 526             'text-field': '{count}',
 527             'text-font': ['Roboto Bold'],
 528             'text-size': 12
 529         }
 530     });
 531
 532     map.addLayer({
 533         'id': 'selectedLine',
 534         'type': 'line',
 535         'source': 'selectedLine',
 536         'layout': {
 537             'line-join': 'round',
 538             'line-cap': 'round'
 539         },
 540         'paint': {
 541             'line-color': '#888',
 542             'line-width': 4
 543         }
 544     });
 545
 546     map.addLayer({
 547         id: 'unclustered-points',
 548         source: 'clusters',
 549         filter: ['!', ['has', 'count'],],
 550         type: 'circle',
 551         paint: {
 552             'circle-color': '#11b4da',
 553             'circle-radius': 7,
 554             'circle-stroke-width': 1,
 555             'circle-stroke-color': '#fff'
 556         }
 557     });
 558
 559     map.addLayer({
 560         id: 'selectedPoints',
 561         source: 'selectedPoints',
 562         type: 'circle',
 563         paint: {
 564             'circle-color': '#116bda',
 565             'circle-radius': 9,
 566             'circle-stroke-width': 1,
 567             'circle-stroke-color': '#fff'
 568         }
 569     });
 570
 571 }