How to make baseLayers & overlays selected by default using @asymmetrik/ngx-leaflet

Question

stackblitz code@asymmetrik/ngx-leaflet

How to make baseLayers & overlays selected by default ? I have used layersControl to show these baseLayers and overlays.

Answer 1

Replace all your app.component.ts content with this:

import { Component, OnInit } from "@angular/core";
import { tileLayer, marker } from "leaflet";
declare let L;

// the best thing is to separate this (you can also do is in external file modal.ts for example)
const LayersForMap = {
  layer1: tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
    maxZoom: 30,
    minZoom: 12
  }),
  layer2: tileLayer(
    "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    { maxZoom: 30, minZoom: 12 }
  ),
  layer3: tileLayer("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
    maxZoom: 30,
    minZoom: 12
  }),
  layer4: tileLayer("", { maxZoom: 100, minZoom: 12 })
};

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  // attributs
  name = "Angular";
  options: any;
  layersControl: any;

  ngOnInit() {
    this.init();
  }

  //
  init() {
    this.options = this.getOptions();
    this.layersControl = this.getLayerControls();
  }
  getOptions() {
    this.options = {
      layers: [LayersForMap.layer1 /* your problem was exactly here ... */],
      zoom: 5,
      center: L.latLng(46.879966, -121.726909)
    };
    return this.options;
  }

  getLayerControls() {
    this.layersControl = {
      baseLayers: {
        "Topo Map": LayersForMap.layer1,
        Imagery: LayersForMap.layer2,
        Outdoors: LayersForMap.layer3,
        None: LayersForMap.layer4
      },
      overlays: {
        "example overlays": this.exampleOverlays()
      }
    };
    return this.layersControl;
  }

  exampleOverlays() {
    const mark = marker(L.latLng(46.879966, -121.726909)).bindTooltip(
      "this is example of overlays"
    );
    return mark;
  }
}

Answer 2

To enable baselayers and overlays by default, you have to add them to the map. The easiest way to do this is to add them to an array you bind to [leafletLayers].

There's an example of how to do this in the demo that is included in the ngx-leaflet GitHub repo. Check out the README in the repo for instructions on how to run it. The demo actually enabled the baselayers and overlays based on the check state of a form. The demo code is included under the ngx-leaflet/src/demo/app/leaflet/layers/layers-demo.component.*.

I've included a simplified version below.

Snippet from the Template:

<div leaflet style="height: 300px;"
     [leafletOptions]="options"
     [leafletLayers]="layers"
     [leafletLayersControl]="layersControl">
</div>

Snippet from the component:

    // Values to bind to Leaflet Directive
    layers: Layer[];
    layersControl = {
        baseLayers: {
            'Open Street Map': this.LAYER_OSM.layer,
            'Open Cycle Map': this.LAYER_OCM.layer
        },
        overlays: {
            Circle: this.circle.layer,
            Square: this.square.layer,
            Polygon: this.polygon.layer,
            Marker: this.marker.layer,
            GeoJSON: this.geoJSON.layer
        }
    };
    options = {
        zoom: 10,
        center: latLng(46.879966, -121.726909)
    };

    constructor() {
        // This is different from the demo, just set them manually
        this.layers = [
            this.LAYER_OSM.layer,
            this.circle.layer,
            this.square.layer
         ];
    }