Mapping With Xamarin

An overview presentation on working with mapping controls with Xamarin.Android, Xamarin.iOS, and Xamarin.Forms.

Transcript

1. MAPPING WITH
   Presented by Roger Peters  
   Virtual Xamarin Users Group  
   January 20th, 2015
   XAMARIN
   h#ps://github.com/SmartyP/xamarin-­‐mapping-­‐sample-­‐apps
   

   View Slide

2. ALL MOBILE
   Roger Peters (@SmartyP)  
   Independent Mobile Developer  
   AllMobileEverything.com  
   SmartyPantsCoding.com  
   SmartyP.net
   EVERYTHING
   

   View Slide

3. To Embed or Not to Embed
   • What are you mapping? (Points, Regions, etc.)
   • How many items are you mapping?
   • What functionality does your user need/expect?
   • Time / Effort considerations
   

   View Slide

4. Let’s Talk About Mapping Using..
   • Xamarin.Android
   • Xamarin.iOS
   • Xamarin.Forms
   

   View Slide

5. XAMARIN.ANDROID
   

   View Slide

6. Android Mapping Basics
   • Launch Google Maps
   • Embed Google Maps
   • Embed 3rd Party Map control (Bing, TomTom, etc.)*
   * not covered here
   

   View Slide

7. Launch Map Activity
   Open Google Maps to GPS coordinate
   Open Google Maps to Street View
   Reference: h#p://developer.xamarin.com/guides/android/pla>orm_features/
   maps_and_locaAon/maps/part_1_-­‐_maps_applicaAon/
   

   View Slide

8. Embed Google Maps API v2
   Reference: h#p://developer.xamarin.com/guides/android/pla>orm_features/
   maps_and_locaAon/maps/part_2_-­‐_maps_api/
   Use MapFragment in Activity layout XML:
   Get reference to control from code behind:
   

   View Slide

9. Setup Your App for Google Maps
   • Generate a SHA1 fingerprint from signing .keystore
   • Get a Google Maps API key
   • Add API key to AndroidManifest.xml
   • Add permissions for INTERNET,
   ACCESS_NETWORK_STATE, and WRITE_EXTERNAL_STORAGE,
   etc.
   ref:    
   h#ps://code.google.com/apis/console/  
   h#ps://developers.google.com/maps/documentaAon/android/start#obtain_a_google_maps_api_key
   

   View Slide

10. Embed Google Maps API v2 (cont’d)
    Reference:
    h#p://developer.xamarin.com/guides/android/pla>orm_features/maps_and_locaAon/maps/
    part_2_-­‐_maps_api/
    Common GoogleMap methods and properties:
    • MapType (Normal, Satellite, Hybrid, Terrain)
    • MoveCamera
    • Markers, Overlays
    

    View Slide

11. XAMARIN.ANDROID
    DEMO
    

    View Slide

12. XAMARIN.iOS
    

    View Slide

13. iOS Mapping Basics
    • Launch Maps app
    • Embed Mapkit control
    • Embed 3rd party map control (Google Maps, etc.)*
    * not covered here
    

    View Slide

14. Launch Map App
    Open a formatted URL:
    Reference:
    h#p://forums.xamarin.com/discussion/9894/how-­‐can-­‐i-­‐launch-­‐map-­‐app-­‐naAve-­‐for-­‐geJng-­‐direcAons
    h#ps://developer.apple.com/library/ios/featuredarAcles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html#//apple_ref/doc/uid/
    TP40007899-­‐CH5-­‐SW1
    

    View Slide

15. Embed MapKit Control
    References:
    h#p://developer.xamarin.com/guides/ios/pla>orm_features/ios_maps/  
    h#p://developer.xamarin.com/guides/ios/pla>orm_features/ios_maps_walkthrough/  
    h#p://developer.xamarin.com/recipes/ios/content_controls/map_view/add_an_overlay_to_a_map/
    Create MKMapView in code (or Storyboard):
    Common MKMapView methods and properties:
    • MapType (Standard, Satellite, Hybrid)
    • ZoomEnabled, ScrollEnabled
    • ShowUserLocation
    • Annotations, Overlays
    

    View Slide

16. Setup Your App for MapKit
    • Update info.plist to include
    NSLocationWhenInUseUsageDescription and
    NSLocationAlwaysUsageDescription strings
    • Call RequestWhenInUseAuthorization() on startup
    Note: new requirements for iOS8+
    

    View Slide

17. XAMARIN.iOS
    DEMO
    

    View Slide

18. XAMARIN.FORMS
    

    View Slide

19. Xamarin.Forms Mapping Basics
    • Launch native mapping app (ref: platform examples)
    • Embed Xamarin.Forms Map control
    • Embed 3rd party map controls (ArcGIS, etc.)*
    * would likely require creating custom renderer wrappers
    per platform
    

    View Slide

20. Per Platform Setup
    iOS - Must add 2 text strings to Info.plist for
    iOS8+
    Android - Must include Google Maps API key in
    AndroidManifest.xml and include app
    permissions
    Windows Phone - Must add needed capabilities
    to WMAppManifest.xml
    Reference:
    h#p://developer.xamarin.com/guides/cross-­‐pla>orm/xamarin-­‐forms/working-­‐with/maps/
    

    View Slide

21. Xamarin.Forms Map Control
    Created via code:
    Reference:
    h#p://developer.xamarin.com/guides/cross-­‐pla>orm/xamarin-­‐forms/working-­‐with/maps/
    

    View Slide

22. Xamarin.Forms Map Control (cont’d)
    Created via XAML:
    Reference:
    h#p://developer.xamarin.com/guides/cross-­‐pla>orm/xamarin-­‐forms/working-­‐with/maps/
    

    View Slide

23. Xamarin.Forms.Map Control
    References:
    h#p://developer.xamarin.com/guides/cross-­‐pla>orm/xamarin-­‐forms/working-­‐with/maps/
    Common Map methods and properties:
    • MapType (Street, Satellite, Hybrid)
    • HasZoomEnabled, HasScrollEnabled
    • IsShowingUser
    • Pins
    

    View Slide

24. XAMARIN.FORMS
    DEMO
    

    View Slide

25. Advanced Maps - Marker Clustering
    References:
    h#ps://developers.google.com/maps/documentaAon/android/uAlity/marker-­‐clustering  
    h#p://robots.thoughtbot.com/how-­‐to-­‐handle-­‐large-­‐amounts-­‐of-­‐data-­‐on-­‐maps  
    h#p://blogs.msdn.com/b/bingdevcenter/archive/2013/10/15/clustering-­‐pushpins-­‐in-­‐windows-­‐store-­‐apps.aspx
    Grouping large
    numbers of markers
    into group markers
    to avoid plotting
    thousands of items
    each draw call.
    Included in Google
    Maps Android API
    Utility Library.
    Create your own on
    other platforms.
    

    View Slide

26. Mapping With Xamarin Summary
    • Each approach requires some level of setup
    • There is variance in capabilities between mapping
    platforms
    • Xamarin.Forms.Maps provides cross-platform
    approach with common map functions
    

    View Slide

27. THANK YOU!
    

    View Slide

28. Q&A
    h#ps://github.com/SmartyP/xamarin-­‐mapping-­‐sample-­‐apps
    

    View Slide

29. ALL MOBILE
    Roger Peters (@SmartyP)  
    Independent Mobile Developer  
    AllMobileEverything.com  
    SmartyPantsCoding.com  
    SmartyP.net
    EVERYTHING
    

    View Slide