CODEWITHSUNDEEP
javascriptleaflet
MarkusAfricanus
MarkusAfricanus

Reputation: 123

Positioning second leaflet tileLayer

I am working with leaflet at the moment and want to add a satellite image to the normal osm map tileLayer. So I managed to convert the image to tiles and setup leaflet to display the tiles.

Unfortunately the image then shows up at corner of the world. I know it is probably because that corner corresponds to the folder-numbers/grid of the tiles. However I need to the image to be in a very specific position. Is there any way I can tell leaflet where to show the custom tileLayer.

I realize that I can technically go and and rename to folders and images the the correct numbers of the area that I want it to be but that is very tedious and you have to do it manually which defeats our goal.

Thanks

Upvotes: 0

Views: 760

Answers (1)

iH8
iH8

Reputation: 28678

Take a look at L.ImageOverlay:

Used to load and display a single image over specific bounds of the map.

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

Reference: http://leafletjs.com/reference-1.2.0.html#imageoverlay

Upvotes: 1

Related Questions