I am attempting to construct a tilelayer link from a local geoserver. the layer is called county and I seem to have set it up correctly to be called as a tilelayer

enter image description here

now as I am following the leaflet documentation http://leafletjs.com/reference-1.2.0.html#tilelayer

I am getting confused on how to construct the URL

here is my code

  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    #map{ height: 100% }

  <div id="map"></div>


  // initialize the map
  var map = L.map('map').setView([40.876,-74.9999], 13);

  // base maps
  var county=L.tileLayer('http://localhost:8080/geoserver/pg_world:county/{z}/{x}/{y}.png').addTo(map);


nothing shows up when I display this in google chrome.

in the console I get this error

enter image description here

how do I properly construct this tilelayer URL?

1 Answer 1


Leaflet assumes that you are providing a template to either a TMS or WMTS REST endpoint. GeoServer doesn't provide a WMTS REST endpoint only KVP so you need to provide a template that matches the TMS endpoint. To find out what yours is download the TMS capabilities document from your home page. You should see a URL like:


Which you can modify to be a template by adding /{z}/{x}/{y}.png to the end of.

  • so I found localhost:8080/geoserver/gwc/service/tms/1.0.0/… but it wont display. even after I add /{z}/{x}/{y}.png
    – ziggy
    Oct 4, 2017 at 12:19
  • still cannot figure out the syntax here
    – ziggy
    Oct 5, 2017 at 15:37
  • can you request tiles in the browser bar by adding /0/0/0.png ? if not then you have broken your layer else you have a leaflet issue
    – Ian Turton
    Oct 5, 2017 at 15:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.