Date post: | 23-Aug-2014 |
Category: |
Internet |
Upload: | adam-paxton |
View: | 1,774 times |
Download: | 4 times |
Building Custom Maps for Titanium with Mapbox and OpenStreetMap
Adam PaxtontiConf NY 2014
[email protected]/adampax@adampax
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
• Available for iOS through Community Modules
Some Limitations
• No custom styling
• No complete offline capability*
• Limited map data options
So what?
Different?
So what about offline?
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
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
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
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
Simple Example
The Job:
• Design a simple map with Mapbox’s online editor
• Host it on Mapbox
• Display it in our Titanium App
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 geojson, kml, gpx, csv
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
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!
The Titanium-Mapbox Module
• Supports Mapbox hosted and offline maps
• Tile caching
• Annotations, polygons, lines, routes
• More to come
• 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 into map people
TileMill
mapbox.com/tilemill/
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/
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 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;!}
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/
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
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
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
OSM Bright
• Tutorial for importing OSM data into TileMill
• Script builds TileMill project with default carto templates
github.com/mapbox/osm-bright
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
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
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