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.

  • If your code is copy/paste then one thing is definitely wrong: imageUrl in L.imageOverlay call should be imglayer. – TomazicM Jan 16 '19 at 18:45
  • @TomazicM, I should have copy/pasted...I just transcribed wrong. – fglleo7 Jan 16 '19 at 21:40
  • What is your crs? – TomazicM Jan 16 '19 at 21:59
  • The CRS is ESRI:102100 (bboxSR) spatialreference.org/ref/sr-org/6928 – Stefan Jan 16 '19 at 22:07
  • ...which according to Wikipedia is EPSG:3857. – Stefan Jan 16 '19 at 22:18

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 '19 at 18:47
  • 1
    @Stefan That is true for map.unproject. – TomazicM Jan 17 '19 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 '19 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 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.