Using Google Maps with Jetpack Compose

Slides for Droidcon Lisbon talk

Transcript

1. Google Map © Luca Nicoletti 2024 Drawing on it with Jetpack Compose
2. Luca Nicoletti Luca Nicoletti @luca_nicolett
3. Google Map © Luca Nicoletti 2024 Drawing on it with Jetpack Compose
5. Libraries Android Map Compose • GoogleMap • Control and con f iguration • Drawing • Markers & Marker Windows • Circles • Polygons/Polylines • Overlays Maps Compose Utility Library • Clustering
6. Additional one Maps Compose Widgets • ScaleBar • DisappearingScaleBar
7. Getting starter @Composable public fun GoogleMap( mergeDescendants: Boolean = false, modifier: Modifier = Modifier, cameraPositionState: CameraPositionState = rememberCameraPositionState(), contentDescription: String? = null, googleMapOptionsFactory: () -> GoogleMapOptions = { GoogleMapOptions() }, properties: MapProperties = DefaultMapProperties, locationSource: LocationSource? = null, uiSettings: MapUiSettings = DefaultMapUiSettings, indoorStateChangeListener: IndoorStateChangeListener = DefaultIndoorStateChangeListener, onMapClick: ((LatLng) -> Unit)? = null, onMapLongClick: ((LatLng) -> Unit)? = null, onMapLoaded: (() -> Unit)? = null, onMyLocationButtonClick: (() -> Boolean)? = null, onMyLocationClick: ((Location) -> Unit)? = null, onPOIClick: ((PointOfInterest) -> Unit)? = null, contentPadding: PaddingValues = NoPadding, mapColorScheme: ComposeMapColorScheme? = null, content: (@Composable @GoogleMapComposable () -> Unit)? = null, )
8. Getting starter @Composable public fun GoogleMap( mergeDescendants: Boolean = false, modifier: Modifier = Modifier, cameraPositionState: CameraPositionState = rememberCameraPositionState(), contentDescription: String? = null, googleMapOptionsFactory: () -> GoogleMapOptions = { GoogleMapOptions() }, properties: MapProperties = DefaultMapProperties, locationSource: LocationSource? = null, uiSettings: MapUiSettings = DefaultMapUiSettings, indoorStateChangeListener: IndoorStateChangeListener = DefaultIndoorStateChangeListener, onMapClick: ((LatLng) -> Unit)? = null, onMapLongClick: ((LatLng) -> Unit)? = null, onMapLoaded: (() -> Unit)? = null, onMyLocationButtonClick: (() -> Boolean)? = null, onMyLocationClick: ((Location) -> Unit)? = null, onPOIClick: ((PointOfInterest) -> Unit)? = null, contentPadding: PaddingValues = NoPadding, content: (@Composable @GoogleMapComposable () -> Unit)? = null, )
9. Getting starter @Composable public fun GoogleMap( mergeDescendants: Boolean = false, modifier: Modifier = Modifier, cameraPositionState: CameraPositionState = rememberCameraPositionState(), contentDescription: String? = null, googleMapOptionsFactory: () -> GoogleMapOptions = { GoogleMapOptions() }, properties: MapProperties = DefaultMapProperties, locationSource: LocationSource? = null, uiSettings: MapUiSettings = DefaultMapUiSettings, indoorStateChangeListener: IndoorStateChangeListener = DefaultIndoorStateChangeListener, onMapClick: ((LatLng) -> Unit)? = null, onMapLongClick: ((LatLng) -> Unit)? = null, onMapLoaded: (() -> Unit)? = null, onMyLocationButtonClick: (() -> Boolean)? = null, onMyLocationClick: ((Location) -> Unit)? = null, onPOIClick: ((PointOfInterest) -> Unit)? = null, contentPadding: PaddingValues = NoPadding, content: (@Composable @GoogleMapComposable () -> Unit)? = null, )
10. Getting starter 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, )
11. Getting starter 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, )
12. Styling Wizard https://mapstyle.withgoogle.com/
13. MapStyleOptions What can be customised • Administrative • Country • Province • Locality • Neighbourhood • Land parcel • Landscape • Human-made • Natural • Landcover • Terrain • Points of interest • Attraction • Business • Government • Medical • Park • Place of worship • School • Sports Complex • Road • Highway • Controlled access • Arterial • Local • Transit • Line • Station • Airport • Bus • Rail • Water
14. MapStyleOptions • Geometry • Fill • Stroke • Labels • Text • Text f ill • Text outline • Icon
15. Getting starter mapStyleOptions = MapStyleOptions.loadRawResourceStyle( LocalContext.current, R.raw.map_style )
16. Getting starter GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState, googleMapOptionsFactory = { GoogleMapOptions().mapId(“MyMapId") } )
17. Getting starter 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, )
18. Getting starter 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, )
19. Getting starter 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, )
20. Getting starter 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, )
21. Getting starter 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, )
22. Getting starter public enum class ComposeMapColorScheme(public val value: Int) { LIGHT(MapColorScheme.LIGHT), DARK(MapColorScheme.DARK), FOLLOW_SYSTEM(MapColorScheme.FOLLOW_SYSTEM); }
23. Markers © Luca Nicoletti 2024 And Clusters
24. Marker
25. Markers • Standard icon • Different hues • Custom icon • Custom info window
26. Marker @Composable @GoogleMapComposable public fun Marker( contentDescription: String? = "", state: MarkerState = rememberMarkerState(), alpha: Float = 1.0f, anchor: Offset = Offset(0.5f, 1.0f), draggable: Boolean = false, flat: Boolean = false, icon: BitmapDescriptor? = null, infoWindowAnchor: Offset = Offset(0.5f, 0.0f), rotation: Float = 0.0f, snippet: String? = null, tag: Any? = null, title: String? = null, visible: Boolean = true, zIndex: Float = 0.0f, onClick: (Marker) -> Boolean = { false }, onInfoWindowClick: (Marker) -> Unit = {}, onInfoWindowClose: (Marker) -> Unit = {}, onInfoWindowLongClick: (Marker) -> Unit = {}, )
27. Marker Marker( icon = BitmapDescriptorFactory .defaultMarker(HUE) ) Default Marker - HUE variations
28. Marker public static final float HUE_RED = 0.0F; public static final float HUE_ORANGE = 30.0F; public static final float HUE_YELLOW = 60.0F; public static final float HUE_GREEN = 120.0F; public static final float HUE_CYAN = 180.0F; public static final float HUE_AZURE = 210.0F; public static final float HUE_BLUE = 240.0F; public static final float HUE_VIOLET = 270.0F; public static final float HUE_MAGENTA = 300.0F; public static final float HUE_ROSE = 330.0F; Default Marker - HUE variations
29. Marker
30. Marker @Composable @GoogleMapComposable public fun Marker( contentDescription: String? = "", state: MarkerState = rememberMarkerState(), alpha: Float = 1.0f, anchor: Offset = Offset(0.5f, 1.0f), draggable: Boolean = false, flat: Boolean = false, icon: BitmapDescriptor? = null, infoWindowAnchor: Offset = Offset(0.5f, 0.0f), rotation: Float = 0.0f, snippet: String? = null, tag: Any? = null, title: String? = null, visible: Boolean = true, zIndex: Float = 0.0f, onClick: (Marker) -> Boolean = { false }, onInfoWindowClick: (Marker) -> Unit = {}, onInfoWindowClose: (Marker) -> Unit = {}, onInfoWindowLongClick: (Marker) -> Unit = {}, )
31. Marker private fun bitmapDescriptor( context: Context, vectorResId: Int ): BitmapDescriptor? { val drawable = ContextCompat.getDrawable(context, vectorResId) ?: return null drawable.setBounds(0, 0, drawable.intrinsicWidth, drawable.intrinsicHeight) val bm = Bitmap.createBitmap( /* width = */ drawable.intrinsicWidth, /* height = */ drawable.intrinsicHeight, /* config = */ Bitmap.Config.ARGB_8888 ) // draw it onto the bitmap val canvas = android.graphics.Canvas(bm) drawable.draw(canvas) return BitmapDescriptorFactory.fromBitmap(bm) }
32. Marker @Composable fun MapMarker( position: LatLng, @DrawableRes iconResourceId: Int ) { val context = LocalContext.current val icon = remember { bitmapDescriptor(context, iconResourceId) } Marker( state = MarkerState(position = position), icon = icon, anchor = Offset(HALF_OFFSET, HALF_OFFSET) ) } private const val HALF_OFFSET = 0.5f
33. Marker
34. Marker Info Window @Composable @GoogleMapComposable public fun MarkerInfoWindow( state: MarkerState = rememberMarkerState(), alpha: Float = 1.0f, anchor: Offset = Offset(0.5f, 1.0f), draggable: Boolean = false, flat: Boolean = false, icon: BitmapDescriptor? = null, infoWindowAnchor: Offset = Offset(0.5f, 0.0f), rotation: Float = 0.0f, snippet: String? = null, tag: Any? = null, title: String? = null, visible: Boolean = true, zIndex: Float = 0.0f, onClick: (Marker) -> Boolean = { false }, onInfoWindowClick: (Marker) -> Unit = {}, onInfoWindowClose: (Marker) -> Unit = {}, onInfoWindowLongClick: (Marker) -> Unit = {}, content: (@Composable (Marker) -> Unit)? = null )
35. Marker Info Window MarkerInfoWindowContent( state = MarkerState(position = data.location), title = data.title, snippet = data.description, ) { Column( horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxWidth().padding(32.dp) ) { Text( modifier = Modifier.padding(top = 6.dp), text = data.title, fontWeight = FontWeight.Bold, color = Color.Black, ) data.description?.let { desc -> Text(desc) } data.imageResourceId?.let { res -> Image( modifier = Modifier.padding(top = 6.dp).size(240.dp), painter = painterResource(id = res), contentDescription = data.description ) } } }
36. Marker Info Window
37. Clusters • Group markers by distance • Tap handler(s) • Full control of the graphics
38. Cluster Item public interface ClusterItem { /** * The position of this marker. This must always return the same value. */ @NonNull LatLng getPosition(); /** * The title of this marker. */ @Nullable String getTitle(); /** * The description of this marker. */ @Nullable String getSnippet(); /** * The z-index of this marker. */ @Nullable Float getZIndex(); }
39. Cluster Item data class MarkerData( val location: LatLng, val name: String, val description: String?, ) : ClusterItem { override fun getPosition(): LatLng = location override fun getTitle(): String? = name override fun getSnippet(): String? = description override fun getZIndex(): Float? = 1f }
40. Clustering @Composable @GoogleMapComposable @MapsComposeExperimentalApi public fun <T : ClusterItem> Clustering( items: Collection<T>, onClusterClick: (Cluster<T>) -> Boolean = { false }, onClusterItemClick: (T) -> Boolean = { false }, onClusterItemInfoWindowClick: (T) -> Unit = { }, onClusterItemInfoWindowLongClick: (T) -> Unit = { }, clusterContent: @[UiComposable Composable] ((Cluster<T>) -> Unit)? = null, clusterItemContent: @[UiComposable Composable] ((T) -> Unit)? = null, )
41. Clustering
42. Clustering
43. Clustering Clustering( items = markersData, clusterItemContent = { markerData -> val state = rememberMarkerState(position = markerData.position) Marker(state = state) }, )
44. Clustering java.lang.IllegalStateException: Invalid applier at androidx.compose.runtime.ComposablesKt.invalidApplier(Composables.kt:472) at com.google.maps.android.compose.MarkerKt.MarkerImpl-khPtz74(Marker.kt:728) at com.google.maps.android.compose.MarkerKt.Marker-qld6geY(Marker.kt:178)
45. Clustering @Composable @GoogleMapComposable @MapsComposeExperimentalApi public fun <T : ClusterItem> Clustering( items: Collection<T>, onClusterClick: (Cluster<T>) -> Boolean = { false }, onClusterItemClick: (T) -> Boolean = { false }, onClusterItemInfoWindowClick: (T) -> Unit = { }, onClusterItemInfoWindowLongClick: (T) -> Unit = { }, clusterContent: @[UiComposable Composable] ((Cluster<T>) -> Unit)? = null, clusterItemContent: @[UiComposable Composable] ((T) -> Unit)? = null, )
46. Clustering @Composable @GoogleMapComposable public fun Marker( […]
 )
47. Clustering @Composable @GoogleMapComposable @MapsComposeExperimentalApi public fun <T : ClusterItem> Clustering( items: Collection<T>, clusterManager: ClusterManager<T>, )
48. Clustering @OptIn(MapsComposeExperimentalApi::class) @Composable private fun <T : ClusterItem> rememberClusterManager( clusterContent: @Composable ((Cluster<T>) -> Unit)?, clusterItemContent: @Composable ((T) -> Unit)?, clusterRenderer: ClusterRenderer<T>? = null, )
49. Clustering @Composable @GoogleMapComposable @MapsComposeExperimentalApi public fun <T : ClusterItem> rememberClusterRenderer( clusterContent: @Composable ((Cluster<T>) -> Unit)?, clusterItemContent: @Composable ((T) -> Unit)?, clusterManager: ClusterManager<T>?, )
50. Clustering GoogleMap() {
 val clusterManager = rememberClusterManager<MarkerData>() clusterManager?.let { manager -> val renderer = rememberClusterRenderer( clusterContent = { IconAsClusterContent(it) }, clusterItemContent = { IconAsClusterContentItem(it) }, clusterManager = manager, )
 Clustering( items = positions.map { ClusterItemImpl(it) }, clusterManager = manager, ) }
 }
51. Clustering GoogleMap() {
 val clusterManager = rememberClusterManager<MarkerData>() clusterManager?.let { manager -> val renderer = rememberClusterRenderer( clusterContent = { IconAsClusterContent(it) }, clusterItemContent = { IconAsClusterContentItem(it) }, clusterManager = manager, )
 SideEffect { if (manager.renderer != renderer) { manager.renderer = renderer ?: return@SideEffect } }
 Clustering( items = positions.map { ClusterItemImpl(it) }, clusterManager = manager, ) }
 }
52. Clustering val nonHierarchicalViewBasedAlgorithm = NonHierarchicalViewBasedAlgorithm<ClusterItemImpl>( screenWidth.value.toInt(), screenHeight.value.toInt() )
 val distanceBasedAlgorithm = NonHierarchicalDistanceBasedAlgorithm<ClusterItemImpl>()
 .apply { setMaxDistanceBetweenClusteredItems(150) } manager.algorithm = distanceBasedAlgorithm
53. Clustering
54. Shapes © Luca Nicoletti 2024
55. Circles @Composable @GoogleMapComposable public fun Circle( center: LatLng, clickable: Boolean = false, fillColor: Color = Color.Transparent, radius: Double = 0.0, strokeColor: Color = Color.Black, strokePattern: List<PatternItem>? = null, strokeWidth: Float = 10f, tag: Any? = null, visible: Boolean = true, zIndex: Float = 0f, onClick: (Circle) -> Unit = {}, )
56. Circles @Composable @GoogleMapComposable public fun Circle( center: LatLng, clickable: Boolean = false, fillColor: Color = Color.Transparent, radius: Double = 0.0, strokeColor: Color = Color.Black, strokePattern: List<PatternItem>? = null, strokeWidth: Float = 10f, tag: Any? = null, visible: Boolean = true, zIndex: Float = 0f, onClick: (Circle) -> Unit = {}, )
57. Circles @Composable @GoogleMapComposable public fun Circle( center: LatLng, clickable: Boolean = false, fillColor: Color = Color.Transparent, radius: Double = 0.0, strokeColor: Color = Color.Black, strokePattern: List<PatternItem>? = null, strokeWidth: Float = 10f, tag: Any? = null, visible: Boolean = true, zIndex: Float = 0f, onClick: (Circle) -> Unit = {}, )
58. Circles https://github.com/googlemaps/android-maps-compose/issues/531
59. Circles
60. Circles Circle( center = LatLng(51.510949, -0.086413), fillColor = Color.Red, radius = 250.0, strokeColor = Color.Blue, strokeWidth = 25f, strokePattern = listOf(Dash(200f), Gap(1f), Dot(), Gap(1f)), )
61. Circles
62. Circles Circle( center = LatLng(51.510949, -0.086413), fillColor = Color.Blue.copy(alpha = 0.5f), radius = 250.0, strokeColor = Color.Transparent, strokeWidth = 0f, )
63. Circles
64. Polygons @Composable @GoogleMapComposable public fun Polygon( points: List<LatLng>, clickable: Boolean = false, fillColor: Color = Color.Black, geodesic: Boolean = false, holes: List<List<LatLng>> = emptyList(), strokeColor: Color = Color.Black, strokeJointType: Int = JointType.DEFAULT, strokePattern: List<PatternItem>? = null, strokeWidth: Float = 10f, tag: Any? = null, visible: Boolean = true, zIndex: Float = 0f, onClick: (Polygon) -> Unit = {} )
65. Polygons private val pins = listOf( LatLng(51.51223, -0.08317), LatLng(51.517619, -0.082958), LatLng(51.525481, -0.087196), LatLng(51.510949, -0.086413), ) Polygon(points = pins)
66. Polygons
67. Polygons private val pins = listOf( LatLng(51.51223, -0.08317), LatLng(51.517619, -0.082958), LatLng(51.525481, -0.087196), LatLng(51.510949, -0.086413), ) Polygon( points = pins, fillColor = Color.Cyan, strokeWidth = 3f, )
68. Polygons
69. Polygons Polygon( points = pins, fillColor = Color.Cyan, strokeWidth = 15f, strokeColor = Color.Gray, strokePattern = listOf(Dash(50f), Gap(15f), Dot(), Gap(15f)) )
70. Polygons
71. Polygons Polygon( points = pins, fillColor = Color.Cyan.copy(alpha = 0.4f), strokeWidth = 15f, strokeColor = Color.Gray, strokePattern = listOf(Dash(50f), Gap(15f), Dot(), Gap(15f)) )
72. Polygons
73. Polygons Polygon( points = outerPins, fillColor = Color.Cyan.copy(alpha = 0.4f), strokeWidth = 15f, strokeColor = Color.Gray, strokePattern = listOf(Dash(50f), Gap(15f), Dot(), Gap(15f)), holes = listOf(pins) )
74. Polygons
75. Polygons Polygon( points = outerPins, fillColor = Color.Cyan.copy(alpha = 0.4f), strokeWidth = 15f, strokeColor = Color.Gray, strokePattern = listOf(Dash(50f), Gap(15f), Dot(), Gap(15f)), holes = listOf(pins, pins1) )
76. Polygons
77. Polygons
78. Polylines @Composable @GoogleMapComposable public fun Polyline( points: List<LatLng>, clickable: Boolean = false, color: Color = Color.Black, endCap: Cap = ButtCap(), geodesic: Boolean = false, jointType: Int = JointType.DEFAULT, pattern: List<PatternItem>? = null, startCap: Cap = ButtCap(), tag: Any? = null, visible: Boolean = true, width: Float = 10f, zIndex: Float = 0f, onClick: (Polyline) -> Unit = {} )
79. Polylines Polyline(points = outerPins)
80. Polylines
81. Polylines Polyline( points = outerPins, color = Color.Magenta, startCap = RoundCap(), endCap = SquareCap(), pattern = listOf(Dash(20f), Gap(20f)), )
82. Polylines
83. Polylines
84. Polylines Polyline( points = markersData.map { it.position }, spans = listOf( StyleSpan(Color.Red.toArgb()), StyleSpan(Color.Blue.toArgb()) ) )
85. Polylines
86. Polylines Polyline( points = markersData.map { it.position }, spans = listOf( StyleSpan( StrokeStyle.gradientBuilder( Color.Red.toArgb(), Color.Yellow.toArgb(), ).build() ) ), width = 15f, endCap = RoundCap(), startCap = RoundCap(), )
87. Polylines
88. Overlays © Luca Nicoletti 2024
89. GroundOverlay @Composable @GoogleMapComposable public fun GroundOverlay( position: GroundOverlayPosition, image: BitmapDescriptor, anchor: Offset = Offset(0.5f, 0.5f), bearing: Float = 0f, clickable: Boolean = false, tag: Any? = null, transparency: Float = 0f, visible: Boolean = true, zIndex: Float = 0f, onClick: (GroundOverlay) -> Unit = {}, )
90. GroundOverlay public fun create(latLngBounds: LatLngBounds) : GroundOverlayPosition { return GroundOverlayPosition(latLngBounds = latLngBounds) } public fun create(location: LatLng, width: Float, height: Float? = null) : 
 GroundOverlayPosition { return GroundOverlayPosition( location = location, width = width, height = height )
 }
91. GroundOverlay @Composable fun GroundOverlayUnderground() { val context = LocalContext.current GroundOverlay( position = GroundOverlayPosition.create( latLngBounds = LatLngBounds( /* southwest = */ LatLng(51.493684, -0.224643), /* northeast = */ LatLng(51.527323, -0.056233), ) ), anchor = Offset.Zero, image = drawableToBitmapDescriptor( context, R.drawable.overlay1 ), transparency = 0.5f, ) }
92. GroundOverlay fun drawableToBitmapDescriptor(context: Context, drawableId: Int): BitmapDescriptor { val drawableResource: Drawable? = ContextCompat.getDrawable(context, drawableId) drawableResource?.let { drawable -> val width = drawable.intrinsicWidth val height = drawable.intrinsicHeight val bitmap: Bitmap = Bitmap.createBitmap( width, height, Bitmap.Config.ARGB_8888 ) val canvas = Canvas(bitmap) drawable.setBounds(0, 0, canvas.width, canvas.height) drawable.draw(canvas) canvas.scale(15f, 15f) return BitmapDescriptorFactory.fromBitmap(bitmap) } ?: run { throw IllegalArgumentException("Drawable not found") } }
93. GroundOverlay
94. TileOverlay @Composable @GoogleMapComposable public fun TileOverlay( tileProvider: TileProvider, state: TileOverlayState = rememberTileOverlayState(), fadeIn: Boolean = true, transparency: Float = 0f, visible: Boolean = true, zIndex: Float = 0f, onClick: (TileOverlay) -> Unit = {}, )
95. TileOverlay public interface TileProvider { @NonNull Tile NO_TILE = new Tile(-1, -1, (byte[])null); @Nullable Tile getTile(int var1, int var2, int var3); }
96. Tiles
97. Tiles • The map is not loaded entirely • Divided into squares • (Possibly) different details level at each zoom • Web Mercator projection
98. TileOverlay class CoordTileProvider(context: Context) : TileProvider { private val scaleFactor: Float = context.resources.displayMetrics.density * 0.6f private val borderTile: Bitmap companion object { private const val TILE_SIZE_DP = 256 } init { val borderPaint = Paint(Paint.ANTI_ALIAS_FLAG) borderPaint.style = Paint.Style.STROKE borderTile = Bitmap.createBitmap( (TILE_SIZE_DP * scaleFactor).toInt(), (TILE_SIZE_DP * scaleFactor).toInt(), Bitmap.Config.ARGB_8888 ) val canvas = Canvas(borderTile) canvas.drawRect( 0f, 0f, TILE_SIZE_DP * scaleFactor, TILE_SIZE_DP * scaleFactor, borderPaint ) } }
99. TileOverlay override fun getTile(x: Int, y: Int, zoom: Int): Tile { val coordTile = drawTileCoords(x, y, zoom) val stream = ByteArrayOutputStream() coordTile!!.compress(Bitmap.CompressFormat.PNG, 0, stream) val bitmapData = stream.toByteArray() return Tile( (TILE_SIZE_DP * scaleFactor).toInt(), (TILE_SIZE_DP * scaleFactor).toInt(), bitmapData ) }
100. TileOverlay private fun drawTileCoords(x: Int, y: Int, zoom: Int): Bitmap? { var copy: Bitmap? synchronized(borderTile) { 
 copy = borderTile.copy(Bitmap.Config.ARGB_8888, true) 
 } val canvas = Canvas(copy!!) val tileCoords = "($x, $y)" val zoomLevel = "zoom = $zoom" val mTextPaint = Paint(Paint.ANTI_ALIAS_FLAG) mTextPaint.color = Color.Blue.toArgb() mTextPaint.textAlign = Paint.Align.CENTER mTextPaint.textSize = 18 * scaleFactor canvas.drawText( tileCoords, TILE_SIZE_DP * scaleFactor / 2, TILE_SIZE_DP * scaleFactor / 2, mTextPaint ) canvas.drawText( zoomLevel, TILE_SIZE_DP * scaleFactor / 2, TILE_SIZE_DP * scaleFactor * 2 / 3, mTextPaint ) return copy }
101. TileOverlay
102. TileOverlay class MapTileProvider(tileSize: Int) : UrlTileProvider(tileSize, tileSize) { private val urlTemplate = "https://" + BuildConfig.TILE_WEB_URL + "/%d/%d/%d.jpg?key=" + BuildConfig.TILE_API_KEY override fun getTileUrl(x: Int, y: Int, zoom: Int): URL = URL(urlTemplate.format(zoom, x, y)) }
103. Tiles • The tile at (0,0) is at the northwest corner of the map • At zoom level 0, the entire world is rendered in a single tile • At zoom level 1 the map will be rendered as a 2x2 grid of tiles • # tiles = (2 ^ zoom level) x (2 ^ zoom level)
104. URLTileOverlay Using a service • https://www.strasis.com/documentation/limelight-xe/reference/tile-map- servers • https://www.maptiler.com/
105. TileOverlay
106. Multiple things GoogleMap(){ Circle([…]) Polyline([…]) Polygon([…]) GroundOverlay([…]) TileOverlay([…]) […] }
107. Multiple things
108. Questions?
109. Thanks! Luca Nicoletti @luca_nicolett