Using Leaflet WMS Layer from ArcGIS Server?

Question

I am very new to GIS.

I am trying to display a map on a website using leaflet.

The map I want to display is hosted from an arcGIS server here:

http://ags.gis.iastate.edu/ArcGISServer/rest/services/Ortho/andreas/ImageServer

This page lists a number of different interfaces, including WMS. The link to WMS info on the site has an error in it, but can be retrieved here: http://ags.gis.iastate.edu/ArcGISServer/services/Ortho/andreas/ImageServer/WMSServer?request=GetCapabilities&service=WMS

I have a web page set up on the model of the leaflet quickstart guide (leafletjs.com/examples/quick-start.html) And that was displaying the map of London as expected.

I then found documentation on the leaflet L.tileLayer.wms function which gave this example

var nexrad = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
    layers: 'nexrad-n0r-900913',
    format: 'image/png',
    transparent: true,
    attribution: "Weather data © 2012 IEM Nexrad"
});

based on this, I substituted information from the ags.gis.iastate.edu wms capabilities sheet (linked above) and added the addTo(map) as below

var andreas = L.tileLayer.wms("http://ags.gis.iastate.edu/arcgisserver/services/Ortho/andreas/ImageServer/WMSServer", {
    layers: '0',
    format: 'image/png',
    transparent: true,
    attribution: "Andreas atlas © Iowa DNR"
}).addTo(map);

[note I also tried transparent: false]

Result: nothing.

Can anyone point out what is probably a very obvious error, or lack of understanding on my part?

Answer 1

Your piece of code seems to be good in theory. As I used arcGIS/Leaflet in exactly the same way.

But the problem could come from missing spatial reference (or maybe incorrect format (image/png or image/jpeg).

For the spatial reference, here is how Leaflet works :

• Leaflet expects default spatial reference : EPSG:3857 / WGS84
• But you can change it by an other one with JS plugin like Proj4leaflet by Kartena.

It's really easy and helpful. Works like this (for EPSG:3006) :

You define your new crs

// SWEREF99 TM (EPSG:3006) with map's pixel origin at SWEREF99 TM coordinate (0, 0)
var crs = new L.Proj.CRS('EPSG:3006',
  '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
  {
    resolutions: [
      8192, 4096, 2048, 1024, 512, 256, 128
    ],
    origin: [0, 0]
  })

And include it in your map :

var map = new L.Map('map', {
    crs: crs
});

You can find Spatial References here.

Answer 2

Make sure to set the right srs like in the following example where EPSG 4326 is being used. This depends if the service is able to use 4326.

   var government = L.tileLayer.wms('xxx', {
        layers: 'layer_id',
        format: 'image/png',
        version:'1.1.0',
        request:'GetMap',
        srs:'EPSG:4326',
    });