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
   

   View Slide

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)
   

   View Slide

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
   

   View Slide

4. Source: http://giphy.com/gifs/sad-kawaii-pretty-10XOyCb09KyjLy
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. #DevFestHH
   How to Start (new project)
   Let‘s Map It!| Hasan Hosgel
   

   View Slide

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.android:name="com.google.android.geo.API_KEY"
   android:value=”$API_KEY"/>
   Let‘s Map It!| Hasan Hosgel
   

   View Slide

10. #DevFestHH
    But Wait!
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

11. #DevFestHH
    But Wait!
    1. Currently we are bound to Google Play Services
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. #DevFestHH
    How To Show A Map
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

18. #DevFestHH
    How To Show A Map
    1. Add MapFragment or MapView to your layout
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

19. #DevFestHH
    How To Show A Map
    1. Add MapFragment or MapView to your layout
    2. Implement OnMapReadyCallback
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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"));
    }
    

    View Slide

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)));
    }
    

    View Slide

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.
    

    View Slide

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"));
    }
    

    View Slide

27. #DevFestHH
    Info Window for Marker
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

28. #DevFestHH
    Showing Shapes
    1. Polyline
    2. Circle
    3. Polygon
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

29. #DevFestHH
    Showing Polygons
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

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));
    }
    

    View Slide

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
    

    View Slide

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);
    }
    }
    });
    

    View Slide

33. #DevFestHH
    Showing Street View Panorama
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

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);
    }
    

    View Slide

35. #DevFestHH
    Styling The Map
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

36. #DevFestHH
    Styling The Map
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

37. #DevFestHH
    Styling The Map
    Let‘s Map It!| Hasan Hosgel
    Source: https://mapstyle.withgoogle.com/
    

    View Slide

38. #DevFestHH
    Styling The Map
    Let‘s Map It!| Hasan Hosgel
    Source: https://mapstyle.withgoogle.com/
    

    View Slide

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
    

    View Slide

40. Source: http://giphy.com/gifs/nintendo-internet-reacts-SFmuVYqfnn4re
    

    View Slide

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
    

    View Slide

42. #DevFestHH
    Clustering of Markers
    Let‘s Map It!| Hasan Hosgel
    @Override
    public void onMapReady(GoogleMap map) {
    ClusterManager clusterManager =
    new ClusterManager(context, map);
    getMap().setOnCameraIdleListener(clusterManager);
    //read items
    for (ClusterItem item: items){
    clusterManager.addItem(item);
    }
    }
    

    View Slide

43. #DevFestHH
    Clustering of Markers
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

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));
    }
    

    View Slide

45. #DevFestHH
    Showing Heatmaps
    Let‘s Map It!| Hasan Hosgel
    

    View Slide

46. Source: http://giphy.com/gifs/cute-kpop-secret-EXmJKDuBNNR16
    

    View Slide

47. Source: http://giphy.com/gifs/description-shown-d23-of402MXFD9Mac
    

    View Slide

48. Source: http://www.flickr.com/photos/21496790@N06/5065834411/
    

    View Slide

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
    

    View Slide

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
    

    View Slide