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 © <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:
I do not understand what I am doing wrong and why the outside of the layer is not transparent.
Any help/ tips are welcome.