1

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.

2
  • Ok so 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.
    – gikdeb
    Aug 29 at 11:40
  • nah, a XML response usually packs an error message. Better to use the browser's network inspector and see that message. Aug 29 at 14:11
2

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]}
6
  • Thank You, that is perfect solution. Ive spent tones of time on this.
    – gikdeb
    Aug 29 at 18:16
  • By the way do You know how to access list of layers via code (not using web inspector)?
    – gikdeb
    Aug 29 at 18:51
  • As I wrote in the answer, this is done by WMS GetCapabilities request. In your case that would be: https://fbinter.stadt-berlin.de/fb/wms/senstadt/berlinzoom_sw?service=WMS&request=GetCapabilities.
    – TomazicM
    Aug 29 at 19:05
  • Yes I understand, so let me rephrase my question. Is it possible to access only list of available layers from this request and lets say, assign it to variable in my code?
    – gikdeb
    Aug 29 at 19:22
  • 1
    Yes, if you have a parser of GetCapabilities results. No such parser is built in in Leaflet, so you have to find one on the web. For example, one would be github.com/w8r/wms-capabilities, but I have not tried it.
    – TomazicM
    Aug 29 at 20:14

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.