yagajs / leaflet-ng2

Angular.io integration of Leaflet
https://leaflet-ng2.yagajs.org
ISC License
66 stars 26 forks source link

OverlayLayerDirective renders more than one layer at once #440

Open bpatrik opened 5 years ago

bpatrik commented 5 years ago

Describe the bug Using multiple <yaga-tile-layer\> in a <yaga-layers-control\>, the layer control will render all tile layer at once on top of eachother. (Only the top one will be visible.) That uses extra CPU and network traffic unnecessarily. If you select a new layer, it works properly: After selection, only the new layer will be rendered (and loaded over the netwrok).

To Reproduce You can see the issue in the official layer-cotrol demo: https://leaflet-ng2.yagajs.org/latest/examples/layers-control-directive/ You can open the developer console and see that it loads both https://b.tile.opentopomap.org/3/3/4.png https://b.tile.openstreetmap.org/3/3/4.png tiles, but only the topomaps are vidible as the streetmaps are rendered below them.

Expected behavior It should only load one of the tiles/layers and render that one.

Update: Possible 'hack' / workaround:

I have 5 layers in my map in this order:

0) markers 1) paths 2) street 3) satelite 4) hybrid

I wanted to show the markers with paths on the street layer by default. This made the trick:

 ngOnInit(): void {
    let i = 0;
    this.yagaMap.eachLayer(l => {
      if (i++ >= 3) {
        this.yagaMap.removeLayer(l);
      }
    });
  }