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

  • What is your question? – jbalk Oct 10 '17 at 0:47
  • How Could I show the above TMS in LeafLet? – mohsen hs Oct 10 '17 at 0:48
  • Does the OpenLayers preview show anything? – DPSSpatial Oct 10 '17 at 1:24
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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