Maperitive Tutorial: A Hiking Web Map In Ten Easy Steps

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) with OpenStreetMap data and SRTM DEM data for hillshading and relief contours. Don’t worry - it is not that difficult to do.

NOTE: the tutorial has been written for Maperitive build 1228. Some things will change in the near future, so please visit http://maperitive.net for any updates.

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, zoom in our out appropriately to cover all the area you want, and then use the Map / Set Bounds menu function.

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

bounds-set 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 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.

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. This 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 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

We will need to prepare a simple HTML landing page for our map. The easiest way to this is to reuse the page from my sample map (http://beta1234.com.sunflower.arvixe.com/maps/default.htm), but we will need to make a few changes in the code so it reflects our own map area:

• Set your own path to the OpenLayers.js file. OpenLayers is an open-source JavaScript library for displaying Web maps. You should download it and put it somewhere on your Web server and change the path in the <script> tag of our landing page.
• Set the tiles location: look for the tiles/${z}/${x}/${y}.png text. You need to replace the tiles part with the path to your tiles location on the Web server.
• Set the zoom levels to match our zoom level 12, 13 and 14. Find the resolutions : attribute and set it to 38.21851413574219, 19.109257067871095, 9.554628533935547. Then change the zoomOffset : to 12 and numZoomLevels : to 3.
• Set the map bounds: look for restrictedExtent text, there you need to change the boundaries to match your own (15.42,46.44,15.62,46.55) in our case.

Then upload the HTML file to your Web server.

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). Visit http://maperitive.net for more information.

Good luck and enjoy mapping!