How to optimize your map display when you have large amount of data

1. Proprietary and
confidential
Aurore Jard
Mobile Lead Developer
“Design for tomorrow”
“Deconstruct what you know”
“Simplify”
“Love what you did”
@AuroreJard

2. April 12, 2016
Don’t lose your way optimizing
maps rendering !
Talk : map optimizations ! Confidential

3. Requirements
Confidential
● Display
○ Data as locality
○ Zone on map
● User feature
○ Move
○ Zoom
● Access offline
Talk : map optimizations !

4. SDK Fight
Confidential
● Map
○ https://developer.apple.com/maps/
● Google
○ https://developers.google.com/maps/documentation/ios-sdk/
Talk : map optimizations !
Google Map VS Apple Maps

5. SDK Fight
Confidential
● Official documentation
○ Maps
○ Google iOS SDK
● Application also available on android : same experience on both
● Map more precise
● More possibilities
Talk : map optimizations !

6. First : easy steps
Confidential
● Get Data
● Display data
Talk : map optimizations !

7. What about really a lot of data ?
ConfidentialTalk : map optimizations !

8. First impressions
Confidential
● UI/UX remarks
○ Users are humans !
■ Adapt data according to zoom level
■ Zone, details : only on high level of zoom
■ Regroup data that eye can dissociate
● Performances
○ Avoid treating data you don’t see...
Talk : map optimizations !

9. First : clustering
ConfidentialTalk : map optimizations !

10. First : clustering
Confidential
● Regroup close data
○ easier user reading
○ Indication on number of location
in one group
● Clustering possibilities :
○ Grid based clustering
○ Distance based clustering
Talk : map optimizations !

11. Easy optimizations :
Confidential
● Grid based clustering
Talk : map optimizations !

12. Easy optimizations :
Confidential
● Distance-based Clustering
Talk : map optimizations !

13. Second : don’t treat invisible data
Confidential
● Limitation :
○ Zoom level
Talk : map optimizations !

14. Third : More optimization on sorting data
Confidential
● Why does it take so long ?
● Iterate over each location : 0(n)
● Every move from the camera (move, zoom) need to iterate again
Talk : map optimizations !
for location in locations {
if visibleBounds.containsCoordinate(location.position) {
// item should be display
}
else {
// ignore this location
}

15. Third : More optimization on sorting data
Confidential
● Reduce complexity by using QuadTree object & algorithms !
● Objective : subdivision of 2D space
● QuadTree = Tree with 4 leafs
Talk : map optimizations !

16. Third : More optimization on sorting data
Confidential
● Step 1 :
○ Build the tree from your initial data
○ Keep iteration on all locations on that process
■ o(n) but only once
Talk : map optimizations !

17. Third : More optimization on sorting data
Confidential
● Step 2 :
○ Search for locations in a specific area
■ Everytime you move / zoom
Talk : map optimizations !

18. Third : More optimization on sorting data
Confidential
● Why is it faster ?
○ For loop only done once at initialisation
○ Search then (user interactions)
■ O(h) (h = max depth of node in the tree)
Talk : map optimizations !
h=0
h=1
h=2
h=3

19. Links / Resources
Confidential
● Code :
○ Open Source library for clustering with Google Map iOS SDK
○ Display Large Amount of Data on iOS Map
● MapKit Apple Sample
○ Apple Sample clustering
● Other
○ QuadTree Interactive Explanations
Talk : map optimizations !

20. Have fun with maps ;)
Thanks !
ConfidentialTalk : map optimizations !

21. Proprietary and
confidential
@NurunMTL
CURIOUS TO KNOW MORE
Follow us
Nurun.com/NurunMontreal