1

I have a wmts server, and try to add this tiles to leaflet with proj4leaflet. My code is here

//this one is fine
     var main = L.tileLayer(
          'http://****&zoom={z}&x={x}&y={y}', {
            attribution: '<a href="http://www.000.com/">Maps</a>'
          })

//this one uses EPSG:25832
     var url =
          "https://****/gk/gk.nib_utm32_wmts_v2?&gkt=673B1E78E90DBCB2073CC248B949B95CE5156C8E47F6E53B68C0F2A903F3C4C1BC9F3C9E2E1D16E437B7E784B683185C5A8F6E3ADF7BD0828D018F0853CD0DA1";
        var ign2 = new L.TileLayer.WMTS(url, {
          layer: "UTM32_EUREF89",
          style: "default",
          tilematrixset: "default028mm",
          format: "image/png",
          height: 256,
          width: 256,
        });


        var crs = new L.Proj.CRS('EPSG:25832', "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs",new L.Transformation(1, 0, -1, 0));
        map = new L.Map('mapid', {
          crs: crs,
          continuousWorld: true,
        });
        map.addLayer(main);
        map.addLayer(ign2);
        map.setView([50,4], 4);
        L.marker({
          "lat": 59.87891,
          "lng": 8.59411
        }).bindPopup('Test projection').addTo(map)

So this code does not work. I got an error saying Uncaught TypeError: Cannot read property '4' of undefined on this line map.setView([50,4], 4);

When I comment this line crs:crs here

 map = new L.Map('mapid', {
              //crs: crs,
              continuousWorld: true,
            });

I got this result, so I have to scale down and move that big Norway.

enter image description here

Got this info in tiles xml

<TileMatrix>
<ows:Identifier>0</ows:Identifier>
<ScaleDenominator>7.737142857141884E7</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>2</MatrixWidth>
<MatrixHeight>2</MatrixHeight>
</TileMatrix>
<TileMatrix>
<ows:Identifier>1</ows:Identifier>
<ScaleDenominator>3.868571428570942E7</ScaleDenominator>
<TopLeftCorner>-2000000.0 9045984.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>3</MatrixWidth>
<MatrixHeight>3</MatrixHeight>
</TileMatrix>
<TileMatrix>

UPD: Added resolutions from xml ScaleDenominator

var resol = [77371428.57141884,38685714.28570942,19342857.14285471,9671428.571427355,4835714.285713677,2417857.1428568386,1208928.5714284193,604464.2857142097,302232.14285710483,151116.07142855242,75558.03571427621,37779.017857138104,18889.508928569052,9444.754464284526,4722.377232142263,2361.1886160711315,1180.5943080355657,590.2971540177829];
    var crs = new L.Proj.CRS('EPSG:25832', "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs", {
      resolutions: resol
    });
    map = new L.Map('mapid', {
      crs: crs,
      continuousWorld: true,
    });

Nothing( 400 (Bad Request) from server). But with resol.reverse() got this, and zoom out when zoom in (that is because of reverse as I understand)

enter image description here

  • 1
    What happens if you remove the map.setView and the marker? – inc42 Dec 9 '18 at 10:55
  • 1
    I would say that scales (or resolutions) option is missing in CRS definition. And on other thing: you cannot mix layers with different CRSs in one map. – TomazicM Dec 9 '18 at 11:10
  • 1
    You have to specify actual resolutions of the map you are using. You can see the first two in your tiles xml above: 7.737142857141884E7 and 3.868571428570942E7. – TomazicM Dec 9 '18 at 18:16
  • 1
    @SERG Try adding origin option. In your case it would be origin: [-2000000.0, 9045984.0]. – TomazicM Dec 10 '18 at 16:18
  • 1
    As I wrote in my first comment: you cannot mix layers with different CRSs in one map. – TomazicM Dec 10 '18 at 20:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.