iOS Mapping Customization and Interactivity
•
2 likes•1,652 views
The document discusses open mapping on iOS. It provides an overview of the default iOS mapping capabilities and limitations. It then describes how to use custom maps with open geodata and tools like TileMill to style data. It also introduces MapBox software libraries that integrate custom maps with Apple's MapKit to allow fully-featured mapping on iOS and OSX.
Recommended
Recommended
More Related Content
Similar to iOS Mapping Customization and Interactivity
Similar to iOS Mapping Customization and Interactivity (20)
More from Yandex
More from Yandex (20)
Recently uploaded
Recently uploaded (20)
iOS Mapping Customization and Interactivity
- 2. Open Mapping on iOS Justin Miller • MapBox YaC 2013 • Moscow • October 2013
- 3. Overview
- 4. Overview •What is iOS mapping like out of the box?
- 5. Overview •What is iOS mapping like out of the box? •What is geodata? How can you use it?
- 6. Overview •What is iOS mapping like out of the box? •What is geodata? How can you use it? •What software exists for custom mapping?
- 7. About Me
- 8. About Me •I live and work in Portland, USA
- 9. About Me •I live and work in Portland, USA •I’ve been building with Cocoa for ~10 years
- 10. About Me •I live and work in Portland, USA •I’ve been building with Cocoa for ~10 years •I lead iOS & OS X engineering at MapBox
- 11. About MapBox
- 12. About MapBox •We are pushing the space around open data & open source for maps
- 13. About MapBox •We are pushing the space around open data & open source for maps •Why? I will show you by way of iOS
- 14. About MapBox •We are pushing the space around open data & open source for maps •Why? I will show you by way of iOS •With open tech, we also leave options open
- 15. About MapBox •We are pushing the space around open data & open source for maps •Why? I will show you by way of iOS •With open tech, we also leave options open •No inherent lock-in
- 16. About MapBox •We are pushing the space around open data & open source for maps •Why? I will show you by way of iOS •With open tech, we also leave options open •No inherent lock-in •Mix vendors, software, and data
- 19. What Apple GivesYou •MapKit.framework •Available since iOS 3 (2009)
- 20. What Apple GivesYou •MapKit.framework •Available since iOS 3 (2009) •Incrementally improved in each iOS release
- 21. What Apple GivesYou •MapKit.framework •Available since iOS 3 (2009) •Incrementally improved in each iOS release •Apple vends their own maps
- 22. What Apple GivesYou •MapKit.framework •Available since iOS 3 (2009) •Incrementally improved in each iOS release •Apple vends their own maps •Pre-iOS 6, famously, they vended Google’s
- 24. Inherent Limitations •No custom styling
- 25. Inherent Limitations •No custom styling •No formal offline capabilities
- 26. Inherent Limitations •No custom styling •No formal offline capabilities •Weak interactivity
- 27. Inherent Limitations •No custom styling •No formal offline capabilities •Weak interactivity •Not fine-grained
- 28. Inherent Limitations •No custom styling •No formal offline capabilities •Weak interactivity •Not fine-grained •Not offline-capable
- 29. Inherent Limitations •No custom styling •No formal offline capabilities •Weak interactivity •Not fine-grained •Not offline-capable •Not at the pixel level
- 30. What Do We Need?
- 31. What Do We Need? 1.Custom maps
- 32. What Do We Need? 1.Custom maps 2.Software to integrate them
- 33. What Do We Need? 1.Custom maps 2.Software to integrate them 3.Apple’s blessing
- 34. What Do We Need? 1.Custom maps 2.Software to integrate them 3.Apple’s blessing •Alternate frameworks are ok!
- 35. What Do We Need? 1.Custom maps 2.Software to integrate them 3.Apple’s blessing •Alternate frameworks are ok! •I’ll explain more about this later
- 36. Custom Maps
- 37. Custom Maps •MapBox is building a cloud platform on OpenStreetMap
- 38. Custom Maps •MapBox is building a cloud platform on OpenStreetMap •OSM is like Wikipedia for maps
- 39. Custom Maps •MapBox is building a cloud platform on OpenStreetMap •OSM is like Wikipedia for maps •Over one million contributors
- 40. Custom Maps •MapBox is building a cloud platform on OpenStreetMap •OSM is like Wikipedia for maps •Over one million contributors •But the open tools also let you self-host
- 41. Custom Maps •MapBox is building a cloud platform on OpenStreetMap •OSM is like Wikipedia for maps •Over one million contributors •But the open tools also let you self-host •Start small, grow large
- 42. Custom Maps
- 43. Custom Maps •We make (and use) TileMill for styling geodata
- 44. Custom Maps •We make (and use) TileMill for styling geodata •TileMill works with both:
- 45. Custom Maps •We make (and use) TileMill for styling geodata •TileMill works with both: • Large (OSM extracts or full)
- 46. Custom Maps •We make (and use) TileMill for styling geodata •TileMill works with both: • Large (OSM extracts or full) • Small (vacation.geojson)
- 47. Can Be Combined!
- 48. Can Be Combined! •Use OSM for the base layer
- 49. Can Be Combined! •Use OSM for the base layer •Custom (or not) worldwide map
- 50. Can Be Combined! •Use OSM for the base layer •Custom (or not) worldwide map •Use alpha-transparent overlays for details
- 51. Can Be Combined! •Use OSM for the base layer •Custom (or not) worldwide map •Use alpha-transparent overlays for details •Brought in locally (bundled) or via the cloud (MapBox or other)
- 52. But I’m Not a Map Maker!
- 53. But I’m Not a Map Maker!
- 54. But I’m Not a Map Maker! •MapBox provides easy, slider-based styling of OSM in a web UI
- 55. But I’m Not a Map Maker! •MapBox provides easy, slider-based styling of OSM in a web UI •The point of TileMill is to make everyone a map maker!
- 56. But I’m Not a Map Maker! •MapBox provides easy, slider-based styling of OSM in a web UI •The point of TileMill is to make everyone a map maker! •Analogy: think about design assets in your application
- 57. Geodata
- 59. Geodata •Many formats: •GeoJSON, KML, Shapefile,YMapsML, PostGIS & SQLite databases, even CSV (+ more)
- 60. Geodata •Many formats: •GeoJSON, KML, Shapefile,YMapsML, PostGIS & SQLite databases, even CSV (+ more) •You can layer data together to style a map
- 63. Geodata russia.geojson Import #russia layer Export Russia map image Code/Style #russia { ... }
- 64. Geodata russia.geojson Import #russia layer Export Russia map image Code/Style #russia { ... }
- 65. Geodata russia.geojson Import #russia layer Export Russia map image Code/Style #russia { ... }
- 66. Geodata russia.geojson Import #russia layer Export Russia map image Code/Style #russia { ... }
- 79. TileMill is Cross-Platform •Supports OS X,Windows, and Linux
- 80. TileMill is Cross-Platform •Supports OS X,Windows, and Linux •Also can be run as a web service
- 81. TileMill is Cross-Platform •Supports OS X,Windows, and Linux •Also can be run as a web service •It’s made of Node.js
- 82. TileMill is Cross-Platform •Supports OS X,Windows, and Linux •Also can be run as a web service •It’s made of Node.js •Entirely open source and free
- 83. TileMill is Cross-Platform •Supports OS X,Windows, and Linux •Also can be run as a web service •It’s made of Node.js •Entirely open source and free •Help us make it great(er)!
- 85. Maps Produce Tiles •2D plane: x & y values
- 86. Maps Produce Tiles •2D plane: x & y values •Detail zooming: z value
- 87. Maps Produce Tiles •2D plane: x & y values •Detail zooming: z value •Whole world in one tile at z1
- 88. Maps Produce Tiles •2D plane: x & y values •Detail zooming: z value •Whole world in one tile at z1 •Maybe one city block at z17
- 90. Tiles Are Numerous •For zoom level z there are 4z tiles
- 91. Tiles Are Numerous •For zoom level z there are 4z tiles •Whole world at once: 1 tile (40)
- 92. Tiles Are Numerous •For zoom level z there are 4z tiles •Whole world at once: 1 tile (40) •Whole world by blocks: 417 tiles (!)
- 93. Tiles Are Numerous •For zoom level z there are 4z tiles •Whole world at once: 1 tile (40) •Whole world by blocks: 417 tiles (!) •Transport at any reasonable scale becomes a problem
- 94. MBTiles
- 95. MBTiles •Take many tiles (z, x, y values + image data)
- 96. MBTiles •Take many tiles (z, x, y values + image data) •Stuff them into database rows using SQLite
- 97. MBTiles •Take many tiles (z, x, y values + image data) •Stuff them into database rows using SQLite •Easily compress, transport, and bundle
- 100. or
- 101. What Do We Need? 1.Custom maps ✓ 2.Software to integrate them ← 3.Apple’s blessing
- 102. Software
- 103. Software •Apple’s MapKit allows tile overlays
- 104. Software •Apple’s MapKit allows tile overlays •Since iOS 4 (MKOverlay protocol)
- 105. Software •Apple’s MapKit allows tile overlays •Since iOS 4 (MKOverlay protocol) •-drawMapRect:... (similar to -drawRect:)
- 106. Software •Apple’s MapKit allows tile overlays •Since iOS 4 (MKOverlay protocol) •-drawMapRect:... (similar to -drawRect:) •However, you can’t turn off Apple’s maps*
- 107. Software •Apple’s MapKit allows tile overlays •Since iOS 4 (MKOverlay protocol) •-drawMapRect:... (similar to -drawRect:) •However, you can’t turn off Apple’s maps* •Loading artifacts under your layer(s)
- 108. Software •Apple’s MapKit allows tile overlays •Since iOS 4 (MKOverlay protocol) •-drawMapRect:... (similar to -drawRect:) •However, you can’t turn off Apple’s maps* •Loading artifacts under your layer(s) •Network/rendering overhead
- 109. Software •Apple’s MapKit allows tile overlays •Since iOS 4 (MKOverlay protocol) •-drawMapRect:... (similar to -drawRect:) •However, you can’t turn off Apple’s maps* •Loading artifacts under your layer(s) •Network/rendering overhead •Unpredictable caching & rendering
- 110. So We Built...
- 111. So We Built... •MapBox iOS SDK
- 112. So We Built... •MapBox iOS SDK •Ground-up workalike of MapKit
- 113. So We Built... •MapBox iOS SDK •Ground-up workalike of MapKit •Entirely open source & free
- 114. So We Built... •MapBox iOS SDK •Ground-up workalike of MapKit •Entirely open source & free •Fully-featured
- 115. Example Usage
- 119. Example Usage •RMMapBoxSource •[[RMMapBoxSource alloc] initWithMapID:@”justin.russia”] •RMMBTilesSource •[[RMMapBoxSource alloc] initWithTileSetResource:@”russia” ofType:@”mbtiles”]
- 120. Interactivity
- 121. Interactivity •Simple key/value query on a CGPoint at the current zoom level
- 122. Interactivity •Simple key/value query on a CGPoint at the current zoom level •[mapView formattedOutputOfType:RMInteractiveSourceOutputTypeFull forPoint:gesturePoint]
- 123. Interactivity •Simple key/value query on a CGPoint at the current zoom level •[mapView formattedOutputOfType:RMInteractiveSourceOutputTypeFull forPoint:gesturePoint] •Returns HTML that can be used in UIWebView
- 124. Attention to Detail
- 125. •User location tracking Attention to Detail
- 126. •User location tracking •Expected behavior & gestures Attention to Detail
- 127. •User location tracking •Expected behavior & gestures •Ready for iOS 7! Attention to Detail
- 128. One More Thing...
- 129. Yet another Thing? ;-)
- 130. What Do We Need? 1.Custom maps ✓ 2.Software to integrate them ✓ 3.Apple’s blessing ←
- 131. iOS 7 MapKit
- 132. iOS 7 MapKit •iOS 7 MapKit lets you bring your own tiles
- 133. iOS 7 MapKit •iOS 7 MapKit lets you bring your own tiles •Apple’s official blessing of open maps
- 134. iOS 7 MapKit •iOS 7 MapKit lets you bring your own tiles •Apple’s official blessing of open maps •And it works on OS X 10.9!
- 135. Announcing MBXMapKit
- 136. Announcing MBXMapKit
- 137. MBXMapKit
- 138. MBXMapKit •Builds on Apple’s MapKit
- 139. MBXMapKit •Builds on Apple’s MapKit •iOS 7+ and OS X 10.9+
- 140. MBXMapKit •Builds on Apple’s MapKit •iOS 7+ and OS X 10.9+ •No other dependencies
- 141. MBXMapKit •Builds on Apple’s MapKit •iOS 7+ and OS X 10.9+ •No other dependencies
- 142. Simpler Integration
- 143. Simpler Integration •One class + one line of code!
- 144. Simpler Integration •One class + one line of code! 1. #import <MBXMapKit/MBXMapKit.h>
- 145. Simpler Integration •One class + one line of code! 1. #import <MBXMapKit/MBXMapKit.h> 2. -[MBXMapView initWithFrame:mapID:] or -[MBXMapView initWithFrame:MBTilesPath:]
- 148. Free & Open Source
- 149. Free & Open Source •MBXMapKit will continue to evolve
- 150. Free & Open Source •MBXMapKit will continue to evolve •Will parallel development of our SDK
- 151. Free & Open Source •MBXMapKit will continue to evolve •Will parallel development of our SDK •This is a great validation by Apple of the value of open mapping!
- 152. Review
- 153. Review •Custom maps from geodata using open source tools
- 154. Review •Custom maps from geodata using open source tools •Native iOS interaction with open source libraries
- 155. Review •Custom maps from geodata using open source tools •Native iOS interaction with open source libraries •Lets you focus on combining great services together
- 156. ThankYou!