6

I have managed to :

1) Create layers
2) Applied SLD Styles
3) Group the layers together and able to preview

What I have is this(layer preview): enter image description here

I would now want to serve this layer via tiles. Something like what open street map does, an example would be, https://a.tile.openstreetmap.org/14/12917/8131.png as my mobile application will be getting the map tiles from this server itself.

How do I go about doing this? Leaflet?

Based on BradHards's Suggestion, I have installed geowebcache and am trying to serve tms /wtms with some problems.

This is my WMTS get capabilties file Link here, and TMS is here

<TileMap title="OSM layerGroup" srs="EPSG:900913" profile="global-mercator" href="http://10.18.144.176:8181/geowebcache/service/tms/1.0.0/OSM+layerGroup@EPSG%3A900913@png"/> <TileMap title="OSM layerGroup" srs="EPSG:4326" profile="global-geodetic" href="http://10.18.144.176:8181/geowebcache/service/tms/1.0.0/OSM+layerGroup@EPSG%3A4326@png"/>

I have tried using TMS, for example a working link in my local client produces something like this: http://localhost:8181/geowebcache/service/tms/1.0.0/osm_sgmy@EPSG%3A900913@png%22/1/1/1.png

enter image description here

using another test link would result in this: http://localhost:8181/geowebcache/service/tms/1.0.0/osm_sgmy@EPSG%3A900913@png%22/1/2/2.png

Coverage [minx,miny,maxx,maxy] is [-1, 0, 2, 1, 1], index [x,y,z] is [2, 2, 1]

This is my geowebcache-core-context.xml file config snippet:

 <bean id="gwcWMSConfig" class="org.geowebcache.config.GetCapabilitiesConfiguration"> <constructor-arg ref="gwcGridSetBroker"> </constructor-arg> <!-- <constructor-arg value="http://10.18.144.176:8080/geoserver/osm/wms?service=WMS&amp;version=1.1.0&amp;request=GetCapabilities"> --> <constructor-arg value="http://10.18.144.176:8080/geoserver/osm_sgmy/wms?service=WMS&amp;version=1.1.0&amp;request=GetCapabilities"> <description>The URL to the WMS GetCapabilities document, notice &amp; , port is normally 8080</description> </constructor-arg> <constructor-arg value="image/png"> <description>The formats to support for all layers read for the above document</description> </constructor-arg> <constructor-arg value="3x3"> <description>Metatiling factors, 3x3 is usually a good compromise for vector data</description> </constructor-arg> <constructor-arg value="map=/osgeo/mapserver/msautotest/world/world.map"> <description> Vendor parameters, these are appended to every request sent to the backend. If you use MapServer you probably want to set this to "map=name". Leave the value attribute empty if you don't need to add any vendor specific parameter. </description> </constructor-arg> <constructor-arg value="false"> <description>Whether to allow cached=false to specificed for certain requests</description> </constructor-arg> <property name="primaryConfig" ref="gwcXmlConfig"> <description>The configuration object with the global defaults to use for new layers</description> </property>

In summary, I want to make my geoserver/geowebcache able to serve tiles in a X/Y/Z format like:

http://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}

Improve this question
3
  • 3
    Make Leaflet to read your layer from the WMTS service github.com/mylen/leaflet.TileLayer.WMTS. Commented Sep 26, 2017 at 8:14
  • 1
    If you want Z/X/Y style, the GeoServer-embedded GeoWebCache would also be a candidate, see geowebcache.org/docs/current Commented Sep 27, 2017 at 2:40
  • @BradHards, hi, i have edited my question and if you have any insights to this , lemme know thanks! Commented Oct 2, 2017 at 5:22

3 Answers 3

Reset to default
2

If you're happy to use Leaflet, you can get the best, and cached, performance by using the GeoWebCache endpoint, like this:

var leafletLayer = new L.TileLayer.WMS(rootURL + "geoserver/gwc/service/wms", { layers: 'workspace:layer_name', format: 'image/png', transparent: true });

The /gwc endpoint will include all the fancy caching and what not to make it faster. You will need to invalidate that cache if you change the underlying data, but you can do that using the REST API without too much effort.

Improve this answer
0
1

The best option I've come across previously is Create a custom webmap with custom raster overlay from multiples PNGs.

The author, Xavier Raffin, provides an in-depth tutorial to provide the steps in serving your png tiles on GeoServer. Where he develops:

A fully cached web maps tiled and served within TMS urls.

The general principle follow several steps:

  • Change color channels to merge Red Green Blue into one channels
  • Merge overlapping images
  • Add geographical data into images transforming PNGs into geotiff
  • Remove geotiff RGB palette
  • Build an Image pyramid from Geotiff images
  • Transform images in pyramid into 1 color band images
  • Loading images into Geoserver
  • Finalize layer style: apply final color, merge with other layers
  • Build TMS directory tree with Mapproxy
  • Serve tile from this directory with NGINX
  • Built a leaflet map on a webpage
Improve this answer
1

I used leaflet to serve WMS instead.

http://leafletjs.com/examples/wms/wms.html

An example of the HTML I used would be: 

function loadWMS(){ var map = L.map('mapid', {zoom:15, zoomControl:false}); map.setView(new L.LatLng(1.3404853,103.8154618),15); var wmsLayer = L.tileLayer.wms('http://10.18.144.176:8080/geoserver/osm/wms?' , { layers: 'Your Layer name/Your LayerGroup name'}).addTo(map); }
Improve this answer
2
  • 2
    Leaflet is not serving anything, it is consuming the layer, which is served by Geoserver in you example. Commented Sep 27, 2017 at 12:18
  • @JGH im trying out wmts or tms right now. Commented Sep 28, 2017 at 7:24

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.