$30 off During Our Annual Pro Sale. View Details »

Mapping With Xamarin

SmartyP
January 20, 2015

Mapping With Xamarin

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

SmartyP

January 20, 2015
Tweet

More Decks by SmartyP

Other Decks in Programming

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