Mapping With Xamarin - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

XAMARIN.ANDROID

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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/

Slide 8

Slide 8 text

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:

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

XAMARIN.ANDROID DEMO

Slide 12

Slide 12 text

XAMARIN.iOS

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

XAMARIN.iOS DEMO

Slide 18

Slide 18 text

XAMARIN.FORMS

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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/

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

XAMARIN.FORMS DEMO

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

THANK YOU!

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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