Before I attempt to explain my situation, I'd like to disclose I'm very new to these apps and GIS in general.

There's a public ArgGIS server that I'd like to export a layer from and overlay on an OpenStreetMap map enabled by Leaflet. I've queried the API using the /export REST endpoint with the following parameters:

'dpi': '96',
'transparent': 'true',
'format': 'png8',
'layers': 'show:37,38,40,41,42,43,44,45,46,47',
'bbox': '-11872625.905327085,6573201.834478498,-6540378.812154609,7566271.705959245',
'bboxSR': '102100',
'imageSR': '102100',
'size': '1090,203',
'_ts': '1547504829299',
'f': 'image'

This generates a png that represents the layers I'm interested in. However, I'm having trouble overlaying on the map. I think the confusion is between bbox and lat/long coordinate systems. I'm not sure how to properly center the image on the map so the overlay works. I'm also not able to get it to zoom in properly on the OSM map.

I've tried the following configuration using Leaflet:

var imglayer = './layer.png';
var imgbounds = [[-11872625.905327085,6573201.834478498],[-6540378.812154609,7566271.705959245]];
L.imageOverlay(imglayer, imgbounds).addTo(mymap);

But the image isn't even visible.


L.imageLayer requires LatLng bounds (see https://leafletjs.com/reference-1.4.0.html#imageoverlay). To convert projected coordinates to LatLng, you can use map.options.crs.projection.unproject(point), or in your case L.CRS.EPSG3857.unproject(point), where point must be L.point.

So your image bounds definition should look something like:

var imgbounds = [
  • I think that this unprojects pixel values on the canvas into geographic coordinates. See leafletjs.com/reference-1.4.0.html#point – Stefan Jan 17 at 18:47
  • 1
    @Stefan That is true for map.unproject. – TomazicM Jan 17 at 18:53
  • Wow, cool, I just tested this and the result is LatLng(50.727326, -106.653613),LatLng(56.039443, -58.753223)! :D – Stefan Jan 17 at 19:03

If you are new to GIS it isn't always a great idea to dive straight into web mapping: I would - getting the overlay (png) into a GIS Software package. I'd suggest QGIS 2.18 - it's free (https://qgis.org/en/site/forusers/download.html) Next add anything else you want to see in GIS Then create a leaflet site using GIS2WEB plugin in QGIS (https://docs.qgis.org/2.18/en/docs/training_manual/qgis_plugins/fetching_plugins.html)

These tools will allow you to overlay what you want and so you can at least get a visual idea of what you want to look at rather than trying to 'do it blind' in leaflet.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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