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
  }
};

...

score 1 · Accepted Answer · answered Apr 01 '19 at 20:09

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

answered Apr 01 '19 at 20:09

kboul

13,836
5
42
53

My approach is actually quite similar to your approach. But I'd like to add multiple ImageOverlays and provide them as a single layer to show and hide within the Layers control. My ImageOverlays are created within a subscription that creates an ImageOverlay for multiple locations. Is there a way to put multiple ImageOverlays in an array and add them as a single layer to the map? – Codehan25 Apr 01 '19 at 21:20
This is a different question and you did very well asking it in a separate thread as it was not included in this question. Therefore if you think that my answer solved your issue for the one image overlay (which is what you asked for) please accept it and/or upvote it. – kboul Apr 02 '19 at 10:01
1

I have confirmed your answer. Can you help me with the question also? – Codehan25 Apr 02 '19 at 10:41
1

I will take a look at your question as soon as I find some time :) – kboul Apr 02 '19 at 10:46

Add leaflet ImageOverlay to Layers Control

1 Answers1