Error when yaga-marker is updated on disabled layer

[AnatolyStrakhov]

Hi All,

I use the following HTML template.

  <yaga-map>
    <yaga-zoom-control>
      <yaga-layers-control>
        <yaga-layer-group yaga-overlay-layer="Layer">
          <yaga-marker [lat]="obj.yPixel" [lng]="obj.xPixel">
            <yaga-icon [iconUrl]="obj.url" [iconSize]="objSize">
              <yaga-tooltip [content]="obj.label"></yaga-tooltip>
            </yaga-icon>
          </yaga-marker>
        </yaga-layer-group>
      </yaga-layers-control>
    </yaga-zoom-control>
  </yaga-map>

obj is updated periodically. When I disable Layer through the layer control, updates fail with the error

ERROR TypeError: Cannot read property 'enable' of undefined
    at new MarkerDirective (marker.directive.js:123)
    at createClass (core.es5.js:10916)
    at createDirectiveInstance (core.es5.js:10751)
    at createViewNodes (core.es5.js:12192)
    at createEmbeddedView (core.es5.js:12070)
    at callWithDebugContext (core.es5.js:13467)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.es5.js:12800)
    at TemplateRef_.createEmbeddedView (core.es5.js:10264)
    at ViewContainerRef_.createEmbeddedView (core.es5.js:10041)
    at eval (common.es5.js:1705)

Could you fix it please?

[atd-schubert]

I cannot reproduce this error. Maybe you run other code in addition?

FYI: While reading the structure of your HTML code, I guess you want to use the yaga-feature-group instead of yaga-layer-group...

Do you still have an error? Can you provide me some more code or circumstances?

[atd-schubert]

I will close this issue. If you still have problems feel free to reopen this issue again...

[AnatolyStrakhov]

Hi @atd-schubert. Sorry for long delay. I prepared a component which reproduces the issue. 2 corrections for my first post.

1. Array of class objects is used.
2. ngFor is used.

import { Component, Input } from '@angular/core';
import { CRS, latLng, LatLngBounds, Util } from 'leaflet';
import { LayerProvider, LayersControlProvider, LayerGroupProvider } from '@yaga/leaflet-ng2';
import * as L from 'leaflet';

@Component({
  providers: [LayerProvider, LayersControlProvider, LayerGroupProvider],
  selector: 'indoor-map',
  template: `<div>
    <yaga-map [zoom]="0" [minZoom]="0" [maxZoom]="5" [maxBounds]="bounds" [draggingEnabled]="draggable" [boxZoomEnabled]="true" [crs]="crs">
      <yaga-zoom-control>
        <yaga-layers-control>
          <yaga-layer-group yaga-overlay-layer="Layer">
          <ul>
            <li *ngFor="let obj of objs">
            <yaga-marker [lat]="200" [lng]="100">
              <yaga-icon [iconUrl]="'https://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg'" [iconSize]="objSize">
                <yaga-tooltip [content]="obj.label"></yaga-tooltip>
              </yaga-icon>
            </yaga-marker>
            </li>
          </ul>
          </yaga-layer-group>
          <yaga-image-overlay [url]="'http://dondodge.typepad.com/.a/6a00d8341bf9da53ef017d4287d90c970c-pi'" [bounds]="bounds">
          </yaga-image-overlay>
        </yaga-layers-control>
      </yaga-zoom-control>
    </yaga-map>
  </div>`,
  styles: ['.yaga-map {width: 1280px;height: 1024px;}']
})
export class IndoorMapComponent {

  public objs: Label[] = [];
  public objSize: L.Point = new L.Point(48, 48);

  public crs: CRS = Util.extend(CRS.Simple, {
    transformation: new L.Transformation(1, 0, 1, 0)
  });

  public bounds: LatLngBounds = new LatLngBounds(latLng(0, 0), latLng(1024, 1280));

  constructor() {
    this.objs = [new Label('label')];
    setInterval(() => {
      this.objs = [new Label('label')];
    }, 1000);
  }
}

export class Label {
  public label: string;

  constructor(label: string) {
    this.label = label;
  }
}

Just disable Layer in the layer control and monitor the browser's console.

I did not find how to reopen the issue (may be I have no permissions). Could you do it please?