Maperitive

Presentation slides on creating custom map tiles for bounded areas with Maperitive.

1. MAPERITIVE
CREATING CUSTOM MAP TILES FOR
BOUNDED AREAS
by Calvin Ng / @calvinnwq

2. BACKGROUND
I've created an app which utilises
to retrieve real time tweets with geolocation and plot them
onto a map using .
Twitter's Streaming API
leaflet.js
...
Then came the requirement
...
CUSTOM DESIGNED MAP

3. WHAT NEXT?
Having no clue, I did what any of you would
...
GOOGLE

4. MAPERITIVE
This presentation will go through the solution I stuck with
after a couple others that I've tried
...
SO LET'S BEGIN!

5. 1. MAPERITIVE
“Maperitive is a FREE desktop application for drawing maps
based on OpenStreetMap and GPS data. You can define what
gets on the map and how it is painted. You can also export
these maps into bitmaps and SVG files and print them.”

6. SYSTEM REQUIREMENTS
Windows: XP SP3 or later with installed.
Linux & Mac: latest installed.
Microsoft.NET 4
Mono

7. WHAT CAN I DO WITH MAPERITIVE?
Make maps with custom content and style
Render relief contours, hillshading,
Exporting maps to bitmaps or SVG files
Make map tiles for the web
Automating mapmaking through scripts, Python and
Maperitive command-line console
hypsometric tinting

8. MAPERITIVE LINKS
Download Link
Ten Minute Intro
Maperitive Documentation

9. 2. STARTING UP MAPERITIVE
OPENING UP MAPERITIVE ON WINDOWS / MAC / LINUX

10. WINDOWS
Ensure XP SP3 or later with Microsoft.NET 4 installed and
simply run Maperitive.exe

11. MAC / LINUX
Ensure is installed and assuming Maperitive is
extracted to Desktop, run the following:
Mono
$ sh ~/Desktop/Maperitive/Maperitive.sh

12. SCREENSHOT

13. INTERFACE

14. 3. GEO BOUNDING BOX
RETRIEVING GEO COORDINATES AND SETTING UP GEO BOUNDS

15. CONSIDERATIONS?
Are there any specific countries? (e.g. Singapore)
What are the zoom levels to consider?
Is the map fixed or interactive?

16. ONLINE TOOLS
1.
2. by
OpenStreetMap
Bounding BoxKlokan Technologies

17. BOUNDING BOX
Select an area and select "CSV" as type of data

18. 4. EXPORTING BITMAP
EXPORTING PNG FOR CUSTOM DESIGNING

19. SETTING BOUNDING BOX
set-geo-bounds 103.406067,1.090327,104.246521,1.607913

20. ZOOM TO BOUNDS
zoom-bounds

21. EXPORT BITMAP
export-bitmap zoom=12

22. EXPORT BITMAP
2 files will be generated in output folder:
output.png
output.png.georef (required for later steps)

23. 5. EDITING CUSTOM MAP
DESIGNING OF CUSTOM MAP AND CONSTRAINTS

24. CONSTRAINTS?
output.png should be the template to work upon.
Custom designed map (let's call it map.png) should retain
exact dimensions as output.png
Multiple layers to show terrain / roads / etc.?

25. SAMPLE CUSTOM MAP
For the sake of this presentation, here is a sample map I've
made which I will name map.png

26. 6. LOADING CUSTOM MAP
LOAD CUSTOM EDITED MAP IN MAPERITIVE

27. CUSTOM MAP FILES
Using map.png from our previous example, we will also
need to create a copy of output.png.georef and rename that
to map.png.georef

28. LOAD IMAGE IN MAPERITIVE
Assuming we put map.png and map.png.georef back into the
output folder:
load-image file=output/map.png background=false

29. DISABLE OTHER MAPS
You can choose to disable underlying maps like the default
Web map (OSM Mapnik) so they don't get generated by
simply clicking on the yellow star under the Map Sources at
the bottom right

30. 7. GENERATE TILES
GENERATING TILES FOR SPECIFIC ZOOM LEVELS

31. GENERATE TILES
For this example we will generate tiles for 2 zoom levels (11
& 12) for the bounding box we have.
generate-tiles minzoom=11 maxzoom=12 bounds=103.406067,1.090327,104.246521,1.607913
Generated tiles can be found in the Tiles folder

32. TILES FOLDER

33. 8. MAP TILES
HOW TO USE THEM

34. HOSTING THEM
Copy the folders to your project directory. In the example to
follow, I've placed them in my assets folder of this
presentation with path assets/tiles/

35. REFERENCING THEM IN CODE
Referencing them is as simple as using the following URL:
var tile_url =
"http://calvinnwq.github.io/maperitive-presentation/assets/tiles/{z}/{x}/{y}.png";

36. EXAMPLE CODE
In this example, I will make use of .leaflet.js
// create bounds
var bounds = new L.LatLngBounds(
new L.LatLng(1.090327, 103.406067)
, new L.LatLng(1.607913, 104.246521)
);
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map', {
"center" : [1.335, 103.820]
, "zoom" : 11
, "minZoom" : 11
, "maxZoom" : 12
, "maxBounds" : bounds
});
// add an OpenStreetMap tile layer
L.tileLayer('http://calvinnwq.github.io/maperitive-presentation/assets/tiles/{z}/{x}/{y}.png'
attribution: "Calvin's custom map design"
, minZoom: 11
, maxZoom: 12
}).addTo(map);

37. EXAMPLE RESULT
Run it!

38. SUMMARY
WHAT DID WE LEARN TODAY?

39. MAPERITIVE SUMMARY
What Maperitive is
Starting up Maperitive

40. STEPS SUMMARY
1.
2.
3.
4.
5.
Obtaining geo bounding box
Exporting bitmap
Editing custom maps
Loading custom maps in Maperitive
Generating map tiles

41. FIN ~
Thank you for your attention