MAPERITIVECREATING CUSTOM MAP TILES FOR

BOUNDED AREASby Calvin Ng / @calvinnwq

BACKGROUNDI'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

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

...

GOOGLE

MAPERITIVEThis presentation will go through the solution I stuck with

after a couple others that I've tried

...

SO LET'S BEGIN!

1. MAPERITIVE“Maperitive is a FREE desktop application for drawing maps

based on OpenStreetMap and GPS data. You can define whatgets on the map and how it is painted. You can also export

these maps into bitmaps and SVG files and print them.”

SYSTEM REQUIREMENTSWindows: XP SP3 or later with installed.

Linux & Mac: latest installed.Microsoft.NET 4Mono

WHAT CAN I DO WITH MAPERITIVE?Make maps with custom content and styleRender relief contours, hillshading, Exporting maps to bitmaps or SVG filesMake map tiles for the webAutomating mapmaking through scripts, Python andMaperitive command-line console

hypsometric tinting

MAPERITIVE LINKSDownload LinkTen Minute IntroMaperitive Documentation

2. STARTING UP MAPERITIVEOPENING UP MAPERITIVE ON WINDOWS / MAC / LINUX

WINDOWSEnsure XP SP3 or later with Microsoft.NET 4 installed and

simply run Maperitive.exe

MAC / LINUXEnsure is installed and assuming Maperitive is

extracted to Desktop, run the following:Mono

$ sh ~/Desktop/Maperitive/Maperitive.sh

SCREENSHOT

INTERFACE

3. GEO BOUNDING BOXRETRIEVING GEO COORDINATES AND SETTING UP GEO BOUNDS

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

ONLINE TOOLS1. 2. by

OpenStreetMapBounding Box Klokan Technologies

BOUNDING BOXSelect an area and select "CSV" as type of data

4. EXPORTING BITMAPEXPORTING PNG FOR CUSTOM DESIGNING

SETTING BOUNDING BOXset-geo-bounds 103.406067,1.090327,104.246521,1.607913

ZOOM TO BOUNDSzoom-bounds

EXPORT BITMAPexport-bitmap zoom=12

EXPORT BITMAP2 files will be generated in output folder:

output.pngoutput.png.georef (required for later steps)

5. EDITING CUSTOM MAPDESIGNING OF CUSTOM MAP AND CONSTRAINTS

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

SAMPLE CUSTOM MAPFor the sake of this presentation, here is a sample map I've

made which I will name map.png

6. LOADING CUSTOM MAPLOAD CUSTOM EDITED MAP IN MAPERITIVE

CUSTOM MAP FILESUsing map.png from our previous example, we will also

need to create a copy of output.png.georef and rename thatto map.png.georef

LOAD IMAGE IN MAPERITIVEAssuming we put map.png and map.png.georef back into the

output folder:load-image file=output/map.png background=false

DISABLE OTHER MAPSYou can choose to disable underlying maps like the default

Web map (OSM Mapnik) so they don't get generated bysimply clicking on the yellow star under the Map Sources at

the bottom right

7. GENERATE TILESGENERATING TILES FOR SPECIFIC ZOOM LEVELS

GENERATE TILESFor 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

TILES FOLDER

8. MAP TILESHOW TO USE THEM

HOSTING THEMCopy the folders to your project directory. In the example to

follow, I've placed them in my assets folder of thispresentation with path assets/tiles/

REFERENCING THEM IN CODEReferencing them is as simple as using the following URL:

var tile_url ="http://calvinnwq.github.io/maperitive-presentation/assets/tiles/{z}/{x}/{y}.png";

EXAMPLE CODEIn this example, I will make use of .leaflet.js

// create boundsvar 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 zoomvar map = L.map('map', { "center" : [1.335, 103.820], "zoom" : 11, "minZoom" : 11, "maxZoom" : 12, "maxBounds" : bounds});

// add an OpenStreetMap tile layerL.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);

EXAMPLE RESULTRun it!

SUMMARYWHAT DID WE LEARN TODAY?

MAPERITIVE SUMMARYWhat Maperitive isStarting up Maperitive

STEPS SUMMARY1. 2. 3. 4. 5.

Obtaining geo bounding boxExporting bitmapEditing custom mapsLoading custom maps in MaperitiveGenerating map tiles

FIN ~Thank you for your attention