0
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

4,030

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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×