0

This question already has an answer here:

The Problem:

I'm pretty new to leaflet and I'm trying to add a outline of the states over my OSM layer via WMS. I've found several tutorials online, some directly from the leaflet website but haven't had any success.

My code:

var map;
var feature;

function load_map() {
    map = new L.Map('map', {zoomControl: true});

    var osmUrl = 'http://<my_server>/osm_tiles/{z}/{x}/{y}.png',
            osmAttribution = 'Map data &copy; 2012 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
            osm = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});

    map.setView(new L.LatLng(0, 0), 3).addLayer(osm);


    var states = L.tileLayer.wms('http://<my_server>:8080/geoserver/States/wms', {
    format: 'img/png',
    transparent: true,
    layers: "null"
    });

    states.addTo(map);
}

window.onload = load_map;

When I open the console in google chrome there are no reported errors with my java script or connecting to the server. When the map is displayed it has no problem displaying the OSM layer, but the WMS layer is missing.

marked as duplicate by Ian Turton May 17 '17 at 12:21

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • 1
    Is 'null' the name of a layer in your WMS that you want to display? I think the layers parameter should be a list of the layers you want to show. – BlakeG Aug 31 '15 at 21:56
  • You were right on that error, I fixed that, unfortunately, I still can't get the layer to display. – btald1331 Sep 1 '15 at 16:06
5

Try "image/png" as your media type, per the change to the load_map function below. img/png is not a valid mime type and may be confusing the WMS. Assuming the layer name is "state_boundaries", this should work:

var states = L.tileLayer.wms('http://<my_server>:8080/geoserver/States/wms',
{
    format: 'image/png',
    transparent: true,
    layers: "state_boundaries"
});
states.addTo(map);
  • This statement would be better as a comment unless you include some reference links as to why "image/png" is supported or a working example... one line answers may be correct but can end up not being overly helpful to future readers as they lack context. – Michael Stimson Sep 1 '15 at 22:31
  • You need at least 50 reputation points to add a comment, except this one, for some reason. – Peter Rushforth Sep 2 '15 at 17:25
  • Yeh, I forget. It's been a long time since I had less than 50 rep.. the restriction is on 'other than yours' so you can add a comment to any of your questions or answers. I see that you've expanded this so it's now a valid answer. Keep up the good work and it wont be long before you get 50 rep. – Michael Stimson Sep 2 '15 at 21:33

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