Maperitive Tutorial: A Hiking Web Map In Ten Easy Steps

September 7, 2011

UPDATE (24th February 2013): I’ve updated the tutorial to conform to the latest Maperitive release.

I’ve been asked a lot of times to write some tutorials for Maperitive, so I finally decided to write one.

In this tutorial you will learn how to make a hiking web map (like this one hosted on MapBox) with OpenStreetMap data and SRTM DEM data for hillshading and relief contours. Don’t worry - it is not that difficult to do.

First things first: start Maperitive (if you don’t already have it, you can download it from here).

Step 1: Setting Your Map Limits

Currently Maperitive uses your computer’s memory to store map data, so there is a limit of how large a map it can work on. Because of that, we need to tell Maperitive what area we’re interested in, so all the operations will limit themselves on that area.

There are several ways to set the limits. The easiest is to move the map to the area, right-click on the map and choose Place Geometry Bounds Here from the context menu. When the red rectangle appears, you can move it and resize it to the area of your choice.

I will do this manually by entering a following command in the command prompt (at the bottom of the screen):

set-geo-bounds 15.42,46.44,15.62,46.55

I suggest you do the same for the purposes of this tutorial, so our map areas would match. The area in question is Pohorje mountain in Slovenia (I hike there very often).

Step 2: Generating Hillshading

This one is very easy: use Tools / Generate Hillshading (Igor) menu function. The program will contact NASA’s SRTM server and download all the appropriate DEM tiles for the area. After that it will generate a new map source containing the hillshading bitmap. You can see all the happenings in the Commander log.

Step 3: Turning Off The Web Map

Now that we have some content of our own, we don’t really need the OSM web map anymore. Select the Web Map (OSM Mapnik) in the Map Sources window at the bottom of the screen and then click on the “X” button to remove it:

Step 4: Generating Relief Contours

A proper hiking map should have relief contours, which is another easy step to do: choose Tools / Generate Relief Contours menu item and voila, now you have the contours.

Step 5: Loading OSM Data

Now we need to get the OSM data to have the map filled with useful hiking information. Again, there are several ways of doing this.

The easiest one is to use the Map / Download OSM Data (Overpass API) menu function, which contacts an OSM server to fetch the data. Try it out. If it fails, try it a couple more times. The problem is that these servers are sometimes overloaded and unresponsive. Alternatively, you could try using the other download option, the Map / Download OSM Data (Overpass XAPI) menu function.

If this doesn’t work, another option is to use JOSM or the Export tab on the OSM Web Map site. In that case you will get an OSM XML file, which you need to save on your disk (using .osm extension!) and then load into Maperitive using the File / Open Map Sources menu function (or simply drag and drop the file into Maperitive).

Once the OSM data is in, you will get a map that resembles the basic OSM Web map (Mapnik layer). This map style isn’t really appropriate for hiking maps, so we need to change it…

Step 6: Changing The Map Style

Choose Map / Switch To Rules / hiking menu function. After a second or two you will get the final hiking map using the hiking style which comes with Maperitive. Now we need to transform it into a Web map…

Step 7: Generating Map Tiles

Web maps consist of a multitude of map tiles, which are 256x256 pixels bitmaps. So we need to generate tiles for our hiking map before we can upload them to our Web server.

Maperitive offers you two basic choices when it comes to tiles:

Generating each tile as a separate file. This is the standard way of dealing with tiles. The advantage is that its pretty easy to set up a web map with this approach. The disadvantage is that you have to transfer a lot of small files to your web server, which can take a long time.
Generating tiles as a single MBTiles file. MBTiles is a SQLite database containing all the generated tiles and which can be handled as a single file. The only thing is, you need to have a Web map server that supports MBTiles. If you’re planning to publish your maps on MapBox, that’s not a problem (simply upload the generated file using their web application).

Step 7a: Generating tiles as separate files

Generating tiles as separate files is done using the generate-tiles command. Enter the following command:

generate-tiles minzoom=12 maxzoom=14

and you should get the output in the Commander log similar to this one:

For the sake of this tutorial we generated tiles just for three zoom levels (12, 13, 14). The tiles have been stored in the Tiles subdirectory of your Maperitive installation, in the structure that is suitable to be used by OpenLayers (we’ll get to that part in a moment, don’t worry). I’ll leave you some time to check the tiles out…

Step 7b: Generating MBTiles

Alternatively, to generate MBTiles file, use the analogous command:

generate-mbtiles minzoom=12 maxzoom=14

Step 8: Uploading Tiles To Web Server

You can use do whatever way you feel most comfortable with to upload these map tiles to your Web server. Maperitive comes with the ftp-upload command which can make this job very easy. Example:

ftp-upload host=myftp.com user=me pwd=secret remote-dir=mywebmap

will upload all the generated tiles to the mywebmap directory on the FTP server. Before executing this command, you will need to enter your own host, user and password, of course.

Step 9: Preparing HTML

If you decided to your web map on your own web server using individual web map tiles, you now need to prepare a simple HTML landing page for our map.

In the past I used OpenLayers as a client-side JavaScript mapping library. You can still use it, but for simplicity’s sake I would recommend trying out Leaflet.js instead. It is much easier to get started and has all the basic features you will need for a decent web map. The documentation is good and there are a lot of samples on the web. If you want to see a working Leaflet map, check out ScalableMaps, one of my other projects. Feel free to use the JavaScript code if you want.

Step 10: Test The Map

This should be it! Visit your Web map using a browser and check that everything is working correctly.

This tutorial shows only the basic workflow, but there are many ways of how the workflow can be customized and even automated (by putting everything into a Maperitive script and even running it in the headless Maperitive console). Visit http://maperitive.net for more information.

Good luck and enjoy mapping!

7:08pm | URL: https://tmblr.co/Zm5Djx9FPCO3

(Notes: 87)