I am trying to use TMS in Leaflet to visualize some existing data that already exists in any GeoServer. So this is my code and still does not work. So the question is:
How could I show the following TMS in Leaflet?
<html>
<head>
<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>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([-104.0625,44.296875], 9);
// base maps
var county=L.tileLayer('http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/{z}/{x}/{-y}.png').addTo(map);
</script>
</body>
</html>
From TMS server
<TileMap title="Spearfish roads" srs="EPSG:4326" profile="global-geodetic" href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png"/>
<TileMap title="Spearfish roads" srs="EPSG:4326" profile="global-geodetic" href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@jpeg"/>
<TileMap title="Spearfish roads" srs="EPSG:900913" profile="global-mercator" href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A900913@png"/>
<TileMap title="Spearfish roads" srs="EPSG:900913" profile="global-mercator" href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A900913@jpeg"/>
Url
http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png
reposne:
<TileMap version="1.0.0" tilemapservice="http://localhost:9090/geoserver/gwc/service/tms/1.0.0">
<Title>Spearfish roads</Title>
<Abstract>
Sample data from GRASS, road layout, Spearfish, South Dakota, USA
</Abstract>
<SRS>EPSG:4326</SRS>
<BoundingBox minx="-104.0625" miny="44.296875" maxx="-103.359375" maxy="45.0"/>
<Origin x="-104.0625" y="44.296875"/>
<TileFormat width="256" height="256" mime-type="image/png" extension="png"/>
<TileSets profile="global-geodetic">
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/0" units-per-pixel="0.703125" order="0"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/1" units-per-pixel="0.3515625" order="1"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/2" units-per-pixel="0.17578125" order="2"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/3" units-per-pixel="0.087890625" order="3"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/4" units-per-pixel="0.0439453125" order="4"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/5" units-per-pixel="0.02197265625" order="5"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/6" units-per-pixel="0.010986328125" order="6"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/7" units-per-pixel="0.0054931640625" order="7"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/8" units-per-pixel="0.00274658203125" order="8"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/9" units-per-pixel="0.001373291015625" order="9"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/10" units-per-pixel="6.866455078125E-4" order="10"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/11" units-per-pixel="3.4332275390625E-4" order="11"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/12" units-per-pixel="1.71661376953125E-4" order="12"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/13" units-per-pixel="8.58306884765625E-5" order="13"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/14" units-per-pixel="4.291534423828125E-5" order="14"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/15" units-per-pixel="2.1457672119140625E-5" order="15"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/16" units-per-pixel="1.0728836059570312E-5" order="16"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/17" units-per-pixel="5.364418029785156E-6" order="17"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/18" units-per-pixel="2.682209014892578E-6" order="18"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/19" units-per-pixel="1.341104507446289E-6" order="19"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/20" units-per-pixel="6.705522537231445E-7" order="20"/>
<TileSet href="http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/21" units-per-pixel="3.3527612686157227E-7" order="21"/>
</TileSets>
I have also tried this
var county=L.tileLayer('http://localhost:9090/geoserver/gwc/service/tms/1.0.0/sf%3Aroads@EPSG%3A4326@png/{z}/{x}/{y}.png', { tms: true }).addTo(map);
Just a gray map!
WMS output:
[![enter image description here][1]][1]
[1]: https://i.sstatic.net/3ZEJP.jpg