GoogleMap DroidCon SF 23

Transcript

1. Brian Gardner CashApp GoogleMap() {}
4. Dependencies
5. / / technically incorrect (the best kind) compose - maps = { group = “com.google.maps.android", name = “maps - compose", version = “2.11.4” } play - services - maps = { group = "com.google.android.gms", name = "play - services - maps", version = "18.1.0" }
6. <?xml version="1.0" encoding="utf-8"?> <manifest …> <application …> … / / maps api key <meta - data android:name="com.google.android.geo.API_KEY" android:value="${mapsApiKey}" / > < / application> < / manifest>
7. Essential configuration 1. Map rendering 2. User interaction 3. Location to display
8. Map Rendering
9. public class MapProperties( )
10. public class MapProperties( public val isBuildingEnabled: Boolean = false, )
11. public class MapProperties( public val isBuildingEnabled: Boolean = false, public val isIndoorEnabled: Boolean = false, )
12. public class MapProperties( public val isBuildingEnabled: Boolean = false, public val isIndoorEnabled: Boolean = false, public val isMyLocationEnabled: Boolean = false, )
13. public class MapProperties( public val isBuildingEnabled: Boolean = false, public val isIndoorEnabled: Boolean = false, public val isMyLocationEnabled: Boolean = false, public val isTrafficEnabled: Boolean = false, )
14. public class MapProperties( public val isBuildingEnabled: Boolean = false, public val isIndoorEnabled: Boolean = false, public val isMyLocationEnabled: Boolean = false, public val isTrafficEnabled: Boolean = false, public val latLngBoundsForCameraTarget: LatLngBounds? = null, )
15. public class MapProperties( public val isBuildingEnabled: Boolean = false, public val isIndoorEnabled: Boolean = false, public val isMyLocationEnabled: Boolean = false, public val isTrafficEnabled: Boolean = false, public val latLngBoundsForCameraTarget: LatLngBounds? = null, public val mapStyleOptions: MapStyleOptions? = null, )
16. public class MapProperties( public val isBuildingEnabled: Boolean = false, public val isIndoorEnabled: Boolean = false, public val isMyLocationEnabled: Boolean = false, public val isTrafficEnabled: Boolean = false, public val latLngBoundsForCameraTarget: LatLngBounds? = null, public val mapStyleOptions: MapStyleOptions? = null, public val mapType: MapType = MapType.NORMAL, )
17. public class MapProperties( public val isBuildingEnabled: Boolean = false, public val isIndoorEnabled: Boolean = false, public val isMyLocationEnabled: Boolean = false, public val isTrafficEnabled: Boolean = false, public val latLngBoundsForCameraTarget: LatLngBounds? = null, public val mapStyleOptions: MapStyleOptions? = null, public val mapType: MapType = MapType.NORMAL, public val maxZoomPreference: Float = 21.0f, public val minZoomPreference: Float = 3.0f, )
18. val mapStyleOptions = if (isSystemInDarkTheme()) { MapStyleOptions.loadRawResourceStyle( context, R.raw.night_mode_style ) } else { null }
19. { // https://mapstyle.withgoogle.com/ "featureType": "all", "elementType": "geometry", "stylers": [ { "color": "#242f3e" } ] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [ { "lightness": -80 } ] },
20. val mapProperties by remember(hasLocationPermission) { mutableStateOf( MapProperties( mapStyleOptions = mapStyleOptions, maxZoomPreference = ZOOM_MAX, minZoomPreference = ZOOM_MIN, isMyLocationEnabled = hasLocationPermission, ) ) }
21. User Interaction
22. public class MapUiSettings( )
23. public class MapUiSettings( public val compassEnabled: Boolean = true, )
24. public class MapUiSettings( public val compassEnabled: Boolean = true, public val indoorLevelPickerEnabled: Boolean = true, )
25. public class MapUiSettings( public val compassEnabled: Boolean = true, public val indoorLevelPickerEnabled: Boolean = true, public val mapToolbarEnabled: Boolean = true, )
26. public class MapUiSettings( public val compassEnabled: Boolean = true, public val indoorLevelPickerEnabled: Boolean = true, public val mapToolbarEnabled: Boolean = true, public val myLocationButtonEnabled: Boolean = true, )
27. public class MapUiSettings( public val compassEnabled: Boolean = true, public val indoorLevelPickerEnabled: Boolean = true, public val mapToolbarEnabled: Boolean = true, public val myLocationButtonEnabled: Boolean = true, public val rotationGesturesEnabled: Boolean = true, )
28. public class MapUiSettings( public val compassEnabled: Boolean = true, public val indoorLevelPickerEnabled: Boolean = true, public val mapToolbarEnabled: Boolean = true, public val myLocationButtonEnabled: Boolean = true, public val rotationGesturesEnabled: Boolean = true, public val scrollGesturesEnabled: Boolean = true, )
29. public class MapUiSettings( public val compassEnabled: Boolean = true, public val indoorLevelPickerEnabled: Boolean = true, public val mapToolbarEnabled: Boolean = true, public val myLocationButtonEnabled: Boolean = true, public val rotationGesturesEnabled: Boolean = true, public val scrollGesturesEnabled: Boolean = true, public val scrollGesturesEnabledDuringRotateOrZoom: Boolean = true, )
30. public class MapUiSettings( public val compassEnabled: Boolean = true, public val indoorLevelPickerEnabled: Boolean = true, public val mapToolbarEnabled: Boolean = true, public val myLocationButtonEnabled: Boolean = true, public val rotationGesturesEnabled: Boolean = true, public val scrollGesturesEnabled: Boolean = true, public val scrollGesturesEnabledDuringRotateOrZoom: Boolean = true, public val tiltGesturesEnabled: Boolean = true, )
31. public class MapUiSettings( public val compassEnabled: Boolean = true, public val indoorLevelPickerEnabled: Boolean = true, public val mapToolbarEnabled: Boolean = true, public val myLocationButtonEnabled: Boolean = true, public val rotationGesturesEnabled: Boolean = true, public val scrollGesturesEnabled: Boolean = true, public val scrollGesturesEnabledDuringRotateOrZoom: Boolean = true, public val tiltGesturesEnabled: Boolean = true, public val zoomControlsEnabled: Boolean = true, )
32. public class MapUiSettings( public val compassEnabled: Boolean = true, public val indoorLevelPickerEnabled: Boolean = true, public val mapToolbarEnabled: Boolean = true, public val myLocationButtonEnabled: Boolean = true, public val rotationGesturesEnabled: Boolean = true, public val scrollGesturesEnabled: Boolean = true, public val scrollGesturesEnabledDuringRotateOrZoom: Boolean = true, public val tiltGesturesEnabled: Boolean = true, public val zoomControlsEnabled: Boolean = true, public val zoomGesturesEnabled: Boolean = true, )
33. val mapUiSettings by remember { mutableStateOf( MapUiSettings( indoorLevelPickerEnabled = false, mapToolbarEnabled = false, myLocationButtonEnabled = false, rotationGesturesEnabled = false, tiltGesturesEnabled = false, zoomControlsEnabled = false, ), ) }
34. Location To Display
35. val cameraState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom( LatLng(location.lat, location.lng), location.zoom ) }
36. val cameraState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom( LatLng(location.lat, location.lng), location.zoom ) }
37. val cameraState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom( LatLng(location.lat, location.lng), location.zoom ) }
38. Putting it together
39. GoogleMap( modifier = modifier, cameraPositionState = cameraState, properties = mapProperties, uiSettings = mapUiSettings, ) { }
41. Updating Location
42. LaunchedEffect(location) { cameraState.move( CameraUpdateFactory.newCameraPosition( CameraPosition.fromLatLngZoom( LatLng(location.lat, location.lng), location.zoom ) ), ) }
43. LaunchedEffect(location) { cameraState.move( CameraUpdateFactory.newCameraPosition( CameraPosition.fromLatLngZoom( LatLng(location.lat, location.lng), location.zoom ) ), ) }
44. LaunchedEffect(location) { cameraState.move( CameraUpdateFactory.newCameraPosition( CameraPosition.fromLatLngZoom( LatLng(location.lat, location.lng), location.zoom ) ), ) }
45. LaunchedEffect(location) { cameraState.move( CameraUpdateFactory.newCameraPosition( CameraPosition.fromLatLngZoom( LatLng(location.lat, location.lng), location.zoom ) ), ) }
46. Reacting to new locations
47. LaunchedEffect(cameraState.isMoving) { if (!cameraState.isMoving) { / / notify presenter of new location } }
48. LaunchedEffect(cameraState.isMoving) { if (!cameraState.isMoving) { / / notify presenter of new location onEvent( OnCameraPositionChanged( lat = cameraState.position.target.latitude, lng = cameraState.position.target.longitude, zoom = cameraState.position.zoom ) ) } }
49. Markers
50. GoogleMap(…) { Marker( state = rememberMarkerState( key = location.token, position = LatLng(location.lat, location.lng) ), title = "Cash Money ATM" ) }
51. GoogleMap(…) { Marker( state = rememberMarkerState( key = location.token, position = LatLng(location.lat, location.lng) ), title = "Cash Money ATM" ) }
54. Custom info window
55. MarkerInfoWindow( state = rememberMarkerState( key = location.token, position = LatLng(location.lat, location.lng) ), ) { Surface( modif i er = Modif i er.background(MaterialTheme.colorScheme.background) .padding(8.dp) ) { Column { Text(text = "Cash Money ATM") Text(text = "Withdraw or deposit here!") } } }
56. MarkerInfoWindow( state = rememberMarkerState( key = location.token, position = LatLng(location.lat, location.lng) ), ) { Surface( modif i er = Modif i er.background(MaterialTheme.colorScheme.background) .padding(8.dp) ) { Column { Text(text = "Cash Money ATM") Text(text = "Withdraw or deposit here!") } } }
57. MarkerInfoWindow( state = rememberMarkerState( key = location.token, position = LatLng(location.lat, location.lng) ), ) { Surface( modif i er = Modif i er.background(MaterialTheme.colorScheme.background) .padding(8.dp) ) { Column { Text(text = "Cash Money ATM") Text(text = "Withdraw or deposit here!") } } }
59. Custom marker icon
60. val resources = LocalContext.current.resources val iconBitmapDescriptor = remember { val iconBitmap = ResourcesCompat.getDrawable( resources, R.drawable.icon_marker, null ) ? . toBitmap() ! ! BitmapDescriptorFactory.fromBitmap(iconBitmap) } Marker( state = rememberMarkerState( key = location.token, position = LatLng(location.lat, location.lng) ), icon = iconBitmapDescriptor, )
61. val resources = LocalContext.current.resources val iconBitmapDescriptor = remember { val iconBitmap = ResourcesCompat.getDrawable( resources, R.drawable.icon_marker, null ) ? . toBitmap() ! ! BitmapDescriptorFactory.fromBitmap(iconBitmap) } Marker( state = rememberMarkerState( key = location.token, position = LatLng(location.lat, location.lng) ), icon = iconBitmapDescriptor, )
62. val resources = LocalContext.current.resources val iconBitmapDescriptor = remember { val iconBitmap = ResourcesCompat.getDrawable( resources, R.drawable.icon_marker, null ) ? . toBitmap() ! ! BitmapDescriptorFactory.fromBitmap(iconBitmap) } Marker( state = rememberMarkerState( key = location.token, position = LatLng(location.lat, location.lng) ), icon = iconBitmapDescriptor, )
63. val resources = LocalContext.current.resources val iconBitmapDescriptor = remember { val iconBitmap = ResourcesCompat.getDrawable( resources, R.drawable.icon_marker, null ) ? . toBitmap() ! ! BitmapDescriptorFactory.fromBitmap(iconBitmap) } Marker( state = rememberMarkerState( key = location.token, position = LatLng(location.lat, location.lng) ), icon = iconBitmapDescriptor, )
64. val resources = LocalContext.current.resources val iconBitmapDescriptor = remember { val iconBitmap = ResourcesCompat.getDrawable( resources, R.drawable.icon_marker, null ) ? . toBitmap() ! ! BitmapDescriptorFactory.fromBitmap(iconBitmap) } Marker( state = rememberMarkerState( key = location.token, position = LatLng(location.lat, location.lng) ), icon = iconBitmapDescriptor, )
66. Multiple markers
67. for (marker in markers) { Marker( state = rememberMarkerState( key = marker.token, position = LatLng(marker.lat, marker.lng) ), ) }
70. Clusters
71. Options 1. Can use android-maps-utils library, but need access to GoogleMap instance • MapE ff ect { map: GoogleMap -> } provided in android-maps-utils library 2. Clustering support in maps-compose-util library
72. Don’t use MapEffect 1. Manually creating ClusterManager is a pain 2. Manual ClusterManager overrides Marker composable click handling 3. ClusterManager handles onCameraIdle callback 4. Having multiple types of markers or clusters requires MarkerManager
73. compose - maps - utils = { group = "com.google.maps.android", name = “maps - compose - utils“, version.ref = “2.11.4” }
74. Cluster Item
75. class MapClusterItem( val location: MapLocation ) : ClusterItem { override fun getPosition() = LatLng(location.lat, location.lng) override fun getTitle() = location.title override fun getSnippet() = location.description }
76. class MapClusterItem( val location: MapLocation ) : ClusterItem { override fun getPosition() = LatLng(location.lat, location.lng) override fun getTitle() = location.title override fun getSnippet() = location.description }
77. val clusterItems = remember(markers) { markers.map { MapClusterItem(it) } } GoogleMap(…){ Clustering(items = clusterItems) }
78. val clusterItems = remember(markers) { markers.map { MapClusterItem(it) } } GoogleMap(…){ Clustering(items = clusterItems) }
79. val clusterItems = remember(markers) { markers.map { MapClusterItem(it) } } GoogleMap(…){ Clustering(items = clusterItems) }
80. Before:
81. After:
82. Zoomed in:
83. Custom cluster UI
84. Clustering( items = clusterItems, clusterContent = { cluster - > CustomClusterContent(cluster) }, clusterItemContent = { mapClusterItem - > ClusterItemContent(mapClusterItem) } )
85. Clustering( items = clusterItems, clusterContent = { cluster - > CustomClusterContent(cluster) }, clusterItemContent = { mapClusterItem - > ClusterItemContent(mapClusterItem) } )
86. Clustering( items = clusterItems, clusterContent = { cluster - > CustomClusterContent(cluster) }, clusterItemContent = { mapClusterItem - > ClusterItemContent(mapClusterItem) } )
87. Caution! java.lang.IllegalStateException: Invalid applier Don’t use Marker within Clustering
88. Cluster UI events
89. Clustering( items = clusterItems, onClusterClick = { cluster - > true }, )
90. Clustering( items = clusterItems, onClusterClick = { cluster - > onEvent( OnClusterClicked( cluster.position.latitude, cluster.position.longitude, cluster.items.map { it.location } ) ) true }, )
91. Clustering( items = clusterItems, onClusterClick = { … }, onClusterItemClick = { mapClusterItem - > true }, )
92. Clustering( items = clusterItems, onClusterClick = { … }, onClusterItemClick = { mapClusterItem - > onEvent( OnClusterItemClicked( mapClusterItem.location.token ) ) true }, )
93. Issues
94. Paparazzi testing
95. Paparazzi testing // When in preview, early return a Box with // the received modifier preserving layout if (LocalInspectionMode.current) { Box(modifier = modifier) return }
96. Paparazzi testing paparazzi.snapshot { CompositionLocalProvider( LocalInspectionMode provides true ) { MainMap(…) } }
97. Paparazzi testing paparazzi.snapshot { CompositionLocalProvider( LocalInspectionMode provides true ) { MainMap(…) } }
98. Performance concerns
99. Performance concerns MapsInitializer.initialize( context, MapsInitializer.Renderer.LATEST ) {}
100. ANR Issue
101. Thanks! Brian Gardner CashApp @briangardner@androiddev.social