yagajs / leaflet-ng2

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

Layers are deleted from the map but are not deleted from layerGroupProvider #365

Closed AnatolyStrakhov closed 6 years ago

AnatolyStrakhov commented 6 years ago

Hi All, I use image as a map and put other layers (marker, circle marker, geojson) on that. HTML skeleton of component looks like that

  <yaga-map>
    <yaga-zoom-control>
      <yaga-layers-control>
        <yaga-layer-group yaga-overlay-layer="Tags">
          <ul>
            <li *ngFor="let point of points">
              <yaga-circle-marker>
                <yaga-tooltip></yaga-tooltip>
              </yaga-circle-marker>
            </li>
          </ul>
        </yaga-layer-group>
        <yaga-image-overlay>
        </yaga-image-overlay>
      </yaga-layers-control>
    </yaga-zoom-control>
  </yaga-map>

The points is an @Input() of my component. When I change image and points, yaga-map renders it correctly. But if disable and enable the layer, points from all images are shown. Scenario.

  1. Open image1 with points1. Map is correct, points1 are on the image1.
  2. Switch to image2 and points2 by changing inputs of the component. Map is correct, points2 are on the image2.
  3. Disable the group layer of points (using the drop-down layer control on the map). Map is correct, image2 has no points.
  4. Enable the group layer (using the drop-down layer control on the map). Map is incorrect, image2 has both points1 and points 2. The root cause is layers are deleted from the map but are not deleted from layerGroupProvider. marker.directive.js for example In the constructor it has

layerGroupProvider.ref.addLayer(_this);

I changed it to

layerGroupProvider.ref.addLayer(_this);
_this.layerGroupProvider = layerGroupProvider;

Then I see in ngOnDestroy that layerGroupProvider keeps layers already deleted from the map. I added removeLayer() here.

  MarkerDirective.prototype.ngOnDestroy = function() {
    this.removeFrom(this._map);
    this.layerGroupProvider.ref.removeLayer(this);
  };

And it solves the issue. Could you fix it please? Please be sure that other directives are affected too.

atd-schubert commented 6 years ago

Oh thanks! It seems we forgot to adjust the destroy part during the introduction of Angular providers. I will try to fix it as soon as possible...

AnatolyStrakhov commented 6 years ago

Fixed in 1.0.0-rc10. Thank you.