Home

Awesome

csWeb-tile

csWeb-tile is a wrapper around MapBox's TileLive application to offer a simple npm package for serving tile sources. You can run it standalone, as part of the csWeb server, or any other express-based server for that matter.

In case you wish to serve tiles standalone, you may also take a look at tessera, a standalone tile server created by mojodna, who also made most of the tilelive modules.

Currently, the following tilelive protocols are supported:

NOTE: Tests are performed using node 5 and npm 3 on Windows: in principle, everything should also work on Mac and Linux, but as I don't have access to these platforms, I cannot test it.

Installation

You can simply install a standalone version using the node package manager.

npm i -g csweb-tile

Alternatively, you can build it yourself, assuming you have installed TypeScript (otherwise, run npm i -g typescript). Check out the project using git clone (or download the zip) and simply run tsc in the main folder. Next, run node test\app.js and you can visit http://localhost:8888/ to run leaflet. On the command line, you see the tile layers that are being shared.

Usage instructions

Assuming you have a running version of csWeb-tile (if not, see the Installation section), you can for example use it to share an mbtiles file (with raster data). In the project's tilesources folder, you will also find examples of how to turn a geojson file into a tile layer, either using a Mapnik xml file (created using TileMill and selecting save as Mapnik xml), or by using a tm2 project description (in which case you can also create an UTFgrid).

Simple standalone tile server

In csWeb

Assuming that you have installed TypeScript (otherwise, run npm i -g typescript), you can do the following:

npm i
npm i csweb-tile mbtiles --save
cd public && bower i
cd ..
tsc

cs.start(() => {
    var ts = new tilesource.TileSource(cs.server, <tilesource.TileSourceOptions>{
        sources: path.join(__dirname, 'tilesources')
    });
    console.log('started');
});

Alternatively, you can specify the tile sources manually by setting the tileSources property directly, e.g. In this case, you can also include a fallback URI, which will be used when the primary source returns an error (i.e. you don't have the tile).

cs.start(() => {
    var ts = new tilesource.TileSource(cs.server, <tilesource.TileSourceOptions>{
        tileSources: [{
            protocol: 'mbtiles',
            path: path.join(__dirname, 'tilesources'),
            fallbackUri: ''}]
    });
    console.log('started');
});

    {
        "id": "test",
        "title": "Test file",
        "description": "My description",
        "renderType": "tilelayer",
        "url": "http://localhost:8888/test/{z}/{x}/{y}.png",
        "opacity": 75
    }

Or alternatively, in case you also wish to offer an UTF grid layer, all you need to do is add the UTF grid layer URL to the ProjectLayer's url, and include a typeUrl and defaultFeatureType to specify how we should render them.

    {
        "id": "test",
        "title": "Test file",
        "description": "My description",
        "renderType": "tilelayer",
        "url": "http://localhost:8888/test/{z}/{x}/{y}.png|http://localhost:8888/test/{z}/{x}/{y}.grid.json",
        "typeUrl": "data/resourceTypes/MyTypes.json",
        "defaultFeatureType": "test",
        "opacity": 75
    }

Installing Mapnik

NOTE: Windows binaries for the 3.x series require the Visual C++ Redistributable Packages for Visual Studio 2015:

See here for more details.

Creating your own standalone OpenStreetMap service

Using the tilesources/tm2/world.tm2 project, you can share the whole world (or a subset, if you like) using node.js. All you need to do is download the world.mbtiles file (e.g. from OSM2VectorTiles and add it to this folder. And you also need to update the source path in the project.yml file.

Optionally, you can specify another interactivity layer (see the tilejson.json file for additionaly layer names) and include a subset of the available fields in the template.

NOTE: Due to a limitation in the mbtiles package, you can only open one mbtiles file at a time.

Alternatively, for a PHP solution, take a look at Klokan Technologies' tileserver or here, also available as a Docker image, which exposes the data also as a WMTS service.

In Leaflet, you can subsequently expose the tiles and UtfGrid as follows (see also the index.html in the test/public folder):

L.tileLayer('world/{z}/{x}/{y}.png', {
    attribution: 'Tiles courtesy of <a href="http://www.tno.nl/" target="_blank">TNO</a>.'
}).addTo(map);
        
var utfGrid = new L.UtfGrid('world/{z}/{x}/{y}.grid.json', {
    resolution: 4,
    useJsonP: false
});
utfGrid.on('click', function (e) {
    //click events are fired with e.data==null if an area with no hit is clicked
    if (e.data) {
        alert('click: ' + JSON.stringify(e.data, null, 2));
    } else {
        alert('click: nothing');
    }
});
// utfGrid.on('mouseover', function (e) {
//     console.log('hover: ' + JSON.stringify(e.data, null, 2));
// });
// utfGrid.on('mousemove', function (e) {
//     console.log('move: ' + JSON.stringify(e.data, null, 2));
// });
// utfGrid.on('mouseout', function (e) {
//     console.log('unhover: ' + JSON.stringify(e.data, null, 2));
// });
map.addLayer(utfGrid);

3D Cesium terrain server

These tiles can also be used as a base layer by the 3D view in csWeb based on Cesium. However, in order to use your own height server, you have to install another github project, the Cesium Terrain Server. In order to get this running, I had to jump through the following hoops:

go get github.com\bradfitz\gomemcache
go get github.com\gorilla\handlers
go get github.com\gorilla\mux

%GOPATH%\bin\cesium-terrain-server.exe -base-terrain-url /tilesets -dir /MY_TILE_DATA_FOLDER