Best VIP Call Girls Noida Sector 75 Call Me: 8448380779
Building Custom Maps for Titanium with Mapbox and OpenStreetMap
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
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
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/
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