Leaflet WMS, loading tiles in EPSG:25833 problem

Question

I would like to load tiles from WMS into my Leaflet application. I am using react but help in vanilla JS will be sufficient as well. All I have is WMS URL: https://fbinter.stadt-berlin.de/fb/wms/senstadt/berlinzoom_sw. I am using proj4leaflet for projection because tiles are in CRS: EPSG:25833. When I request tiles from this link using my code I get in Response Header Content-Type: application/vnd.ogc.se_xml (instead correct content-type: image/jpeg) therefore tiles are not shown. –

This is my code:

import React from "react";
import {
  Map as LeafletMap,
  WMSTileLayer,
} from "react-leaflet";
import "./Map.css";

import Proj from "proj4leaflet";

class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = { lat: 51.505, lng: -0.09, zoom: 13 };
  }

  render() {
    return (
      <LeafletMap
        center={[13.370550286394405, 52.52282951722921]}
        zoom={3}
        className={"map"}
        crs={
          new Proj.CRS(
            "EPSG:25833",
            "+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs",
        {
          resolutions: [
            140, 70.0, 27.999999999999996, 13.999999999999998,
            6.999999999999999, 2.8, 1.4, 0.7, 0.28, 0.2, 0.14,
          ], 
        }
          )
        }
      >
            <WMSTileLayer
              url={
                "https://fbinter.stadt-berlin.de/fb/wms/senstadt/berlinzoom_sw"
              }
            />
      </LeafletMap>
    );
  }
}

export default Map;

When I request tiles from this link using my code I get in Response Header Content-Type: application/vnd.ogc.se_xml (instead correct content-type: image/jpeg) therefore tiles are not shown.

Answer 1

If you would have looked in the contents of the response, you would see the following:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ServiceExceptionReport SYSTEM "http://schemas.opengis.net/wms/1.1.1/exception_1_1_1.dtd">
<ServiceExceptionReport version="1.1.1">
  <ServiceException code="InvalidParameterValue">Parameter layers is empty</ServiceException>
</ServiceExceptionReport>

WMS GetCapabilities request shows there is layer named 0 under the main berlinzoom_sw layer. If this layer name is included in the request, it works.

That's what worked for me in plain Leaflet:

L.TileLayer.wms('https://fbinter.stadt-berlin.de/fb/wms/senstadt/berlinzoom_sw', {
  layers: '0',
  crs: crs,
}).addTo(map);

And one more thing. Standard Leaflet has [lat, lng] coordinate order. I suppose it's the same in React, so your center should be

center = {[52.52282951722921, 13.370550286394405]}