Geekly Articles each Day
📜 ⬆️ ⬇️

Open source internet cartography

Hello. I continue a series of articles about mapping on the Internet using the open-source software set MapBox, from Development Seed.

Previous parts:
  1. Studio Review
  2. Introduction to TileMill
  3. Extended capabilities

Today I will review:


Interesting? I invite under the cat.
')
In order to explain what a cached map service is, I will quote a quote from the article by Samsonov TE. “Internet-oriented cartographic design: design and layout of maps for web services” :

Cartographic web services can be divided into two large groups: dynamic and cached. In the first case, each time when scaling or moving, the data is accessed and the image is redrawn, taking into account the new coverage. At the same time, the client receives only ready-made raster images - they are rendered by the server.

In the case of a cached service, a mosaic of raster images (tiles) for each scale is ready in advance, so the work is done an order of magnitude faster. Of course, the complexity of the design and the data itself does not affect the display speed - this is a big plus. But there are also obvious limitations: when changing data, it is necessary to recalculate the cache, you cannot edit objects and control the display of layers, the list of scales is fixed. It is also worth remembering that the cache recalculation can take several days and even weeks (!) Depending on how complex the card is based on.

Therefore, the choice between dynamic and cached service is not as obvious as it might seem at first glance. As a rule, it makes sense to make a cached service with rarely or fragmentarily updated data, to create maps-substrates for dynamic services, or if the project itself is small - the cache can be quickly recalculated. There is another version of the multilayer cache, where each layer is a separate raster mosaic. However, the performance of the service in this case leaves much to be desired - because the web server has to dynamically overlay the rasters of layers on each other.


TileStream


TileStream is a high-performance tile server with the ability to view MBTiles files via the web.
Opportunities:

Requirements:

Installing dependencies

Install the necessary packages. For example, for Ubuntu:
sudo apt-get install curl build-essential libssl-dev libsqlite3-0 libsqlite3-dev


Install node.js and npm. You can use the nvm utility to select a specific node.js version. Installation from source code :

 git clone --depth 1 git://github.com/joyent/node.git cd node git checkout v0.4.9 export JOBS=2 # optional, sets number of parallel commands. mkdir ~/local ./configure --prefix=$HOME/local/node make make install echo 'export PATH=$HOME/local/node/bin:$PATH' >> ~/.profile source ~/.profile

Install npm:
 curl http://npmjs.org/install.sh | sh


TileStream installation


Download the source code from the repository . And start the installation process using npm.
 git clone git://github.com/mapbox/tilestream.git cd tilestream npm install -g tilestream


The -g switch tells npm that the tilestream needs to be installed globally. This will require superuser rights. To install locally (in the current directory), simply omit this key.

Launch TileStream.
 tilestream


You can check TIleStream using the test suite that developers provide. For testing, they use expresso . You can install the library and run tests like this:
 npm install -g expresso cd tilestream npm test


Important. If you want to use TileStream as a server not on the local machine, you must specify the hostname at startup.
 tilestream --host 127.0.0.1 tilestream --host yourhost.com


You can get detailed help on all TileStream startup parameters like this:
 tilestream start --help


Using


In order to start using TileStream, you need to copy MBTiles to the tiles directory. I remind you that on the MapBox website you can find a set of free tiles from developers.

Each set of tiles can be viewed at localhost:8888/map/[filename] localhost:8888/map/[filename] , where [filename] name of the tile set, without the .mbtiles extension.

Tile set names:


Wax


Wax is a set of extensions and tools to facilitate the use of maps on the site. Wax supports the API of several different libraries, such as Modest Maps, LeafLet and Google Maps.

Using


Loading


Wax API uses TileJSON . TileJSON is a format that contains metadata and information necessary to use a set of tiles.

In order to get started, you need to know the URL of the set of tiles that you want to use. In most cases, the following convention is used:
 /{z}/{x}/{y}.[image format]

Where {z} is the presentation level (zoom), {x} and {y} coordinates. TileJSON represents the URL of a set of tiles replacing these tags (placeholders) so that you can get any tile from the set.

For example, such a URL
 https://habrastorage.org/getpro/habr/post_images/e09/b8b/605/e09b8b60541e60473a21c777c75bcff9.png

Tile returns
image

The TileJSON describing this tile set is as follows:
 { "version": "1.0.0", "scheme": "tms", "tiles" ["http://a.tile.mapbox.com/1.0.0/world-light/{z}/{x}/{y}.png"] }




There are quite a few different libraries used in conjunction with cached map services, but they all do about the same thing — add tiles to a page and manage them so that the map looks in a holistic way of the world, rather than a set of small square pieces.

So let's start by using Modest Maps — easy and fast JavaScript mapping library.

Modest Maps JS


Modest Maps JS is a JavaScript library for displaying and interacting with tile maps. Distributed under BSD license .

Developers position Modest Maps JS as a free, lightweight, expandable and customizable library for discerning designers and programmers who want to use interactive maps in their projects. The library provides a kernel with a set of features, in the form of compressed and clean code that can be extended using the built-in hook system.

Modest Maps was originally written in Python and ActionScript. Example of use - walkingpapers.org

First, you need to download the necessary source code .
 git clone git://github.com/mapbox/wax.git


Included with Wax is a set of supported libraries, including Modest Maps. We connect JavaScript and CSS.
 <html> <head> <script src='wax/ext/modestmaps.min.js' type='text/javascript'></script> <script src='wax/dist/wax.mm.js' type='text/javascript'></script> <link href='wax/theme/controls.css' rel='stylesheet' type='text/css' /> ...




Wax contains a Modest Maps provider that displays tile sets described by the TileJSON format in wax.mm.connector .

 var tilejson = { tilejson: '1.0.0', scheme: 'tms', tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/world-light/{z}/{x}/{y}.png'] }; // Alias com.modestmaps to mm. This isn't necessary - // just nice for shorter code. var mm = com.modestmaps; // Set up a map in a div with the id 'modestmaps-setup' var m = new mm.Map('modestmaps-setup', // Use Wax's connector to add a new custom layer new wax.mm.connector(tilejson), // And it'll be 240px by 120px new mm.Point(240,120)); // Center it on the United States, at zoom level 2. m.setCenterZoom(new mm.Location(39, -98), 2);


The map will be displayed in a div with the identifier modestmaps-setup .
 <div id="modestmaps-setup"></div>


An example .

LeafLet


LeafLet is another modern and lightweight JavaScript library for creating interactive tile-based maps developed by CloudMade.

This library is designed from scratch to work efficiently and smoothly on both desktop and mobile platforms using the advanced technologies included in HTML5. The main priorities in development are usability, performance, small size, support for advanced browsers, flexibility, and an easy-to-use API. The code is written in OOP style and is designed to be modular, extensible and easy to understand.

In order to use LeafLet, in your project, we include the necessary code.
 <html> <head> <script src='wax/ext/leaflet.js' type='text/javascript'></script> <script src='wax/dist/wax.leaf.js' type='text/javascript'></script> <link href='wax/ext/leaflet.css' rel='stylesheet' type='text/css' /> ...




Wax also contains a LeafLet provider that displays tile sets described by the TileJSON format in wax.leaf.connector .

 var tilejson = { tilejson: '1.0.0', scheme: 'tms', tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.png'], grids: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.grid.json'], formatter: function(options, data) { return data.NAME } }; var map = new L.Map('leaflet-simple') .addLayer(new wax.leaf.connector(tilejson)) .setView(new L.LatLng(51.505, -0.09), 1); wax.leaf.interaction(map, tilejson);


Conclusion


In this topic, we looked at creating a simplest caching map service using the TileStream tile server, together with the libraries of Modest Maps and LeafLet.

Thanks for attention.

useful links

Source: https://habr.com/ru/post/123290/

More articles:


All Articles