Add layers control

[vdealmeida]

Hi,

I want to use your plugin in my projet but I've got a little problem... I try to add layers control but I didn't figure out to do it with your plugin.

Can you help me plz ?

[atd-schubert]

At the moment we don't have a "native" support of the Layers-Control. The implementation is not easy and we have different ideas how to realize the implementation.

At the moment I would recommend to do the following:

1. Register layers in your view and add an identifier

<yaga-map>
    <yaga-tile-layer #osm [url]="'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'" [attribution]="'© OpenStreetMap-Contributors'"></yaga-tile-layer>
    <yaga-tile-layer #otm [url]="'http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'" [attribution]="'© OpenTopoMap-Contributors'"></yaga-tile-layer>

    <!-- ... -->
</yaga-map>

2. Add the Layers-Control to the map-component within the view-controller and "import" the corresponding layers from the view-child

import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { MapComponent, TileLayerDirective } from "@yaga/leaflet-ng2";
import { Control } from "leaflet";

@Component({
  // ...
})
export class AppComponent implements AfterViewInit {
  @ViewChild("otm", {read: TileLayerDirective }) private openTopoMapLayer: TileLayerDirective;
  @ViewChild("osm", {read: TileLayerDirective }) private openStreetMapLayer: TileLayerDirective;
  @ViewChild(MapComponent) private mapComponent: MapComponent;

  public ngAfterViewInit() {
    const layerControl = new Control.Layers({"Open Street Map": this.openStreetMapLayer, "Open Topo Map": this.openTopoMapLayer});
    this.mapComponent.addControl(layerControl);
  }
}