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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.