Download as PDF, PPTX
Uploaded byAdam Paxton
Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiConf NY 2014
This document outlines the use of Mapbox and OpenStreetMap for building custom maps with Titanium, highlighting features such as simple map styling, offline capabilities, and various SDKs. It discusses the process of designing maps with Mapbox editors, hosting options, and utilizing the Titanium-Mapbox module for integration into applications. The document also covers advanced styling using TileMill and importing data from OpenStreetMap for enhanced map features.
More Related Content
Similar to Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiConf NY 2014
![Computer Networks 01[1 using all terms].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/computernetworks011-251214040533-327dd9f8-thumbnail.jpg?width=640&height=640&fit=bounds)
Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiConf NY 2014
- 1. Building Custom Mapsfor Titanium with Mapbox and OpenStreetMap Adam Paxton tiConf NY 2014 adampaxton@polancomedia.com github.com/adampax @adampax
- 2. Overview • Current MappingOptions 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 • Nocustom styling • No complete offline capability* • Limited map data options
- 5.
- 6.
- 7.
- 8.
- 9. So what aboutoffline?
- 10. Enter Mapbox • Mapdesign 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 • Freeplan, 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 • “TheWikipedia 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 • Onlinemapping 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.
- 16. Mapbox Editor • Selectyour colors • Adjust Hue, Saturation, Lightness, Alpha • Save and copy the project ID • Done
- 17. More Mapbox EditorStuff • Easy styling • Terrain and satellite layers • Draw markers, lines, polygons • Import from geojson, kml, gpx, csv
- 18. Add the Map AlloyMarkup ! <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 mapeditor • 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 • ReadGeoJSON, 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.
- 25. The Process Geodata ImportStyle Export oklahoma.geojson #oklahoma #oklahoma { … } oklahoma.mbtiles
- 26. CartoCSS Styling • Mapstyling 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 allthe 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 • Tutorialfor importing OSM data into TileMill • Script builds TileMill project with default carto templates github.com/mapbox/osm-bright
- 32. Import OSM Datausing 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) • OSMData 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 theonline 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.