Building Custom Maps for Titanium
with Mapbox and OpenStreetMap
Adam Paxton

tiConf NY 2014

adampaxton@polancomedia.com

...
Overview
• Current Mapping Options in Titanium
• Simple Map Styling with Mapbox
• Crazy Map Stuff with TileMill
• Lunch
Ti Maps Today
• Apple Maps

• Supported through Ti API

• iOS Only

• Google Maps

• Supported for Android through
Ti API
...
Some Limitations
• No custom styling
• No complete offline capability*
• Limited map data options
So what?
pinterest.com/timoa/mobile-ui-maps/
Different?
Really Different?
mapbox.com/tilemill/
So what about offline?
Enter Mapbox
• Map design and hosting company
• Pretty much all tools are open source, many written in
JavaScript, Node.js...
Mapbox Features
• Free plan, up through enterprise level
• Mapbox Streets - Powered by OpenStreetMap
• Mapbox Terrain ($)
...
And OpenStreetMap
• “The Wikipedia of maps”
• 1.5 Million editors
• 12 Million miles of roads
• 80 Million Buildings
• Pow...
Other Alternatives
• Online mapping is a big world (h’yuk)
• Other options provide some or most of what we need
• ArcGIS (...
Simple Example
The Job:
• Design a simple map with Mapbox’s online editor
• Host it on Mapbox
• Display it in our Titanium...
usecloak.com
Mapbox Editor
• Select your colors

• Adjust Hue, Saturation,
Lightness, Alpha

• Save and copy the project ID

• Done
More Mapbox Editor Stuff
• Easy styling
• Terrain and satellite layers
• Draw markers, lines,
polygons
• Import from geojs...
Add the Map
Alloy Markup

!
<Window id="win" title="TiCloak">!
! <Module id="mapView" module="com.polancomedia.mapbox"
map...
The Titanium-Mapbox Module
• Wrapper for Mapbox iOS SDK
• github.com/adampax/titanium-mapbox
• Also check out:
• github.co...
The Titanium-Mapbox Module
• Supports Mapbox hosted and offline maps
• Tile caching
• Annotations, polygons, lines, routes
...
• More styling
• More data
• More offline
Fun Mode
• Desktop map editor
• OS X, Windows, Linux
• Based on Mapnik
• Powered with Node.js
• Open source
• Turns non map people ...
TileMill Options
• Read GeoJSON, Shapefiles, KML, PostGIS, SQLite, CSV, etc
• Organize the data as layers
• Style layers wi...
A Layer
The Process
Geodata Import Style Export
oklahoma.geojson #oklahoma #oklahoma { … } oklahoma.mbtiles
CartoCSS Styling
• Map styling language for
TileMill

• Looks kind of like CSS

• Supports variables, zoom
level-based sty...
MBTiles
• SQLite database, easy to transport
• Store x, y and zoom value of each tile along with a blob
image
• Cut out th...
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 ...
Trim Your Map
• Be selective on zoom range

• Trim your map to only export
what you need - a city,
neighborhood, etc.

• C...
Where are all the streets and buildings and stuff?
• By default, only country
outlines are loaded
• Some public data
avail...
OSM Bright
• Tutorial for importing
OSM data into
TileMill
• Script builds TileMill
project with default
carto templates
g...
Import OSM Data using OSM Bright
• Better OSM Bright instructions:
• mapbox.com/tilemill/docs/guides/osm-bright-mac-
quick...
TM2 (development)
• OSM Data built right in! - no
more need to download
extracts

• Uses vector tiles

• Mobile SDK suppor...
Review
• Use the online Mapbox Editor to easily style street maps
of entire world for your app
• Titanium-Mapbox module
• ...
Thanks!
Adam Paxton

adampaxton@polancomedia.com
Upcoming SlideShare
Loading in …5
×

Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiConf NY 2014

6,181 views
5,499 views

Published on

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

Published in: Internet, Technology

Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiConf NY 2014

  1. 1. Building Custom Maps for Titanium with Mapbox and OpenStreetMap Adam Paxton tiConf NY 2014 adampaxton@polancomedia.com
 github.com/adampax
 @adampax
  2. 2. Overview • Current Mapping Options in Titanium • Simple Map Styling with Mapbox • Crazy Map Stuff with TileMill • Lunch
  3. 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. 4. Some Limitations • No custom styling • No complete offline capability* • Limited map data options
  5. 5. So what?
  6. 6. pinterest.com/timoa/mobile-ui-maps/
  7. 7. Different?
  8. 8. Really Different? mapbox.com/tilemill/
  9. 9. So what about offline?
  10. 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. 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. 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. 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. 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. 15. usecloak.com
  16. 16. Mapbox Editor • Select your colors • Adjust Hue, Saturation, Lightness, Alpha • Save and copy the project ID • Done
  17. 17. More Mapbox Editor Stuff • Easy styling • Terrain and satellite layers • Draw markers, lines, polygons • Import from geojson, kml, gpx, csv
  18. 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. 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. 20. The Titanium-Mapbox Module • Supports Mapbox hosted and offline maps • Tile caching • Annotations, polygons, lines, routes • More to come
  21. 21. • More styling • More data • More offline Fun Mode
  22. 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. 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. 24. A Layer
  25. 25. The Process Geodata Import Style Export oklahoma.geojson #oklahoma #oklahoma { … } oklahoma.mbtiles
  26. 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. 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. 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. 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. 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. 31. OSM Bright • Tutorial for importing OSM data into TileMill • Script builds TileMill project with default carto templates github.com/mapbox/osm-bright
  32. 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. 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. 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. 35. Thanks! Adam Paxton adampaxton@polancomedia.com

×