Desenhar rotas no Mapa com o Xamarin.Forms

E ai pessoa tudo em riba? Recentemente no grupo que eu faço parte surgiu a demanda de se desenhar rotas em um mapa, se você seguir o tutorial do Xamarin ele apenas mostra parte do processo, que é o de desenhar a linha, porém ele não respeita rodovias, ruas, montanhas,etc.

E vocês não imaginam como é (muito) difícil encontrar exemplos, por isso resolvi escrever este artigo e posteriormente gravarei um vídeo mostrando como implementar isso no seu mapa.

Para quem tem pressa: link do Github com o projeto no fim do post

Preparando o ambiente

Inicialmente vamos precisar de duas chaves, uma para o GoogleMaps(caso esteja usando Android e/ou IoS) e uma chava para o DirectionsAPI.

Para isso basta entrar nos links abaixo e fazer a requisição da chave, se for seu primeiro acesso você terá que criar um projeto, coisa de 10 segundos.

Key para poder usar o GoogleMaps:
https://developers.google.com/maps/?hl=pt-br

Key para poder usar o DirectionsAPI:
https://developers.google.com/ma…/documentation/directions/…

Guarde as chaves, pois (obviamente) vamos precisar delas.

Com isso em mãos, basta criar um novo projeto Xamarin.Forms>PCL no Visual Studio. Com o projeto criado baixe os seguintes pacotes nuget:

Newtonsoft.Json;

Xamarin.Forms.Maps

Figura 1: Minha referências

Gosto de manter meus projetos o mais organizado possível, então separo tudo em pastas, como mostro na figura 1. Mas não se prenda a isso, ok?

Criando Serviço para o DirectionsAPI

O DirectionsAPI retorna um Json muito gigante(mostrarei os modelos mais abaixo) o que temos que fazer é desserializar esse Json em um modelo que possamos trabalhar, nada de novo sobre o Sol.

Dentro da pasta Services crie uma Classe(com o nome que mais lhe agradar) e implemente o seguinte trecho de código:

Ignore o erro que ele vai acusar em DirecaoResposta, isso vai acontecer porque essa classe ainda não foi criada.
Gist 1: DirecaoServico.cs

Como vocês podem ver a requisição para o serviço é feito por meio de uma URL, no caso do exemplo peguei o modelo mais simples possível, passando apenas a Origem e o Destino. É possível passar muitos outros parâmetros para o serviço, caso queiram olhar os outros bastar clicar aqui.

Criando o nosso MAPA

O mapa padrão do Xamarin não oferece recurso nativo para desenhar sobre ele, então precisamos criar o nosso mapa, tendo como base o mapa do Xamarin, dentro da pasta CustomRender, vamos criar uma classe e implementar o código exibido no Gist 2.

Gist 2: CustomMap

Feito isso temos que implementar o CustomMap de cada plataforma. No caso do Android ficará como mostrado no Gist 3.

Gist 3: CustomRenderMap paraAndroid

Os Modelos

Por fim vamos criar os modelos, eles são muitos! Você pode pegar o Json da documentação da DirectionAPI e usar o recurso “Colar JSON como Classe”. No meu caso eu peguei os modelos do TK.CustomMap. Você pode ter acesso aos modelos para este projeto clicando aqui.

Mas um olhar especial para a classe GooglePoints, o serviço retorna uma propriedade chamada overview_polyline, essa propriedade contem as coordenadas dos pontos que devem ser desenhados no mapa para formar a linha do trajeto. Porém eles vem criptografados, e a classe em questão é responsável por descriptografar essa propriedade e retornar Latitude e Longitude desses pontos. No Gist 4 é possível ver a implementação dessa classe.

Gist 4: Decodificação do Overview Polyline

Por Fim…

Com tudo isso implementado, basta criar sua View para o mapa e a lógica de programação que mais lhe agradar, esse projeto está no meu github, então resolvi deixar isso com o mínimo de código possível. Caso eu faça um vídeo tutorial eu mostrarei tudo passo a passo.

Figura 2 : Resultado final.
Like what you read? Give Pedro Jesus a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.