0

I am trying to add a WMS layer to my leaflet map. When I add the layer it shows up but the the outside of the layer is grey instead of a world map.

This is my code:

<!DOCTYPE html -->
<html>
<head>
<title> leaflet webviewer with Geoserver</title>
<!--Load the style stylesheet of leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<!--Load leaflet -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

  <!--Load vectorGrid plugin for Leaflet -->
  <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>


<style>
/*Set the dimensions of our map */
.map {
height: 100%;
width: 100%;
}
</style>

</head>
<body>
<!--Create our map object -->
<div id="map" class="map"></div>
</body>
</html>

<script>
// Find our map id
var map = L.map('map')
// Set open openstreetmap
L.tileLayer(
      "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
      {
        // attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 20,
        minZoom: 5,
        zoom: 16,
        id: "mapbox/streets-v11",
        accessToken:
          "API CODE"
      }
    ).addTo(map);


    var wmsLayer= L.tileLayer.wms("http://localhost:8080/geoserver/nyc_roads/wms", {
        layers: 'nyc_roads:tiger-ny',
        transparent: true,
        format: 'image/png',
    });
    map.addLayer(wmsLayer);

// Set our initial location and zoomlevel
map.setView([40.712776, -74.005974], 6);


</script>

This is the result of the code:

Result

I do not understand what I am doing wrong and why the outside of the layer is not transparent.

Any help/ tips are welcome.

Improve this question
4

The tiger-ny group contains a layer called giant_polygon which is coloured grey to make the background look "nice". If you want it to be transparent leave that layer out of your request.

Improve this answer
1

Apperently I just used the wrong layer. I tried to do the same thing with a other layer and that one was png.

I thought I could change the grey background to a transparrent background but I was wrong

I changed my code

From this:

var wmsLayer= L.tileLayer.wms("http://localhost:8080/geoserver/nyc_roads/wms", {
        layers: 'nyc_roads:tiger-ny',
        transparent: true,
        format: 'image/png',
    });
    map.addLayer(wmsLayer);

To This:

var wmsLayer= L.tileLayer.wms("http://localhost:8080/geoserver/nyc_roads/wms", {
    layers: 'nyc_roads:nyc_roads',
    transparent: true,
    format: 'image/png',
});
map.addLayer(wmsLayer);

This is the result of my code now. The only thing I changed is the Layer name.

enter image description here

Improve this answer

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.