3

I have a working react leaflet map that I need to re-define to hold a custom projection (ETRS89 / UTM zone 32N, EPSG:25832), since the default EPSG:3857 WMS request sent by Leaflet is producing a shifted map (so the city administration I am using the data of told me to use their native projection).

I can import proj4leaflet and derfine the projection like this:

import "proj4leaflet";
const crs = new Leaflet.Proj.CRS(
    'EPSG:25832',
    '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs ',
    {
        resolutions: [
            8192, 4096, 2048, 1024, 512, 256, 128,
            64, 32, 16, 8, 4, 2, 1, 0.5
        ],
        origin: [0, 0]
    });

When I add this to my Map:

<Map
  center={center}
  zoom={zoom}
  className="Map"
  onClick={onClick}
  crs={crs}
  >

neither my WMSTileLayer nor my TileLayer will render afterwards. What is the best way of debugging this? Note that I do not have access to the servers I am querying since I am using Open Government Data WMSs, so I cannot see the logs there.

JPA
  • 49
  • 1
  • 5

1 Answers1

0

Thanks, Evan. While putting together a JSFiddle example I found the bug (I had a wrong reference in the Proj4 Library link). 

const crs = new window.L.Proj.CRS

I add here the working example for others as a reference: JSFiddle Example of Proj4 Leaflet Map CRS

JPA
  • 49
  • 1
  • 5