[GIS] Trying to get WMTS layer in Leaflet, but get error 400 (out of range)

geoserverleaflettileswmswmts

I'm trying to use https://github.com/mylen/leaflet.TileLayer.WMTS to get a wmts layer into my leaflet map, but the error 400 is generated and when I look at the tile it says out of range.

While testing my wmts with Tile Layers preview on geoserver it works.

I get this error:

enter image description here

And the xml says: 

<ExceptionReport xmlns="http://www.opengis.net/ows/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.1.0" xsi:schemaLocation="http://www.opengis.net/ows/1.1 http://geowebcache.org/schema/ows/1.1.0/owsExceptionReport.xsd">
<Exception exceptionCode="TileOutOfRange" locator="TILECOLUMN">
<ExceptionText>
Column 153578 is out of range, min: 34192791178 max:34202250898
</ExceptionText>
</Exception>
</ExceptionReport>

So out of range. I have been trying different zoom levels and centres.

Here is my code: 

<html>
    <head>
        <title>Demo leaflet.TileLayer.WMTS</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>        
        <script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script>
    </head>
    <body>
        <div id="map" style="height: 100%; width: 100%"></div>
        <script>

// You can get a key here: http://api.ign.fr/accueil (french)

/** Define the layer type
 *  GEOGRAPHICALGRIDSYSTEMS.MAPS
 *  GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE
 *  GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD
 */

// The WMTS URL 
var url = "https://test/geoserver/gwc/service/wmts/";

var ign2 = new L.TileLayer.WMTS( url ,
                               {
                                   layer: "2017-05-05",
                                   style: "NDVI",
                                   tilematrixSet: "EPSG:3857",
                                   format: "image/png"
                               }
                              );

var map = L.map('map').setView([-10.346541321, 30.965654654], 20);
L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);

map.addLayer(ign2);
var baseLayers = {"Carte IGN" : ign2};

L.control.layers(baseLayers, {}).addTo(map);  


        </script>
    </body>
</html>

Best Answer

It looks like you are zooming into an area very close to Null Island.

If your map is in EPSG:3857, then the area you want to look at is unlikely to be centred on (-10,30) as that is on the (imaginary) Null Island, so assuming you are really interested in Zambia you should centre the map at (3447080 -1158083).

Related Question