Aplicativo utilizando a API de mapas do Windows Phone

Introdução

Neste tutorial iremos fazer uma pequena introdução a utilização de mapas no desenvolvimento de aplicativos Windows Phone.

A plataforma Windows Phone fornece sua própria API de mapas que utiliza os mapas fornecidos pelo serviço Bing da Microsoft. Uma limitação desta API é que ela não permite a marcação direta de locais sobre o mapa, porém é possível contornar essa limitação com o uso de overlays como veremos ao decorrer deste tutorial.

Antes de iniciar o desenvolvimento de um aplicativo que utilize o mapa, o desenvolvedor deve instalar um pacote NuGet chamado  Windows Phone Toolkit que entre coisas nos fornecerá métodos que facilitam a conversão de coordenadas geográficas e possibilitará que desenhemos sobre o mapa para marcar um dado lugar. O método de instalação de pacotes Nuget pode ser encontrado no tutorial anterior.

Declaração de recursos

Quando o aplicativo em desenvolvimento necessita acessar algum recurso especial do dispositivo o desenvolvedor deve declarar essa necessidade no Manifest do aplicativo. Essa declaração serve tanto para liberar o acesso ao recurso quanto para avisar ao usuário quais são os dados que o aplicativo pode obter.

A capacidade necessária para acesso ao mapa é a ID_CAP_MAP e pode ser declarada diretamente no Manifest ou utilizando a interface gráfica do Visual Studio.

Interface gráfica para alteração do Manifest

Adicionando o mapa

Podemos adicionar o mapa no aplicativo tanto pelo XAML quanto por C#. Neste tutorial Iremos optar pelo uso do XAML para ficar condizente com o padrão que temos adotado através desta sério de tutoriais.

O trecho de código a seguir representa a declaração de uma mapa através do XAML:

[sourcecode language=”xml” wraplines=”false” collapse=”false”]
<maps:Map x:Name="Mapa"
VerticalAlignment="Top"
Height="460"
ZoomLevel="17"
Center="-20.385122,-43.503652" />
[/sourcecode]

No código exemplo acima temos um mapa centralizado na cidade de Ouro Preto com nível de zoom 17. Também definimos o nome do mapa, para podermos fazer as alterações através do código c#.

Marcando um ponto no mapa

Iremos marcar um ponto no mapa através do uso do código C#. Neste exemplo iremos fazer a marcação no ponto inicial do mapa, de modo que o usuário consiga interagir com o mapa e voltar ao ponto inicial. Porém é possível marcar qualquer lugar usando para isso as coordenadas do local.

O trecho de código a seguir pode ser adicionado no método OnNavigateTo para marcar o ponto assim que a página que contenha o mapa carregar.

[sourcecode language=”csharp” wraplines=”false” collapse=”false”]
MapOverlay overlay = new MapOverlay
{
GeoCoordinate = Mapa.Center,
Content = new Ellipse
{
Fill = new SolidColorBrush(Colors.Red),
Width = 40,
Height = 40
}
};
MapLayer layer = new MapLayer();
layer.Add(overlay);
Mapa.Layers.Add(layer);
[/sourcecode]

O trecho de código acima marca o local determinado, centro de Ouro Preto, com uma elipse de tamanho 40 pixels. Se o local a ser marcado fosse outro que não o centro do mapa basta alterar o GeoCoordinate do overlay para um novo GeoCordinate com as coordenadas correspondentes. Essa alterção pode ser vista na linha de código abaixo, que altera a marcação para a UFOP.

[sourcecode language=”csharp” wraplines=”false” collapse=”false”]
GeoCoordinate = new GeoCoordinate(-20.398155,-43.50897);
[/sourcecode]

Com isso podemos exibir o mapa e marcar um dado local. Outras opções que o desenvolvedor pode especificar tanto pelo XAML quanto pelo C# incluem o modo de cor (claro e escuro), o modo cartográfico (mapa, satélite, terreno e híbrido) dentre outros.

Obtendo token de autorização

Para conseguir o token de autorização citado na imagem no começo deste tutorial o desenvolvedor deve solicitar o mesmo durante o processo de submissão da aplicação. para isso basta seguir os seguintes passos:

1. Entre no Dev Center,
2. Na pagina de submissão de aplicativo selecione a opção Map Services,
3. Selecione a opção Get Token,
4. Copie o ApplicationID e AuthenticationToken.

Configurando a autorização

Com os dados obtidos no passo anterior o desenvolvedor deverá criar um handler pro evento de mapa carregado. Este handler deve ser responsável por configurar no aplicativo o ApplicationID e AuthenticationToken. Segue abaixo um trecho de código cedido como exemplo pela Microsoft que faz este tratamento:

[sourcecode language=”csharp” wraplines=”false” collapse=”false”]
private void myMapControl_Loaded(object sender, RoutedEventArgs e)
{
Microsoft.Phone.Maps.MapsSettings.ApplicationContext.ApplicationId = "ApplicationID";
Microsoft.Phone.Maps.MapsSettings.ApplicationContext.AuthenticationToken = "AuthenticationToken";
}
[/sourcecode]