GoogleMap DroidCon SF 23

Brian Gardner CashApp GoogleMap() {}

Dependencies

/ / 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" }

<?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>

Essential configuration 1. Map rendering 2. User interaction 3. Location
to display

Map Rendering

public class MapProperties( )

public class MapProperties( public val isBuildingEnabled: Boolean = false, )

public class MapProperties( public val isBuildingEnabled: Boolean = false, public
val isIndoorEnabled: Boolean = false, )

val isIndoorEnabled: Boolean = false, public val isMyLocationEnabled: Boolean = false, )

val isIndoorEnabled: Boolean = false, public val isMyLocationEnabled: Boolean = false, public val isTrafficEnabled: Boolean = false, )

val isIndoorEnabled: Boolean = false, public val isMyLocationEnabled: Boolean = false, public val isTrafficEnabled: Boolean = false, public val latLngBoundsForCameraTarget: LatLngBounds? = null, )

val isIndoorEnabled: Boolean = false, public val isMyLocationEnabled: Boolean = false, public val isTrafficEnabled: Boolean = false, public val latLngBoundsForCameraTarget: LatLngBounds? = null, public val mapStyleOptions: MapStyleOptions? = null, )

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, )

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, )

val mapStyleOptions = if (isSystemInDarkTheme()) { MapStyleOptions.loadRawResourceStyle( context, R.raw.night_mode_style )
} else { null }

{ // https://mapstyle.withgoogle.com/ "featureType": "all", "elementType": "geometry", "stylers": [ {
"color": "#242f3e" } ] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [ { "lightness": -80 } ] },

val mapProperties by remember(hasLocationPermission) { mutableStateOf( MapProperties( mapStyleOptions = mapStyleOptions,
maxZoomPreference = ZOOM_MAX, minZoomPreference = ZOOM_MIN, isMyLocationEnabled = hasLocationPermission, ) ) }

User Interaction

public class MapUiSettings( )

public class MapUiSettings( public val compassEnabled: Boolean = true, )

public class MapUiSettings( public val compassEnabled: Boolean = true, public
val indoorLevelPickerEnabled: Boolean = true, )

val indoorLevelPickerEnabled: Boolean = true, public val mapToolbarEnabled: Boolean = true, )

val indoorLevelPickerEnabled: Boolean = true, public val mapToolbarEnabled: Boolean = true, public val myLocationButtonEnabled: Boolean = true, )

val indoorLevelPickerEnabled: Boolean = true, public val mapToolbarEnabled: Boolean = true, public val myLocationButtonEnabled: Boolean = true, public val rotationGesturesEnabled: Boolean = true, )

val indoorLevelPickerEnabled: Boolean = true, public val mapToolbarEnabled: Boolean = true, public val myLocationButtonEnabled: Boolean = true, public val rotationGesturesEnabled: Boolean = true, public val scrollGesturesEnabled: Boolean = true, )

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, )

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, )

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, )

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, )

val mapUiSettings by remember { mutableStateOf( MapUiSettings( indoorLevelPickerEnabled = false,
mapToolbarEnabled = false, myLocationButtonEnabled = false, rotationGesturesEnabled = false, tiltGesturesEnabled = false, zoomControlsEnabled = false, ), ) }

Location To Display

val cameraState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom( LatLng(location.lat, location.lng),
location.zoom ) }

Putting it together

GoogleMap( modifier = modifier, cameraPositionState = cameraState, properties = mapProperties,
uiSettings = mapUiSettings, ) { }

Updating Location

LaunchedEffect(location) { cameraState.move( CameraUpdateFactory.newCameraPosition( CameraPosition.fromLatLngZoom( LatLng(location.lat, location.lng), location.zoom ) ),
) }

Reacting to new locations

LaunchedEffect(cameraState.isMoving) { if (!cameraState.isMoving) { / / notify presenter of
new location } }

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

Markers

GoogleMap(…) { Marker( state = rememberMarkerState( key = location.token, position
= LatLng(location.lat, location.lng) ), title = "Cash Money ATM" ) }

Custom info window

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

Custom marker icon

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, )

Multiple markers

for (marker in markers) { Marker( state = rememberMarkerState( key
= marker.token, position = LatLng(marker.lat, marker.lng) ), ) }

Clusters

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

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

compose - maps - utils = { group = "com.google.maps.android",
name = “maps - compose - utils“, version.ref = “2.11.4” }

Cluster Item

class MapClusterItem( val location: MapLocation ) : ClusterItem { override
fun getPosition() = LatLng(location.lat, location.lng) override fun getTitle() = location.title override fun getSnippet() = location.description }

val clusterItems = remember(markers) { markers.map { MapClusterItem(it) } }
GoogleMap(…){ Clustering(items = clusterItems) }

Before:

After:

Zoomed in:

Custom cluster UI

Clustering( items = clusterItems, clusterContent = { cluster - >
CustomClusterContent(cluster) }, clusterItemContent = { mapClusterItem - > ClusterItemContent(mapClusterItem) } )

Caution! java.lang.IllegalStateException: Invalid applier Don’t use Marker within Clustering

Cluster UI events

Clustering( items = clusterItems, onClusterClick = { cluster - >
true }, )

Clustering( items = clusterItems, onClusterClick = { cluster - >
onEvent( OnClusterClicked( cluster.position.latitude, cluster.position.longitude, cluster.items.map { it.location } ) ) true }, )

Clustering( items = clusterItems, onClusterClick = { … }, onClusterItemClick
= { mapClusterItem - > true }, )

Clustering( items = clusterItems, onClusterClick = { … }, onClusterItemClick
= { mapClusterItem - > onEvent( OnClusterItemClicked( mapClusterItem.location.token ) ) true }, )

Issues

Paparazzi testing

Paparazzi testing // When in preview, early return a Box
with // the received modifier preserving layout if (LocalInspectionMode.current) { Box(modifier = modifier) return }

Paparazzi testing paparazzi.snapshot { CompositionLocalProvider( LocalInspectionMode provides true ) {
MainMap(…) } }

Performance concerns

Performance concerns MapsInitializer.initialize( context, MapsInitializer.Renderer.LATEST ) {}

ANR Issue

Thanks! Brian Gardner CashApp @[email protected]

GoogleMap DroidCon SF 23

GoogleMap DroidCon SF 23

More Decks by Brian Gardner

Other Decks in Programming

Featured

Transcript