I am planning to put at least ten single image overlays, spread across the country. I have got two so far:

var priorycourt = 'Priory_court.PNG',
imageBounds = [[52.399892, -1.531154], [52.400837, -1.52945]];
L.imageOverlay(priorycourt, imageBounds).setOpacity(0.75).addTo(map);

var ipswich3a = 'A3Ipswich.svg',
imageBounds = [[52.0303, 1.19047], [52.0326, 1.19624]];
L.imageOverlay(ipswich3a, imageBounds).setOpacity(0.75).addTo(map);

Which won't look good, when it is 70 instead of 2.

I tried to put them in a different js file img.js, although only very first is working, when in my main script remain

 L.imageOverlay(priorycourt, imageBounds).setOpacity(0.75).addTo(map);

Is it possible to create something analogue to L.LayerGroup[priorycourt,ipswich3a]... in order to combine all these image overlays together in one piece?

  • What is it that "won't look good"? Final outcome on screen will be the same if you add layers layer by layer or all of them at once as a group. – TomazicM Aug 13 '19 at 10:07
  • I want to add them as a group. Do you know how to do it? – MKR Aug 13 '19 at 10:31
  • Not sure if you just want to stitch the rasters together as in gis.stackexchange.com/questions/192395/… – IvanSanchez Aug 13 '19 at 13:58
  • Not particularly together, but I am going to have quite a few located randomly across the country. Is it possible to have them as a one layer likewise GeoJSON points? – MKR Aug 13 '19 at 14:15

Create layer group, add image layers to group and then add layer group to map:

var imageOverlays = L.layerGroup();

L.imageOverlay(priorycourt, imageBounds).setOpacity(0.75).addTo(imageOverlays);
L.imageOverlay(ipswich3a, imageBounds).setOpacity(0.75).addTo(imageOverlays);



var priorycourtLayer = L.imageOverlay(priorycourt, imageBounds).setOpacity(0.75);
var ipswich3aLayer = L.imageOverlay(ipswich3a, imageBounds).setOpacity(0.75);

L.layerGroup([priorycourtLayer, ipswich3aLayer]).addTo(map);


var imageLayers = [];

var imageLayers[0] = L.imageOverlay(priorycourt, imageBounds).setOpacity(0.75);
var imageLayers[1] = L.imageOverlay(ipswich3a, imageBounds).setOpacity(0.75);

| improve this answer | |
  • Perfect! Could I place it in the external .js file? – MKR Aug 13 '19 at 13:30
  • If by external .js file you mean what I mean you mean, then of course! And by the way, if answer helped you, basic politeness would require you mark answer as accepted or at least upvote it. – TomazicM Aug 13 '19 at 14:38
  • No worries, will do. For the time being I am involved in another section. For sure I will try your solution. – MKR Aug 13 '19 at 14:40
  • It works! I input it into the external .js and everything is alright. Thank you. I am upvoting with very heavy heart. – MKR Aug 13 '19 at 15:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.