How to add Get Capabilties WMTS link from Geoserver to the map through Leaflet

Question

I am new to web mapping and web in general.

I am trying to add the default WMTS Italy mosaic that can be found in GeoServer by default (nurc:mosaic, namely) to my map via Leaflet.

I tried to tweak following code: https://github.com/mylen/leaflet.TileLayer.WMTS

I get the WMTS link simply right clicking on GeoServer's Web Admin page WMTS 1.0.0 and copy the link location. Here it is: http://localhost:8081/geoserver/gwc/service/wmts?REQUEST=GetCapabilities

And here is my code: Demo leaflet.TileLayer.WMTS

// The WMTS URL
var url = "http://localhost:8081/geoserver/gwc/service/wmts?REQUEST=GetCapabilities";

var italy = new L.TileLayer.WMTS( url ,
    {
        layer: 'nurc:mosaic',
        style: "",
        tilematrixSet: "EPSG:4326",
        format: "image/png"
    }
);
var map = L.map('map').setView([37, 24], 4);

L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);



var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);


var baseLayers = {
    "ItalyWMTS" : italy,
    "OpenStreetMap": osm
};

L.control.layers(baseLayers).addTo(map);

And this is my result:

What am I missing ?

Answer 1

I think the issue is projections. You are trying to add an EPSG:4326 tileset (in degrees of latitude and longitude) to a map that is in metres (EPSG:3587). if you zoom in (a lot) near Null Island you should see Italy.

Change the projection of the TileSet to match your map to EPSG:900913, which for historical reasons is what GeoServer calls Web Mercator.

 tilematrixSet: "EPSG:900913",