Written by 
In a few recent projects, I’ve needed to utilise Google Maps within environments utilising Jetpack Compose. In the early days of Compose this felt light a sought-after piece of functionality – even though it is still being built on, it now seems to be in a place where I can confidently use it. In this series of blog posts, I’ll share how we can use the different parts of the Compose mapping package.
Now that we have the basics down from a previous post, we’re going to dive into the Polygon composable and learn how we can draw coordinate-based shapes on our map.
Looking to learn more Jetpack Compose? The video course for Practical Jetpack Compose is now available 🚀
The Polygon Composable
In the previous post we looked at the Polyline composable, which is used to draw lines and indicate contextual information on maps. When it comes to the Polygon composable, we can use this to display information on how areas are connected within a map. The Polygon is a simple composable, taking a list of LatLng instance and drawing a line to connect the coordinates within a shaped area. It’s important to note the @GoogleMapComposable annotation – we covered in the previous post that the GoogleMap composable only supports children using this annotation.
@Composable
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 = 10.0f,
tag: Any? = null,
visible: Boolean = true,
zIndex: Float = 0.0f,
onClick: (Polygon) -> Unit = {}
)As we can see from this composable, there is a collection of arguments that allow us to customise our Polygon. To start with, there is the required points argument – this must be provided so that a shape can be drawn around the provided coordinates. To be able to satisfy this argument, let’s start by defining a collection of LatLng references.
val areaCoordinates = listOf(
LatLng(53.3811, -1.4701),
LatLng(52.5868, -2.5257),
LatLng(51.8994, -2.0783),
LatLng(51.4551, -0.9787)
)With this in place, we can go ahead and compose a Polygon inside of our GoogleMap instance.
Polygon(
points = routeCoordinates
)With this in place, we’ll now be able to see a Polygon displayed on our map. Using the provided coordinates, a shape is being drawn to connect these four different points.
By default, the strokeColor argument of the Polygon will default to Black when not provided. For the current theme of our map, this isn’t very visible. To improve things here, we’ll go ahead and override this color.
Polygon(
points = areaCoordinates,
strokeColor = Color.White
)With this in place, we can now see that our line has greater visibility on our map.
If we wish to increase this visibility further, we can utilise the strokeWidth argument to increase the width use when drawing the stroke around this shape. In some cases where there is a lot of information or existing drawing details on a map, a thicker line can help to increase the visibility of the shape bounds.
Polygon(
points = areaCoordinates,
strokeColor = Color.White,
strokeWidth = 15f
)
Alongside this, we also have the ability to create empty spaces within our shape, which allows us to bring focus onto specific areas of the map. For this, the holes argument is used which takes a list of LatLng collections, which will be represented as empty spaces within the shape. For example, we can pass in a reference to our areaCoordinates collection.
Polygon(
points = areaCoordinates,
strokeColor = Color.White,
strokeWidth = 15f,
holes = listOf(areaCoordinates)
)Here we can see how our shape no appears completely empty other than the stroke used to outline it.
In some cases, the default drawing style of the stroke may not match our requirements. When it comes to how this line is represented on our map, we can use the pattern argument to define how the line is to be drawn. This is done by providing a list of PatternItem instances – so for example, we can draw a dashed line by using the following code:
Polygon(
points = areaCoordinates,
strokeColor = Color.White,
strokeWidth = 15f,
holes = listOf(areaCoordinates),
strokePattern = listOf(
Dash(15f),
Gap(15f)
)
)Now that we have this pattern defined, we can see the pattern being applied when drawing the Polygon on our map. When connecting the bounds of the shape on a map, differently styled lines can help to portray different information such as availability or preference.
While we previously had a block of colour to fill our shape, we might want something that is inbetween this empty space and the default black fill. We can use the fillColor argument to provide a color to be used for filling the shape.
Polygon(
points = areaCoordinates,
strokeColor = Color.White,
strokeWidth = 15f,
fillColor = Color.Black.copy(alpha = 0.5f),
...
)Here, we can now see a focused area on our map – clearly outlined and then filled with a transparent color. This gives us focus on the contents of our shape without creating such visual block within our map.
Aside from controlling the visual constraints of our Polygon, we can also listen for click events on the shape – this could be useful in case where we want to show further information for the clicked area. To enable this we need to enable the interaction by using the clickable argument, followed by handling the click interaction via the onClick lambda.
Polygon(
points = areaCoordinates,
clickable = true,
onClick = { shape ->
}
)In this blog post we’ve taken a quick look at the Polygon composable, a simple composable which is can be used to draw coordinate-based shapes on a map. We’ve not only learnt how we can style this composable to adhere to the required look/feel of our application, but also how we can enable click events to show further context on the selected line. In the following posts, we’ll continue to look at customising our map further through other composables that are supported through the GoogleMapComposable content scope.