Building Custom Maps for Titanium with Mapbox and OpenStreetMap
•
10 j'aime•9,294 vues
How to create and style custom maps for you Appcelerator Titanium apps using tools from Mapbox and data from the OpenStreetMap project
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (19)
Similaire à Building Custom Maps for Titanium with Mapbox and OpenStreetMap
Similaire à Building Custom Maps for Titanium with Mapbox and OpenStreetMap (20)
Plus de Adam Paxton
Plus de Adam Paxton (7)
Dernier
Dernier (20)
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
- 5. So what?
- 7. Different?
- 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