How to create and style custom maps for you Appcelerator Titanium apps using tools from Mapbox and data from the OpenStreetMap project

1. Building Custom Maps for Titanium
with Mapbox and OpenStreetMap
Adam Paxton
tiConf NY 2014
adampaxton@polancomedia.com
github.com/adampax
@adampax

2. Overview
• Current Mapping Options in Titanium
• Simple Map Styling with Mapbox
• Crazy Map Stuff with TileMill
• Lunch

3. Ti Maps Today
• Apple Maps
• Supported through Ti API
• iOS Only
• Google Maps
• Supported for Android through
Ti API
• Available for iOS through
Community Modules

4. Some Limitations
• No custom styling
• No complete offline capability*
• Limited map data options

5. So what?

6. pinterest.com/timoa/mobile-ui-maps/

7. Different?

8. Really Different?
mapbox.com/tilemill/

9. So what about offline?

10. Enter Mapbox
• Map design and hosting company
• Pretty much all tools are open source, many written in
JavaScript, Node.js (we like)
• Leverage existing dev skills to make maps (sound familiar?)
• Design your map with Mapbox editors, host it on Mapbox
with free or paid plan or on your own, display in your app
or site with Mapbox SDKs and libraries.
• Pinterest, Foursquare, Evernote, Github
mapbox.com

11. Mapbox Features
• Free plan, up through enterprise level
• Mapbox Streets - Powered by OpenStreetMap
• Mapbox Terrain ($)
• Mapbox Satellite ($)
• iOS SDK, Android SDK in development
• Mapbox.js - based on Leaflet
• APIs for geocoding, map markers, direct tile image access, routing
• TileMill

12. And OpenStreetMap
• “The Wikipedia of maps”
• 1.5 Million editors
• 12 Million miles of roads
• 80 Million Buildings
• Powers Mapbox Streets
• Problem with something on your map? Log on to
openstreetmap.org, fix it, watch it update on your Mapbox map
(and everyone else’s map, too)
mapbox.com/openstreetmap/openstreetmap.org

13. Other Alternatives
• Online mapping is a big world (h’yuk)
• Other options provide some or most of what we need
• ArcGIS (Esri)
• Nutiteq
• CloudMade
• Mapquest Open
• osmdroid - Android Library
• Route-Me - iOS Library

14. Simple Example
The Job:
• Design a simple map with Mapbox’s online editor
• Host it on Mapbox
• Display it in our Titanium App

15. usecloak.com

16. Mapbox Editor
• Select your colors
• Adjust Hue, Saturation,
Lightness, Alpha
• Save and copy the project ID
• Done

17. More Mapbox Editor Stuff
• Easy styling
• Terrain and satellite layers
• Draw markers, lines,
polygons
• Import from geojson, kml,
gpx, csv

18. Add the Map
Alloy Markup
!
<Window id="win" title="TiCloak">!
! <Module id="mapView" module="com.polancomedia.mapbox"
map="yourUserName.234jk2l3j" />!
</Window>!
!
Straight up Titanium
!
var mapbox = require('com.polancomedia.mapbox');!
!
var mapView = mapbox.createView({!
! map: 'yourUserName.234jk2l3j'!
});!
!
win.add(mapView);
https://github.com/adampax/TiCloak

19. The Titanium-Mapbox Module
• Wrapper for Mapbox iOS SDK
• github.com/adampax/titanium-mapbox
• Also check out:
• github.com/mapbox/mapbox-ios-sdk
• github.com/mapbox/mapbox-android-sdk
• Contribute!

20. The Titanium-Mapbox Module
• Supports Mapbox hosted and offline maps
• Tile caching
• Annotations, polygons, lines, routes
• More to come

21. • More styling
• More data
• More offline
Fun Mode

22. • Desktop map editor
• OS X, Windows, Linux
• Based on Mapnik
• Powered with Node.js
• Open source
• Turns non map people into map people
TileMill
mapbox.com/tilemill/

23. TileMill Options
• Read GeoJSON, Shapefiles, KML, PostGIS, SQLite, CSV, etc
• Organize the data as layers
• Style layers with CartoCSS
• Export as MBTiles file
• Load locally in the app
• Host on Mapbox, either on it’s own or as a layer of another map
• Or export as PNG, SVG, PDF, Mapnik XML
mapbox.com/tilemill/

24. A Layer

25. The Process
Geodata Import Style Export
oklahoma.geojson #oklahoma #oklahoma { … } oklahoma.mbtiles

26. CartoCSS Styling
• Map styling language for
TileMill
• Looks kind of like CSS
• Supports variables, zoom
level-based styling, applying
multiple styles to a layer
• mapbox.com/tilemill/docs/
manual/carto/
github.com/ajashton/pirate-map
#countries {!
::outline1, ::outline2, ::outline3 {!
line-color: @water;!
line-width: 1;!
line-join: round;!
line-opacity: 0.5;!
line-comp-op: multiply;!
}!
::outline1 { line-smooth: 12; }!
::outline2 { line-smooth: 24; }!
::outline3 { line-smooth: 48; }!
polygon-fill: lighten(@water,10);!
polygon-opacity: 0.6;!
}

27. MBTiles
• SQLite database, easy to transport
• Store x, y and zoom value of each tile along with a blob
image
• Cut out the redundant tiles (how many images of blue
ocean do we really need?)
mapbox.com/developers/mbtiles/

28. Before We Export
• Maps are made up of tiles
• We track x and y values of the tile, plus
the zoom (z) level
• z level 0 = Whole world in a single tile
• z level 17 = About a city block
• Each zoom level = 4z tiles
• Entire world at z0 = 1 tile
• Entire world at z17 = bazillion tiles
Zoom 0
mapbox.com/developers/guide/
Zoom 1

29. Trim Your Map
• Be selective on zoom range
• Trim your map to only export
what you need - a city,
neighborhood, etc.
• Consider only exporting the
layer/zoom level you need, and
apply it to the Mapbox Streets
map

30. Where are all the streets and buildings and stuff?
• By default, only country
outlines are loaded
• Some public data
available through built-in
Geodata browser
• OSM Data must be
imported manually
• Pretty easy to do with
OSM Bright

31. OSM Bright
• Tutorial for importing
OSM data into
TileMill
• Script builds TileMill
project with default
carto templates
github.com/mapbox/osm-bright

32. Import OSM Data using OSM Bright
• Better OSM Bright instructions:
• mapbox.com/tilemill/docs/guides/osm-bright-mac-
quickstart/
• Tips:
• Use Postgresapp and osm2pgsql
• Probably don’t need to download the world. Planet.osm:
400GB
• Use extracts of regions, cities instead

33. TM2 (development)
• OSM Data built right in! - no
more need to download
extracts
• Uses vector tiles
• Mobile SDK support still a
ways out
github.com/mapbox/tm2

34. Review
• Use the online Mapbox Editor to easily style street maps
of entire world for your app
• Titanium-Mapbox module
• Use TileMill for advanced styling and data display, and to
export to MBTiles for offline access
• OSM Bright to get up and running quickly with TileMill
and OSM data

35. Thanks!
Adam Paxton
adampaxton@polancomedia.com