How to select(marked as checked) layer on pageload in leaflet.js using ngx-leaflet with angular8?

I integrated the leaflet map in angular using ngx-leaflet. On this map, I overlay the 4 to 5 layers (e.g. Incidents, Interventions, blackspots, regions). I want the first overlay (i.e.Incidents) marked as a checked. My .html code :-

`<div *ngIf="dataLoaded" class="map records-map" leaflet leafletDraw [leafletOptions]="options"
     [leafletLayersControl]="layersControl" [leafletDrawOptions]="drawOptions"
     (leafletMapReady)="onMapReady($event)" [leafletLayers]="layers1"></div>`

My .ts code:-

   this.layersControl = {
                    baseLayers: {
                      'STREETS': this.streetMaps,
                      'SATELLITE': this.wMaps
                    },
                    overlays: {
                      'INCIDENTS': new L.LayerGroup(this.layers1),
                      'INTERVENTIONS': new L.LayerGroup(this.layers2),
                      'HEATMAP': circle([46.95, -122], { radius: 5000 }),
                      'BLACKSPOTS': this.route,
                      'CITY/PROVINCE': geoJSON(result1, options1),
                      'REGIONS': geoJSON(result2, options),
                    }
                  };


                  // Set the initial set of displayed layers (we could also use the leafletLayers input binding for this)

                  this.options = {
                    layers: [this.streetMaps],
                    zoom: 6,
                    center: latLng([this.lat,this.long])
                  };

Solution

The layers you add to the array bound to [leafletLayers] should get checked/selected in the layers control. The demo code has a more complicated example of this.

Here is a simpler version in which the circle and polygon are initially checked:


LAYER_OCM = tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Open Cycle Map'
});
LAYER_OSM = tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Open Street Map'
)};

circle = circle([ 46.95, -122 ], { radius: 5000 });
polygon = polygon([[ 46.8, -121.85 ], [ 46.92, -121.92 ], [ 46.87, -121.8 ]]);
geoJSON = geoJSON(
    ({
        type: 'Polygon',
        coordinates: [[
            [ -121.6, 46.87 ],
            [ -121.5, 46.87 ],
            [ -121.5, 46.93],
            [ -121.6, 46.87 ]
        ]]
    }) as any,
    { style: () => ({ color: '#ff7800' })}
);

layers: Layer[ this.LAYER_OSM, this.circle, this.polygon ];
layersControl = {
    baseLayers: {
        'Open Street Map': this.LAYER_OSM,
        'Open Cycle Map': this.LAYER_OCM
    },
    overlays: {
        Circle: this.circle,
        Polygon: this.polygon,
        GeoJSON: this.geoJSON
    }
};
options = {
    zoom: 10,
    center: latLng(46.879966, -121.726909)
};