csweb-tile
v0.1.2
Published
Wrapper around MapBox's TileLive application to offer a simple npm package for serving tile sources in csWeb.
Downloads
3
Readme
csWeb-tile
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:
- mbtiles (with raster data, not with vector tlies). Default location:
tilesources\mbtiles
. - tmstyle (or .tm2) projects, i.e. Mapbox Studio Classic tilemill 2 projects. You can create them using the free Mapbox Studio Classic tool. Default location
tilesources\tm2
. Currently only tested with geojson source layers. For tmstyle projects, we can also serve UtfGrid files - in that case, you need to edit the project.yml file manually to add the interactivity layer, as explained here. - Mapnik XML projects, e.g. you can create your own map using TileMill, and export it as a Mapnik project. Default location:
tilelive\mapnik
.
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.
Usage
For example, if you want to share mbtiles files (with raster data), do the following.
Simple standalone tile server
- Create a new project folder,
csWeb-tile
for example andcd csWeb-tile
. - Create a folder
tilesources\mbtiles
- Put your mbtiles file in the newly created
tilesources\mbtiles
folder - Run
node csWeb-tile
In csWeb
Assuming that you have installed TypeScript (otherwise, run npm i -g typescript
), you can do the following:
- Download the zip file from csWeb-example and unpack it in a new folder.
- Install all regular dependencies in this new project, install csweb-tile including the mbtiles protocal package, and compile the source:
npm i
npm i csweb-tile mbtiles --save
cd public && bower i
cd ..
tsc
- Add the mbtiles file(s) to a folder, e.g.
tilesources/mbtiles
. Note that you can change thetilesources
name, but the subfolder's name needs to be the same as the tilelive protocol, i.e. in this casembtiles
. - Add the tile server to your server.ts file. When starting the server (
node server.js
), you should see a message on the console upon loading the file.
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');
});
Installing Mapnik
NOTE: Windows binaries for the 3.x series require the Visual C++ Redistributable Packages for Visual Studio 2015:
- https://mapbox.s3.amazonaws.com/windows-builds/visual-studio-runtimes/vcredist-VS2015/vcredist_x64.exe
- https://mapbox.s3.amazonaws.com/windows-builds/visual-studio-runtimes/vcredist-VS2015/vcredist_x86.exe
See https://github.com/mapnik/node-mapnik/wiki/WindowsBinaries 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.
In Leaflet, you can dan expose the tiles and UtfGrid as follows:
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 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:
- Install the Go language (as this terrain server is written in Go)
- Add the Go installation folder to my path (so I can run it), and set GOPATH to my Go sources folder, e.g. on Windows
set GOPATH=c:\dev\Go
(assuming that your sources should go inc:\dev\Go\src
, which you should create) - Get the cesium project:
go get github.com/geo-data/cesium-terrain-server
(on Linux, you can probably just run the make file) - When I subsequently tried to install it, it complained about three missing packages, which I installed too:
go get github.com\bradfitz\gomemcache
go get github.com\gorilla\handlers
go get github.com\gorilla\mux
- Each of these GETs creates a new
%GOPATH%\src
sub-folder, so visit each of them and rungo install
which installs these projects in the%GOPATH%\bin
folder. Do the same for the cesium-terrain-server. - If all goes well, you should finally be able to run
%GOPATH\bin\cesium-terrain-server
. - Finally, you need some DEM (Digital Elevation Map) data in the proper format. On their website, it is explained how you can create one using ctb-tile. I've added the tile data to
MY_TILE_DATA_FOLDER\city
and used it with the following command line (note the absence of thecity
in thedir
switch):
%GOPATH%\bin\cesium-terrain-server.exe -base-terrain-url /tilesets -dir /MY_TILE_DATA_FOLDER
- If this is still working, you should be able to visit http://localhost:8000/tilesets/layer.json and get your 'layer.json' file.