Let's Map It! DevFest Hamburg 2016

In this session you will get an overview what we can do these days with Google Maps on Android. A small history recap will be given and also a guide for the setup. We will learn, how we can change the styling of the map, using overlays, heat maps, street view and how we can cluster markers.

Transcript

1. #DevFestHH www.immobilienscout24.de Let‘s Map It! Hasan Hosgel – DevFest Hamburg 2016
2. #DevFestHH #PERFMATTERS for Android | Hasan Hosgel Immobilien Scout GmbH Location: Berlin Employees: ~ 520 > 850.000 ads per month > 787 M visits in 2014* > 6.5 M Android downloads *source: comScore Digital Analytix, January 2015, complete IS24 (Portal & Mobile)
3. #DevFestHH History 1.Maps V1 was tied to the Android Platform version 2.Tiles load whole Bitmaps 3.You have to extend MapsActivity 4.You could only use one Map at a time Let‘s Map It!| Hasan Hosgel
4. Source: http://giphy.com/gifs/sad-kawaii-pretty-10XOyCb09KyjLy
5. #DevFestHH What was next? 1.Field Trip by Niantic (creators of Ingress & Pokémon Go) 1.The new Maps SDK proof of concept 2.Reverse Engineered by some developers Let‘s Map It!| Hasan Hosgel
6. #DevFestHH Introducing new SDK Version 1.Maps V2 is part of Google Play Services 2.Tiles load paths and render 3D models 3.Finally MapsFragment 4.You can show several Maps at the same time 5.Independent Updates with Google Play Services down to Gingerbread Let‘s Map It!| Hasan Hosgel
7. #DevFestHH How to Start (new project) 1. Use Map template in Android Studio 2. Obtain API key for build type debug 1. Open the URL in app/src/debug/res/values/google_maps_api.xml 2. Create new API project or select existing one 3. Copy the created API key and update the file 3. Obtain API key for build type release 1.keytool -list -v -keystore mystore.keystore –alias myAlias 2. Add the SHA1 hash to the API key and the package name Let‘s Map It!| Hasan Hosgel
8. #DevFestHH How to Start (new project) Let‘s Map It!| Hasan Hosgel
9. #DevFestHH How to Start (existing project) 1. Obtain API key for build types 1.keytool -list -v -keystore mystore.keystore –alias myAlias 2. Add the SHA1 hash to the API key and the package name 2. Add API key to the AndroidManifest.xml 1.<meta-data android:name="com.google.android.geo.API_KEY" android:value=”$API_KEY"/> Let‘s Map It!| Hasan Hosgel
10. #DevFestHH But Wait! Let‘s Map It!| Hasan Hosgel
11. #DevFestHH But Wait! 1. Currently we are bound to Google Play Services Let‘s Map It!| Hasan Hosgel
12. #DevFestHH But Wait! 1. Currently we are bound to Google Play Services 2. Check if Play Services is available: 1.GoogleApiAvailablility. isGooglePlayServicesAvailable(Context context) Let‘s Map It!| Hasan Hosgel
13. #DevFestHH But Wait! 1. Currently we are bound to Google Play Services 2. Check if Play Services is available: 1.GoogleApiAvailablility. isGooglePlayServicesAvailable(Context context) 2. If not available Let‘s Map It!| Hasan Hosgel
14. #DevFestHH But Wait! 1. Currently we are bound to Google Play Services 2. Check if Play Services is available: 1.GoogleApiAvailablility. isGooglePlayServicesAvailable(Context context) 2. If not available 1. Show error message / dummy map Let‘s Map It!| Hasan Hosgel
15. #DevFestHH But Wait! 1. Currently we are bound to Google Play Services 2. Check if Play Services is available: 1.GoogleApiAvailablility. isGooglePlayServicesAvailable(Context context) 2. If not available 1. Show error message / dummy map 2. Use different maps provider/ service Let‘s Map It!| Hasan Hosgel
16. #DevFestHH Android Wear 1. We can use the normal Map 1. Think about the different user experience 2. Use the DismissOverlayView Let‘s Map It!| Hasan Hosgel
17. #DevFestHH How To Show A Map Let‘s Map It!| Hasan Hosgel
18. #DevFestHH How To Show A Map 1. Add MapFragment or MapView to your layout Let‘s Map It!| Hasan Hosgel
19. #DevFestHH How To Show A Map 1. Add MapFragment or MapView to your layout 2. Implement OnMapReadyCallback Let‘s Map It!| Hasan Hosgel
20. #DevFestHH How To Show A Map 1. Add MapFragment or MapView to your layout 2. Implement OnMapReadyCallback 3. Call the method getMapAsync(OnMapReadyCallback callback) Let‘s Map It!| Hasan Hosgel
21. #DevFestHH How To Show A Map 1. Add MapFragment or MapView to your layout 2. Implement OnMapReadyCallback 3. Call the method getMapAsync(OnMapReadyCallback callback) 4. Work with the map you get from the listener Let‘s Map It!| Hasan Hosgel
22. #DevFestHH What Can We Do With Maps 1. Showing different Map types: Normal, Hybrid, Satellite and Terrain 2. Showing ZoomControls, MyLocation, compass 3. Allowing different gestures, like zooming, rotation & scrolling Let‘s Map It!| Hasan Hosgel
23. #DevFestHH Marker Let‘s Map It!| Hasan Hosgel @Override public void onMapReady(GoogleMap map) { map.addMarker(new MarkerOptions() .position(new LatLng(53.550089838999405, 9.987046618957493)) .title("DevFest Hamburg")); }
24. #DevFestHH Marker with Custom Icon Let‘s Map It!| Hasan Hosgel @Override public void onMapReady(GoogleMap map) { map.addMarker(new MarkerOptions() .position(new LatLng(53.550089838999405, 9.987046618957493)) .icon(BitmapDescriptorFactory.fromResource(R.drawable.dfhh))); }
25. #DevFestHH Marker with Custom Icon Let‘s Map It!| Hasan Hosgel @Override public void onMapReady(GoogleMap map) { map.addMarker(new MarkerOptions() .position(new LatLng(53.550089838999405, 9.987046618957493)) .icon(BitmapDescriptorFactory.fromResource(R.drawable.dfhh))); } Don't create a new BitmapDescriptor for each marker. Reuse them toavoid OutOfMemoryErrors.
26. #DevFestHH Info Window for Marker Let‘s Map It!| Hasan Hosgel @Override public void onMapReady(GoogleMap map) { map.addMarker(new MarkerOptions() .position(new LatLng(53.550089838999405, 9.987046618957493)) .icon(BitmapDescriptorFactory.fromResource(R.drawable.dfhh)) .title("DevFest Hamburg")); }
27. #DevFestHH Info Window for Marker Let‘s Map It!| Hasan Hosgel
28. #DevFestHH Showing Shapes 1. Polyline 2. Circle 3. Polygon Let‘s Map It!| Hasan Hosgel
29. #DevFestHH Showing Polygons Let‘s Map It!| Hasan Hosgel
30. #DevFestHH Showing Polygons Let‘s Map It!| Hasan Hosgel @Override public void onMapReady(GoogleMap map) { map.addPolygon(new PolygonOptions() .addAll(createRectangle(new LatLng(-20, 130), 5, 5)) .addHole(createRectangle(new LatLng(-22, 128), 1, 1)) .addHole(createRectangle(new LatLng(-18, 133), 0.5, 1.5)) .fillColor(Color.CYAN) .strokeColor(Color.BLUE) .strokeWidth(5)); }
31. #DevFestHH Carrful with the JavaScript Shape API 1. The JS API needs just an array of WGS84 coordinate-arrays 2. Android is different 1. The first array is always a filled polygon 2. The next ones are also filled polygons until the drawing directions of the polygon changes 3. Then it is a hole until it changes the directions again 4. You need some math for that (scalar) Let‘s Map It!| Hasan Hosgel
32. #DevFestHH Showing Street View Panorama Let‘s Map It!| Hasan Hosgel streetViewPanoramaFragment.getStreetViewPanoramaAsync( new OnStreetViewPanoramaReadyCallback() { @Override public void onStreetViewPanoramaReady(StreetViewPanorama panorama) { panorama.setOnStreetViewPanoramaChangeListener(listener); panorama.setPosition(DFHH); } } });
33. #DevFestHH Showing Street View Panorama Let‘s Map It!| Hasan Hosgel
34. #DevFestHH Styling The Map Let‘s Map It!| Hasan Hosgel @Override public void onMapReady(GoogleMap map) { MapStyleOptions style = MapStyleOptions.loadRawResourceStyle(this, R.raw.mapstyle_night); map.setMapStyle(style); }
35. #DevFestHH Styling The Map Let‘s Map It!| Hasan Hosgel
36. #DevFestHH Styling The Map Let‘s Map It!| Hasan Hosgel
37. #DevFestHH Styling The Map Let‘s Map It!| Hasan Hosgel Source: https://mapstyle.withgoogle.com/
38. #DevFestHH Styling The Map Let‘s Map It!| Hasan Hosgel Source: https://mapstyle.withgoogle.com/
39. #DevFestHH Lite Mode 1. Serving static image 2. A lot of Map features available 3. Partly available: 1. Markers, camera position & events, 4. Not available: 1. Indoor 2. Layer and overlays, gestures & streetview Let‘s Map It!| Hasan Hosgel
40. Source: http://giphy.com/gifs/nintendo-internet-reacts-SFmuVYqfnn4re
41. #DevFestHH Maps Utils 1. This library offers a lot of helpers for Google Maps 2. Add the library to your dependencies 1.compile 'com.google.maps.android:android-maps- utils:0.4+' 3. Use the new features Let‘s Map It!| Hasan Hosgel
42. #DevFestHH Clustering of Markers Let‘s Map It!| Hasan Hosgel @Override public void onMapReady(GoogleMap map) { ClusterManager clusterManager = new ClusterManager<ClusterItem>(context, map); getMap().setOnCameraIdleListener(clusterManager); //read items for (ClusterItem item: items){ clusterManager.addItem(item); } }
43. #DevFestHH Clustering of Markers Let‘s Map It!| Hasan Hosgel
44. #DevFestHH Showing Heatmaps Let‘s Map It!| Hasan Hosgel @Override public void onMapReady(GoogleMap map) { // Create a heat map tile provider, passing it latlngs HeatmapTileProvider provider = new HeatmapTileProvider.Builder() .data(items) .build(); // Add a tile overlay to the map, using the heat map tile provider. TileOverlay overlay = map.addTileOverlay(new TileOverlayOptions().tileProvider(provider)); }
45. #DevFestHH Showing Heatmaps Let‘s Map It!| Hasan Hosgel
46. Source: http://giphy.com/gifs/cute-kpop-secret-EXmJKDuBNNR16
47. Source: http://giphy.com/gifs/description-shown-d23-of402MXFD9Mac
48. Source: http://www.flickr.com/photos/21496790@N06/5065834411/
49. #DevFestHH www.immobilienscout24.de Contact: +HasanHosgel alosdev Thanks for attending! We are Hiring! http://www.immobilienscout24.de/jobs https://speakerdeck.com/alosdev/lets-map-it-devfest-hamburg-2016
50. #DevFestHH Sources • https://developers.google.com/maps/documentation/android-api/start • https://github.com/googlemaps/android-samples • https://developers.google.com/maps/documentation/android-api/utility/ • https://github.com/googlemaps/android-maps-utils Let‘s Map It!| Hasan Hosgel