1

I am trying to use TMS in Leaflet to visualize some existing data that already exists in any all GeoServer.

Updated:

The question is:

How could I show the following TMS in Leaflet? What is wrong with the small piece of code? I am using the following code but I only see a Gray map, unfortunately, no error that I can trace it back! TMS in GeoServer works fine as I have included some screenshots/responses here.

         <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>

Responeses 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);

WMS output:

enter image description here

Improve this question
3
  • What is your question?
    – jbalk
    Commented Oct 10, 2017 at 0:47
  • How Could I show the above TMS in LeafLet?
    – Mohsen Sichani
    Commented Oct 10, 2017 at 0:48
  • Does the OpenLayers preview show anything?
    – Inactivated Account
    Commented Oct 10, 2017 at 1:24

1 Answer 1

Reset to default
4

I notice that you are using leaflet v 0.7x. This is rather old and leaflet 1.x is recommended. The -y option is only available in leaflet 1.x. In the older version you need to use the option tms: true (see here):

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);

This is the most obvious reason why your code is not working. However, as per your other question, I am still not sure why you don't use WMS instead of TMS. I have found it to be much more straightforward and you can see examples in the link above.

Improve this answer
0

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.