Add leaflet ImageOverlay to Layers Control

Question

I use leaflet with the Angular package ngx-leaflet and just trying to get my layer for ImageOverlays in my LayersControl, so I can show or hide this layer in the map based on a checkbox. Somehow it does not work as described in the documentation.

Can someone help me with this?

..here is my html template:

<div leaflet
     [leafletOptions]="options"
     [leafletLayersControl]="layersControl"
     [leafletMarkerCluster]="_markerCluster"
     ">
</div

..and here is the component:

...

this.overlay = L.imageOverlay(props.ref, props.bounds, this.options);
map.addLayer(this.overlay);

layersControl = {
  baseLayers: {
    'Open Street Map': this.openStreetMap,
  },
  overlays: {
    'GeoJSONs': this.featureGroup,
    'Image Overlay': this.overlay
  }
};

...

Answer 1

It really plays an important role the image bounds definition. So make sure you set the appropriate ones. Here is an example of an image overlay with ability to switch it as an overlay using ngx-leaflet & angular:

on ts:

openStreetMap = tileLayer(
    "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    { maxZoom: 18, attribution: "..." }
);

// Use the image bounds to align the image properly
imageUrl = "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg";
imageBounds: L.LatLngBoundsExpression = [
    [-33.865, 151.2094],
    [-35.865, 154.2094]
];
imageOverlay = imageOverlay(this.imageUrl, this.imageBounds);

layersControl = {
    baseLayers: {
      "Open Street Map": this.openStreetMap
    },
    overlays: {
      "Image Overlay": this.imageOverlay
    }
 };

on template:

<div
  style="height: 100vh;"
  leaflet
  [leafletOptions]="options"
  [leafletLayersControl]="layersControl"
  (leafletMapReady)="onMapReady($event)"
></div>

optionally use map.fitBounds(this.imageOverlay.getBounds()); to fit the image overlay in the center of the map zoomed.

Demo