Transformando mapas móveis com Jetpack Compose: insights do Google I/O para desenvolvedores

Esta postagem é baseada em uma palestra proferida no I/O Extended para o Google Developers Group Londres em julho de 2023. Os slides da palestra estão disponíveis Google aqui Jetpack Compose para mapas É difícil imaginar que o Jetpack Compose 1.0 foi lançado em . Dois anos depois, com é fácil entender o porquê. julho de 2021 24% dos 1.000 principais aplicativos do Google Play adotando o Compose, Entre toda a empolgação, um aspecto do desenvolvimento moderno do Android que sinto que recebe pouca atenção é o Google Maps. Já faz um tempo que não uso o SDK, então fiquei agradavelmente surpreso ao ver que o Google Maps estava se atualizando e lançou sua própria . biblioteca Compose Esta será uma boa notícia para empresas e engenheiros que trabalham na área de mapeamento. O mapeamento móvel é uma indústria de US$ 35,5 bilhões, com previsões de que aumentará para US$ 87,7 bilhões até 2028, a uma taxa composta de crescimento anual (CAGR) de 19,83%. Fonte Um mercado maior significa mais oportunidades para as empresas obterem receitas a partir de aplicações de mapeamento móvel. Eles variam desde os casos de uso usuais, alimentos, entrega de alimentos e serviços de carona. Porém, se você se aprofundar, verá que existem aplicações que não são imediatamente óbvias. Por que isso é importante? Abaixo estão os exemplos que consegui encontrar após uma breve pesquisa: Os mapas móveis são excelentes para Cidades Inteligentes, ajudando a gerir o ritmo cardíaco de uma cidade e a visualizar dados de forma a melhor compreender e reagir aos seus desafios. Útil para planejadores urbanos, organizações de resposta a emergências ou residentes comuns. A gestão de recursos também se beneficia das soluções de mapeamento. Variando da agricultura à pesca, da mineração à silvicultura, os mapas fornecem aos que trabalham nesta linha de trabalho uma perspectiva para tomar as decisões corretas para colher materiais de forma sustentável. O transporte depende fortemente da tecnologia de mapeamento. Não apenas aplicativos de consumo, como Google Maps ou Uber, mas funções de nível empresarial, como entender onde está localizada a frota de veículos de uma empresa. As agências de transporte também usam mapas para gerenciar o tráfego e ajudar a tomar decisões sobre para onde direcionar o tráfego para facilitar o fluxo. Finalmente, com as alterações climáticas e o tempo cada vez mais imprevisível, os mapas permitem que as agências meteorológicas, as unidades de resposta a emergências e os conservacionistas da vida selvagem compreendam como o nosso mundo está a mudar e o que podemos fazer para tomar medidas positivas para reduzir esta situação. , , , , , Fontes: Mordor Intelligence GMInsights Allied Market Research EMR Research Google Earth Outreach Pesquisa e Mercados Com o mundo fornecendo cada vez mais dados, é um bom momento para aprender como colocar esses dados em um mapa. Vamos fazer isso e voltar ao código. Usando o Google Maps para Compose O Google Maps para Compose depende das seguintes dependências: dependencies { implementation "com.google.maps.android:maps-compose:2.11.4" implementation "com.google.android.gms:play-services-maps:18.1.0" // Optional Util Library implementation "com.google.maps.android:maps-compose-utils:2.11.4" implementation 'com.google.maps.android:maps-compose-widgets:2.11.4' // Optional Accompanist permissions to request permissions in compose implementation "com.google.accompanist:accompanist-permissions:0.31.5-beta" } O Google Maps para Compose foi desenvolvido com base no SDK do Google Maps, portanto, você precisa importar a biblioteca do Compose e o SDK do Maps. Você não precisará usar a maioria dos objetos no SDK do Google Maps, pois a biblioteca de composição agrupa a maioria deles em elementos que podem ser compostos. As bibliotecas de utilitários e widgets são uma dependência opcional. A biblioteca de utilitários fornece a capacidade de agrupar marcadores nos mapas, enquanto os widgets fornecem componentes de UI adicionais. Você os verá em uso mais tarde. Para esta postagem, incluí a biblioteca de solicitações de permissões do Accompanist para demonstrar como solicitar permissões de localização, uma permissão frequentemente usada em mapas. Accompanist é uma biblioteca experimental para o Google testar e coletar feedback sobre recursos que ainda não fazem parte do Jetpack Compose. Por fim, você precisa acessar o , inscrever-se para obter uma chave de API do SDK do Google Maps e adicioná-la ao seu projeto. Há um guia nos sobre como fazer isso. Google Developer Console documentos para desenvolvedores do Google Maps no Google Developer Console, bloqueie sua chave de API para que ela funcione apenas com seu aplicativo. Isso evita qualquer uso não autorizado. Dica de segurança: Mostrando um mapa Mostrar um mapa é tão simples quanto abaixo: setContent { val hydePark = LatLng(51.508610, -0.163611) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(hydePark, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState) { Marker( state = MarkerState(position = hydePark), title = "Hyde Park", snippet = "Marker in Hyde Park" ) } } Crie um objeto com a posição de uma área e use-o em conjunto com para definir a posição inicial da câmera. Este método a posição do mapa conforme você se move usando as mãos ou de forma programática. Sem esse método, o Compose recalcularia o mapa de volta à sua posição inicial a cada mudança de estado. LatLng rememberCameraPositionState lembra Em seguida, crie uma composição e passe um modificador de sua escolha e o estado da câmera. também fornece uma API Slot para passar elementos que podem ser compostos adicionais. Esses elementos que podem ser compostos são o que você deseja desenhar no mapa. GoogleMap GoogleMap Adicione um que pode ser composto e, em seguida, adicione um contendo a posição do marcador dentro dele. Por fim, adicione um título e uma descrição do marcador. Marker MarkerState Executar isto dá uma bela vista aérea do oeste de Londres com um marcador no Hyde Park. Personalizando a janela do marcador Você pode personalizar a janela do marcador usando um Composable. Isso também tem uma API baseada em slot, o que significa que você pode passar seus elementos que podem ser compostos para renderizar sua IU personalizada na janela. MarkerInfoWindowContent setContent { val hydePark = LatLng(51.508610, -0.163611) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(hydePark, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState) { MarkerInfoWindowContent( state = MarkerState(position = hydePark), title = "Hyde Park", snippet = "Marker in Hyde Park" ) { marker -> Column(horizontalAlignment = Alignment.CenterHorizontally) { Text( modifier = Modifier.padding(top = 6.dp), text = marker.title ?: "", fontWeight = FontWeight.Bold ) Text("Hyde Park is a Grade I-listed parked in Westminster") Image( modifier = Modifier .padding(top = 6.dp) .border( BorderStroke(3.dp, color = Color.Gray), shape = RectangleShape ), painter = painterResource(id = R.drawable.hyde_park), contentDescription = "A picture of hyde park" ) } } } } Executar isso mostra a janela personalizada acima do marcador quando você toca nele. Mostrando vários marcadores Mostrar vários marcadores é tão simples quanto adicionar quantos você precisar. Vamos adicionar marcadores para alguns parques diferentes no oeste de Londres. setContent { val hydePark = LatLng(51.508610, -0.163611) val regentsPark = LatLng(51.531143, -0.159893) val primroseHill = LatLng(51.539556, -0.16076088) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(hydePark, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState) { // Marker 1 Marker( state = MarkerState(position = hydePark), title = "Hyde Park", snippet = "Marker in Hyde Park" ) // Marker 2 Marker( state = MarkerState(position = regentsPark), title = "Regents Park", snippet = "Marker in Regents Park" ) // Marker 3 Marker( state = MarkerState(position = primroseHill), title = "Primrose Hill", snippet = "Marker in Primrose Hill" ) } } Execute o código e você verá seus marcadores aparecerem no mapa. Marcadores de agrupamento Um mapa pode ficar ocupado em um curto espaço de tempo. Se você estiver tentando mostrar 300 marcadores, será visualmente difícil para o usuário entender o que está acontecendo. O Google Maps e seu dispositivo também não agradecerão, pois terão que renderizar , impactando o desempenho e a vida útil da bateria. todos os marcadores A solução para isso é , uma técnica que agrupa marcadores próximos uns dos outros em um único marcador. Esse agrupamento acontece em nível de zoom. À medida que você diminui o zoom do mapa, os marcadores serão agrupados em um cluster, à medida que você aumenta o zoom, o cluster será dividido em marcadores individuais. o Clustering O Google Maps para Compose fornece isso imediatamente por meio de um que pode ser composto. Não há necessidade de escrever classificações ou filtros complexos para que o clustering ocorra. Clustering setContent { val hydePark = LatLng(51.508610, -0.163611) val regentsPark = LatLng(51.531143, -0.159893) val primroseHill = LatLng(51.539556, -0.16076088) val crystalPalacePark = LatLng(51.42153, -0.05749) val greenwichPark = LatLng(51.476688, 0.000130) val lloydPark = LatLng(51.364188, -0.080703) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(hydePark, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState) { val parkMarkers = remember { mutableStateListOf( ParkItem(hydepark, "Hyde Park", "Marker in hyde Park"), ParkItem(regentspark, "Regents Park", "Marker in Regents Park"), ParkItem(primroseHill, "Primrose Hill", "Marker in Primrose Hill"), ParkItem(crystalPalacePark, "Crystal Palace", "Marker in Crystal Palace"), ParkItem(greenwichPark, "Greenwich Park", "Marker in Greenwich Park"), ParkItem(lloydPark, "Lloyd park", "Marker in Lloyd Park"), ) } Clustering(items = parkMarkers, onClusterClick = { // Handle when the cluster is tapped }, onClusterItemClick = { marker -> // Handle when a marker in the cluster is tapped }) } } data class ParkItem( val itemPosition: LatLng, val itemTitle: String, val itemSnippet: String) : ClusterItem { override fun getPosition(): LatLng = itemPosition override fun getTitle(): String = itemTitle override fun getSnippet(): String = itemSnippet } Observe a classe de dados adicionada. Precisamos disso porque os itens passados para um elemento que pode ser composto devem estar em conformidade com a interface . A interface fornece ao Cluster a posição, o título e o snippet de cada marcador. ParkItem Clustering ClusterItem Aumente e diminua o zoom e você verá o agrupamento em ação. Obtendo permissão de localização Os mapas e a posição do usuário geralmente andam de mãos dadas, por isso faz sentido que alguns aplicativos de mapeamento peçam permissão para a localização do usuário. Se você fizer isso, a permissão de localização é uma das permissões mais confidenciais para adquirir de um usuário. Trate a permissão de um usuário com respeito. Certifique-se de informar ao usuário por que você precisa dessa permissão e mostrar ativamente os benefícios de concedê-la. Pontos de bônus se seu aplicativo funcionar parcialmente sem a necessidade de permissão. O Google fornece ótimos guias sobre como , bem como um guia separado para . lidar com a localização dos usuários acessar dados de localização em segundo plano Então você fez a devida diligência e decidiu que precisa da permissão do usuário para acessar o local. Com a biblioteca de permissões no Accompanist, você faz assim: // Don't forget to add the permissions to AndroidManifest.xml val allLocationPermissionState = rememberMultiplePermissionsState( listOf(android.Manifest.permission.ACCESS_COARSE_LOCATION, android.Manifest.permission.ACCESS_FINE_LOCATION) ) // Check if we have location permissions if (!allLocationPermissionsState.allPermissionsGranted) { // Show a component to request permission from the user Column( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center, modifier = Modifier .padding(horizontal = 36.dp) .clip(RoundedCornerShape(16.dp)) .background(Color.white) ) { Text( modifier = Modifier.padding(top = 6.dp), textAlign = TextAlign.Center, text = "This app functions 150% times better with percise location enabled" ) Button(modifier = Modifier.padding(top = 12.dp), onClick = { allLocationPermissionsState.launchMultiplePermissionsRequest() }) { Text(text = "Grant Permission") } } } Via acompanhante, estamos verificando se o aplicativo tem acesso à permissão , ou um alto nível de precisão do GPS em inglês. É importante incluir as permissões solicitadas no manifesto do Android, pois de outra forma você não poderá solicitá-las. ACCESS_FINE_LOCATION O sistema Android e a Google Play Store também utilizam o manifesto para entender como seu app funciona e informar os usuários. Se a permissão não for concedida, uma pequena caixa de diálogo que pode ser composta será exibida explicando a necessidade da permissão e um botão para iniciar a solicitação de permissão por meio do sistema. Animando o mapa Embora a maioria dos aplicativos de mapas exija que o usuário mova o mapa por meio do toque, o Google Maps for Compose fornece APIs para mover o mapa de forma programática. Isto pode ser útil se você quiser navegar para uma área específica em resposta a um evento. Neste exemplo, navegaremos suavemente no aplicativo por nossa coleção de marcadores. Box(contentAlignment = Alignment.Center) { GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState ) { Clustering(items = parkMarkers, onClusterClick = { // Handle when the click is tapped false }, onClusterItemClick = { marker -> // Handle when the marker is tapped }) LaunchedEffect(key1 = "Animation") { for (marker in parkMarkers) { cameraPositionState.animate( CameraUpdateFactory.newLatLngZoom( marker.itemPosition, // LatLng 16.0f), // Zoom level 2000 // Animation duration in millis ), delay(4000L) // Delay in millis } } } } A parte principal aqui é o código dentro do . Para cada marcador, o aplicativo configura uma chamada para navegar até o marcador. A câmera recebe essas informações por meio de uma atualização da câmera, criada usando . LaunchedEffect cameraPositionState.animate() CameraUpdateFactory.newLatLngZoom() Este método utiliza um , um float que indica o nível de zoom do mapa e um long para definir a duração da animação. LatLng Finalmente, para espaçar as animações usamos para adicionar uma pausa de 4 segundos entre cada animação. delay() Mostrando o Street View Não é apenas um mapa aéreo com o qual o Google Maps for Compose ajuda você. Você também pode conceder aos aplicativos acesso ao , mostrando uma visão 360º de um local. Você faz isso usando o elemento que pode ser composto : Street View StreetView var selectedMarker: ParkItem? by remember { mutableStateOf(null) } if (selectedMarker != null) { StreetView(Modifier.fillMaxSize(), streetViewPanoramaOptionsFactory = { StreetViewPanoramaOptions().position(selectedMarker!!.position) }) } else { Box(contentAlignment = Alignment.Center) { GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState ) { Clustering(items = parkMarkers, onClusterClick = { // Handle when the cluster is clicked false }, onClusterItemClick = { marker -> // Handle when a marker in the cluster is clicked selectedMarker = marker false }) } } } Neste exemplo, estamos definindo a variável sempre que um marcador é tocado. Se um marcador for selecionado mostramos o Street View, passando na posição do marcador. selectedMarker Desenhando formas Você pode desenhar suas próprias formas e anotações no mapa. O Google Maps para Compose fornece vários elementos que podem ser compostos para fazer isso. Nesta postagem, usaremos o elemento que pode ser composto . Circle Um círculo é uma boa forma de usar se seu aplicativo usar cercas geográficas para reagir às alterações na localização de um usuário. Um círculo pode representar a área em que uma cerca geográfica está ativa. Box(contentAlignment = Alignment.Center) { GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState ) { Clustering(items = parkMarkers, onClusterClick = { // Handle when the cluster is clicked false }, onClusterItemClick = { marker -> // Handle when a marker in the cluster is clicked selectedMarker = marker false }) } } parkMarkers.forEach { Circle( center = it.position, radius = 120.0, fillColor = Color.Green, strokeColor = Color.Green ) } Aqui, montamos um círculo para cada um dos nossos marcadores. Criar um círculo envolve passar a ele uma posição e o tamanho do raio do círculo. Também usamos dois parâmetros opcionais para definir a cor da borda e preencher a cor do círculo. Mostrando uma ScaleBar Um bom mapa geralmente vem com legendas e diagramas mostrando a que medida de espaço no mapa é equivalente em distância. Isso dá uma ideia dos espaços envolvidos no mapa, pois nem todos os mapas podem utilizar a mesma forma de medição. Para mapas digitais que podem aumentar e diminuir o zoom, isso adiciona uma camada específica de complexidade, pois as distâncias representadas podem mudar dinamicamente. Felizmente, o Google Maps para Compose ajuda você. Usando a biblioteca Widgets, você obtém acesso aos elementos que podem ser compostos e . Esses são componentes de IU localizados na parte superior do mapa, fornecendo aos usuários uma medida de distância que muda dependendo do nível de zoom. DisappearingScaleBar ScaleBar Box(contentAlignment = Alignment.Center) { GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState ) { // You can also use ScaleBar DisappearingScaleBar( modifier = Modifier .padding(top = 5.dp, end = 15.dp) .align(Alignment.TopStart), cameraPositionState = cameraPositionState ) Clustering(items = parkMarkers, onClusterClick = { // Handle when the cluster is clicked false }, onClusterItemClick = { marker -> // Handle when a marker in the cluster is clicked selectedMarker = marker false }) } } parkMarkers.forEach { Circle( center = it.position, radius = 120.0, fillColor = Color.Green, strokeColor = Color.Green ) } Depois de adicionar o elemento que pode ser composto, você obtém um ScaleBar que muda dependendo do nível de zoom na parte superior do mapa. Ajuda e suporte O Google Maps para Compose é uma ótima maneira de trabalhar com o Google Maps e há muito mais para aprender. Aqui estão alguns lugares que recomendo se você precisar de ajuda: : o repositório que contém o código-fonte da biblioteca. Contém exemplos de código sobre como usar a biblioteca e também onde você pode enviar seus relatórios de bugs e contribuições Google Maps for Compose Repo : o lugar para aprender os conceitos por trás do Google Maps para Android. Eles são de alto nível e não usam a biblioteca Compose, mas são importantes de serem conhecidos, pois são usados em segundo plano. Site do Google Maps para Android O servidor Discord oficial do Google Maps. Aqui você encontra pessoas discutindo sobre o Google Maps para diversas plataformas, pedindo e oferecendo ajuda e apresentando seus próprios trabalhos. Discord da plataforma Google Maps