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.

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

17. What Apple GivesYou

18. What Apple GivesYou
•MapKit.framework

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

23. Inherent Limitations

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

58. Geodata
•Many formats:

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

61. TileMill Concepts

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 { ... }

68. Geodata Import
Export Code/Style

69. Geodata Import
Export Code/Style

70. Geodata Import
Export Code/Style

71. Geodata Import
Export Code/Style

72. Geodata Import
Export Code/Style

78. TileMill is Cross-Platform

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)!

84. Maps Produce Tiles

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

89. Tiles Are Numerous

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

116. Example Usage
•RMMapBoxSource

117. Example Usage
•RMMapBoxSource
•[[RMMapBoxSource alloc]
initWithMapID:@”justin.russia”]

118. Example Usage
•RMMapBoxSource
•[[RMMapBoxSource alloc]
initWithMapID:@”justin.russia”]
•RMMBTilesSource

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!

157. ThankYou!
•Contact Info
•@incanus77
•justin@mapbox.com

158. ThankYou!
•Contact Info
•@incanus77
•justin@mapbox.com
•Software
•github.com/mapbox/mapbox-ios-sdk
•github.com/mapbox/mbxmapkit
•tilemill.com

159. ThankYou!
•Contact Info
•@incanus77
•justin@mapbox.com
•Software
•github.com/mapbox/mapbox-ios-sdk
•github.com/mapbox/mbxmapkit
•tilemill.com
•Slides at tinyurl.com/MapBoxYaC13