npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

11

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 and cd 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 the tilesources name, but the subfolder's name needs to be the same as the tilelive protocol, i.e. in this case mbtiles.
  • 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 in c:\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 run go 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 the city in the dir switch):
%GOPATH%\bin\cesium-terrain-server.exe -base-terrain-url /tilesets -dir /MY_TILE_DATA_FOLDER