[GIS] Slippy map format

geoserverleafletmapboxopenstreetmapwms

When do you decide which to use? I've started using Geoserver and it seems like map files are downloaded to the browser (using Leaflet) in the WFS format.

When I look at OSM, Mapbox etc, they use what I believe is the slippy map format: /zoom/x/y.png 256×256 tiles.

Should Geoserver be configured to use slippy map format? And will using WMS prevent slippy map interactions like Google maps and Leaflet?

What are your recommendations if I'm using Geoserver and Leaflet and want to serve some map tiles.

Best Answer

I think what you want to do is make a slippy map, right?

This is very easy with Leaflet and GeoServer, so long as you only want to view information.

In GeoServer, style a layer, and test it. Then, with Leaflet, add the layer from GeoServer via WMS. Example is included below, replace all the with your values:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<!--[if lte IE 8]>
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->

<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

<div id="map"  style="width: 800px; height: 600px"></div>

<script>
    var center = new L.LatLng(<LAT>,<LON>);
    var map = new L.Map('map', { center: center, zoom: 14, attributionControl:true, zoomControl:false});   
    var gi = new L.TileLayer.WMS("http://<SERVER>:8080/geoserver/gwc/service/wms", {
        layers: '<WORKSPACE>:<LAYER NAME>',
        format: 'image/png',
        maxZoom: 20
    }).addTo(map)
</script>

If you actually want vectors, consider carefully why. You can achieve it using tileJSON, but it isn't simple. You can query the WMS layer, though, and highlight individual features, which is quite nice!

Components used:

Leaflet
PouchDB (a framework that uses indexedDB in your browser)
XHR2 (XMLHTTP) to fetch the files, since JQUERY does not yet support binary blob XMLHTTP
KendoUI (an HTML5 web control library)

Running the Demo:

http://codepen.io/DrYSG/pen/hpqoD

Delete any old DB (Press the Delete Button)
Reload the page
Wait till Status is READY
Press [Download Tiles]

This should load 341 blobs from Google Drive (NASA Blue World, in EPSG 3857 projection). It will show a sample image when it is done. Sorry, FireFox has a poor implementation of IDB, so it is very slow (FF uses SQLLite a relational database, and IDB is no-SQL).

Once you have done that, then try:

http://codepen.io/DrYSG/pen/oEItn

Which will show that there is a manifest, and 341 tiles, and should overlay the Tiles from PouchDB on your map. You can use the layer control on the left side to turn off the PouchDB layer.

The Algorithm it uses is as follows:

Test for presence of XHR2, IndexedDB, and Chrome (which does not have binary blobs, but Base64). and show this status info
Fetch a JSON manifest of PNG tiles from GoogleDrive (I have 341 PNG tiles, each 256x256 in size). The manifest lists their names and sizes.
Store the JSON manifest in the DB
MVVM and UI controls are from KendoUI http://www.kendoui.com/ (This time I did not use their superb grid control, since I wanted to explore CSS3 Grid Styling).
XHR2 is from: https://github.com/p-m-p/xhr2-lib/blob/master/test/index.html
I am using the nightly build of PouchDB
All files PNG file are stored on Google Drive (NASA Blue Marble). \
I created the tile pyramid with Safe FME 2013 Desktop. http://www.safe.com/fme/fme-technology/fme-desktop/overview

Before Pressing the button "Download Tiles" Check to see that the manifest has been stored in the DB, and that 341 tiles are present. If you already ran the test then your PouchDB is going to already have tiles in the DB, and you will get errors. In that case, Press Delete DB, and then reload the page.

When you press "Download Tiles" The following steps occur:

The Manifest is fetched from the DB
A XHR2 Fetch loop grabs the PNG blobs from GoogleDrive.
As loop runs, it starts saving the Blobs into PouchDB.
Note: Fetching and Saving are on overlapped threads (think co-routines), since those (fetch & store) operations are running async on separate threads.
When the Fetch loop is done it reports the elapsed time.
Note: This time is not pure Fetch work, since PouchDB putAttachments() are running in parallel.
When all the Tiles are saved, it will report full statistics, and display a tile fetched from PouchDB.
The Blob-Rate the total fetch and store time per each png tile

Leaflet Map Display

The key idea in getting Leaflet to display maps is to use Ishmael Smyrnow's Functional Tile plug-in: https://github.com/ismyrnow/Leaflet.functionaltilelayer. You will need to use JQUERY DEFFER to allow the PouchDB to asynchronously fetch the tiles from the DB. You also need to understand CreateURL() to create a binary blob url which is used in the tag to show the raster image.

I create my database tile layer this way:

function dbMap() {
    var label = {};
    var settings = {
        tms: false,
        opacity: 0.6,
        errorTileUrl: "./images/EmptyTile.png"
    };
    var layer = new L.TileLayer.Functional(function (view) {
        var deferred = new jQuery.Deferred(); // this is what gets returned
        var id = view.zoom + "-" + view.tile.column + "-" + view.tile.row;
        DB.getAttachment(id + "/pic", function (err, response) {
            if (err) {
                console.warn("Could find blob id: ", id, " error: ", err.error, " reason: ", err.reason, " status: ", err.status);
            } else {
                var blob = response;
                var imgURL = URL.createObjectURL(blob);
                deferred.resolve(imgURL); // let leaflet know we're done, and give it the URL
                URL.revokeObjectURL(imgURL); // not sure if we're revoking it too soon here
            }
        });
        return deferred;
    }, settings);
    MAP.addLayer(layer);
    label["Pouch DB"] = layer;
    $.extend(OverLayers, label);
}

Notes

Right now Chrome is running fine. Firefox is very slow. I found this out a few months when I did a native IndexedDB API. So I don't think this is a PouchDB issue. Probably more due to FireFox using SQLlite which is a relational approach to a no-SQL DB.

IE10 is not working. This is sad, since my prior tests with IE10 shows it has a fantastically fast IndexedDB solution: https://stackoverflow.com/questions/14113278/storing-image-data-for-offline-web-application-client-side-storage-database

A Must read article on "How the browsers store IndexedDB data" http://www.aaron-powell.com/web/indexeddb-storage
Note: FireFox uses SQLlite for the NOSQL IndexedDB. That might be the reason for the slow performance. (blobs stored separately)
Note: Microsoft IE uses the extensible storage engine: http://en.wikipedia.org/wiki/Extensible_Storage_Engine Note: Chrome uses LevelDB http://code.google.com/p/leveldb/

[GIS] Map not rendering at zoom level 18+ using openlayers3 and leaflet

As the comment only talk about openlayers3. I think that it is OK to answer the leaflet one, it is similar to openlayers3 case, by providing maxNativeZoom , you should able to load map tiles on that zoom level:

  L.tileLayer('http://server/osm_tiles2/{z}/{x}/{y}.png', {
    minZoom: 4,
    maxZoom: 20,

    maxNativeZoom: 20,

    id: 'mapbox.streets'
  }).addTo(map);