Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's Map It! DevFest Hamburg 2016

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.

Hasan Hosgel

October 15, 2016
Tweet

More Decks by Hasan Hosgel

Other Decks in Technology

Transcript

  1. #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)
  2. #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
  3. #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
  4. #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
  5. #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
  6. #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
  7. #DevFestHH But Wait! 1. Currently we are bound to Google

    Play Services Let‘s Map It!| Hasan Hosgel
  8. #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
  9. #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
  10. #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
  11. #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
  12. #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
  13. #DevFestHH How To Show A Map 1. Add MapFragment or

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

    MapView to your layout 2. Implement OnMapReadyCallback Let‘s Map It!| Hasan Hosgel
  15. #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
  16. #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
  17. #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
  18. #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")); }
  19. #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))); }
  20. #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.
  21. #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")); }
  22. #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)); }
  23. #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
  24. #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); } } });
  25. #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); }
  26. #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
  27. #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
  28. #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); } }
  29. #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)); }
  30. #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