Return to Revisions

5 of 5

added 206 characters in body; edited title

edited Oct 10, 2017 at 18:49

Leaflet shows a Gray area with GeoServer TMS

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:

asked Oct 10, 2017 at 0:16

Mohsen Sichani