GeoServer WMS Layers not overlaying on OSM base-Leaflet

Question

I would like to understand why I cannot view or see the WMS layers loaded. Based on the investigation I did so far, I am assuming this has to do with base layers projections. My overlays are WGS84, EPSG 4326. Any guidance on how to resolve this?

This is what I currently see:

    <script>
      //Base Layers
      var OSM = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 18
      });

      var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
 });

      var uis_erven = new L.tileLayer.wms("http://localhost:8080/geoserver/Erongo/wms", "Erongo:uis_erven", {
        layers: 'uis_erven',
        format: 'image/png',
        transparent: true,
        attribution: '',
      });

      var uis_erven_layout = new L.tileLayer.wms("http://localhost:8080/geoserver/Erongo/wms", "Erongo:uis_erven_layout", {
        layers: 'uis_erven_layout',
        format: 'image/png',
        transparent: true,
        attribution: '',
      });

      //create the map
      var map = L.map('map', {
        zoomControl:true,
        zoom: 14,
        maxZoom:18,
        minZoom:5,
        center: new L.LatLng(-21.2531795501709, 14.8524971008301),
        fullscreenControl: true,
        layers: [OSM, uis_erven, uis_erven_layout]
      });
      //layer control
      var baseMaps = {
        "OpenStreetMap": OSM,
        "ESRI  World Imnagery": Esri_WorldImagery
      };
      var overlayMaps = {
        "Zonning": uis_erven,
        "Erven Layout": uis_erven_layout,
      };
      L.control.layers(baseMaps, overlayMaps).addTo(map);

    </script>
  </body>

</html>

Answer 1

As the error returned by GeoServer says there are no layers in the request you are making, so no map gets drawn. Looking at the Leaflet manual suggests that you need to provide an options object with the layers parameter in it. So something like this should work:

var uis_erven = new L.tileLayer.wms("http://localhost:8080/geoserver/Erongo/wms", {
        layers: "Erongo:uis_erven",
      });

None of your other options were necessary as I think they are all the default anyway, you can add them back if you need.