View
444
Download
0
Category
Tags:
Preview:
DESCRIPTION
Presentation slides on creating custom map tiles for bounded areas with Maperitive.
Citation preview
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
...
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
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
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
Recommended