How to get started webmapping with xyz-tiles and Geoserver?

Question

I´m starting to explore the possibilities of web based map presentation. Therefor I have a basic question in understanding. After reading a bunch of tutorials, could a workflow work like this?

1. Style a map (osm-bright) with tilemill
2. export styled map in mbtiles format
3. convert mbtiles format with mbutil to xyz-tiles
4. use geoserver to create a wms with these generated tiles (is geoserver able to serve tiles or do I need another component like a tile server?)
5. create a viewer with openlayers which shows my styled map tiles

Answer 1

If you create xyz tiles with mbutil, you don't need GeoServer. Mapping libraries like OpenLayers and Leaflet can read the image tiles directly from the tile folder mbutil creates.

For example, you create tiles in a folder called 'mytiles' and you place that folder in the root directory of your web server. The URL you pass to your mapping library to create the tile layer would be:

http://your.server.com/mytiles/{z}/{x}/{y}.png

For OpenLayers, I believe the code to initialize a tile layer is:

new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: http://your.server.com/mytiles/{z}/{x}/{y}.png'
  })

Answer 2

I've been working on this exact same workflow, and would point out that you can use the MBTiles extension for Geoserver to serve the .mbtiles file directly, no need to unpack it. This has worked well for me, I just copy the .mbtiles file onto the server in the Geoserver data directory and then use it as a datastore.

However, here is a little bit of stickiness that I haven't quite resolved: I want to make a non-square raster (a county in the US) and have everything else around it transparent. It seems to be the case that even with the background transparent, TileMill will not create tiles that are completely blank/transparent i.e. are away from the edge of the county and have nothing to display. The result is that at certain zoom levels where these non-existent tiles would be transparent, Geoserver serves them as opaque white. This is my understanding of the issue.

I wrote a little Python script to unpack the .mbtiles file with mbutil and then run through the directories and add blank/transparent tiles where they had been omitted by TileMill. This works fine, but I have had trouble with the repacking method of the mbutil, and thus haven't been able to successfully create a "corrected" .mbtiles file.

All of that to say that at this point, I've used the MBTiles extension in Geoserver and it works well, but for my own needs I'm thinking of just correcting the unpacked tiles and then pulling them in with OpenLayers, as @Ken described.

Answer 3

Maybe you can have a look at Tirex or switch2osm.org/serving-tiles/using-an-all-in-one-solution/