Geração de mapas com informações agregadas aplicado no Asp.Net utilizando o Bing Maps
Neste trabalho se propõe a apresentar
uma solução utilizando a Geovisualização aplicado a uma página web, tendo como
referência uma Api do Bing Maps que possibilita a geração de mapas com
informação agregada, no exemplo faremos um mapeamento de itinerário entre duas
cidades, informando postos fiscais durante o trajeto (dados fictícios).
Contexto de Geovisualização
Sistemas complexos de informação geográfica(Sig’s) que estavam acessíveis a somente a um determinado grupo de corporações e entidades, trouxe uma possibilidade de aplicação voltadas para pessoas que tem necessidades mais simples, como por exemplo por executar buscas de endereços, mapeamento de rotas, localização de lugares e outras situações que podem ser trabalhadas para resolver a um nicho maior de problemas .
O contexto da Geovisualização é a oportunidade que vem
trazendo essas soluções para um número de pessoas cada vez mais crescente, as
informações referentes ao trânsito são de grande utilidade na vida cotidiana
das pessoas, os mapas nos aplicativos web são uma solução cabível a esse
problema.
O exemplo proposto pode auxiliar para a criação de sistemas web que utilize esse tipo de tecnologia, aplicabilidades são diversas quando se é necessário o uso de mapas com informações complementares.
Api Bing Maps
Para
demonstrar o conceito explicitado anteriormente, faremos o uso da Api Bing
Maps.
No estudo
feito na API, pode-se utilizar o Silverlight Interactive SDK ou AJAX
Interactive SDK, no exemplo será utlizado o Ajax.
Como o
Ajax na sua essência é Java Script, faremos uso de classes que nos dará a
condição de embutir códigos Java Script na página a ser trabalhada.
Método RegisterStartupScript
Método
que registra bloco de Java Script no final da página, antes da tag
<form>, renderiza primeiramente os outros objetos html para logo após
colocar o código Java Script na página.
Exemplo:
Page.ClientScript.RegisterStartupScript(Me.GetType(), "Testing", _
"document.forms[0]['TextBox1'].focus();", True)
Leitura de XML
Faremos o
uso da classe XmlDocument e XmlNodeList para trabalharmos com a obtenção de dados, os mesmos podem estar
guardados em base de dados, porém, no exemplo, utilizaremos dados contidos em
um arquivo XML.
Aplicando a Geovisualização no
aps.net
O mapeamento de rotas terá o trecho
de código html abaixo.
Página Html
<%@ Page
Language="C#"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Teste Bings</title>
<script
type="text/javascript"
src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
</head>
<body onload
= "GetMap()">
<form
id="form1"
runat="server">
<div id='myMap' style="position:relative; width:700px;
height:550px;"></div>
<table>
<tr>
<td><b><label id="label1" >Cidade
Origem: </label></b></td>
<td><asp:TextBox ID="txtOrigem" runat="server">Belo Horizonte MG</asp:TextBox></td>
<tr>
<tr>
<td><b><label id="label2">Cidade
Destino: </label></b></td>
<td><asp:TextBox ID="txtDestino" runat="server">Formiga MG</asp:TextBox></td>
<tr>
<tr>
<td><input id="getroutemap" type="button" value="Obter Rota" onclick="GetRouteMap()"/></td>
</tr>
<tr>
<td><asp:Button ID="btnLimparRota" runat="server" Text="Limpar Rota" OnClick="btnLimparRota_Click" Width="99px"
/></td>
</tr>
</table>
</form>
</body>
</html>
O código
da página Htlm possui elementos simples para exemplificar o uso da api Bing
Maps, detalhe importante é a inserção prévia no cabeçalho do código, informamos
a utilização da api, conforme o trecho abaixo:
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
Temos
dois TextBox para o usuário informar as cidades (cidade de Origem e cidade de Destino).
Foi
inserido um botão para carregar a rota no mapa, e outro para limpar a rota e
embutir código Java Script dinamicamente na página HTML.
No corpo
da página, é chamado a função GetMap, que será inserida no código Java Script.
<body onload
= "GetMap()">
A tag Div
é necessária para carregar o mapa propriamente na página.
<div id='myMap' style="position:relative; width:700px;
height:550px;"></div>
No botão
ObterRota, é chamado a função Java Script GetRouteMap(), função que renderiza
no mapa a rota requisitada pelo usuário.
<input id="ObterRota" type="button" value="Obter Rota" onclick="GetRouteMap()"/>
Arquivo XML
Arquivo
que contém as informações de localização dos postos fiscais.
<?xml version="1.0" encoding="utf-8" ?>
<rotas>
<rota origem="Belo
Horizonte MG" destino="Formiga MG" >
<posto latitude ="-20.04" longitude ="-44.74"/>
<posto latitude ="-20.20" longitude ="-45"/>
</rota>
<rota origem="Belo
Horizonte MG" destino="Ipatinga MG" >
<posto latitude ="-19.76" longitude ="-43.72"/>
<posto latitude ="-19.62" longitude ="-42.93"/>
</rota>
</rotas>
Código da página
Como a
geração de mapas da API Bing Maps utiliza Java Script, geraremos dinamicamente
o código para ser inserido na página, os dados dos postos fiscais a serem
carregados serão do arquivo XML.
Declaração
das variáveis
//Declaração das
variáveis necessárias:
XmlDocument docXML;
string strPostos = "";
int numeroPostos = 0;
string trechoScript;
XmlNodeList elementoList;
Leitura
dos Dados no XML (postos fiscais)
XmlDocument doc = new
XmlDocument();
doc.Load(@"C:\Inetpub\wwwroot\TesteBingMaps\XMLFile.xml");
XmlNodeList elementoList;
elementoList = doc.GetElementsByTagName("rota");
for (int i = 0; i < elementoList.Count; i++)
{
if
(elementoList[i].Attributes.GetNamedItem("origem").InnerText
== txtOrigem.Text &&
elementoList[i].Attributes.GetNamedItem("destino").InnerText == txtDestino.Text)
{
for (int p = 0; p < elementoList[i].ChildNodes.Count;
p++)
{
strPostos += "var
cShape" + p + "= new
VEShape(VEShapeType.Pushpin, new
VELatLong(" +
elementoList[i].ChildNodes.Item(p).Attributes.GetNamedItem("latitude").InnerText + ", "
+
elementoList[i].ChildNodes.Item(p).Attributes.GetNamedItem("longitude").InnerText + ")); ";
numeroPostos++;
}
}
}
No bloco
do código, iremos ler os dados fictícios dos postos fiscais, carregamos o
arquivo XML.
XmlDocument doc = new
XmlDocument();
doc.Load(@"C:\Inetpub\wwwroot\TesteBingMaps\XMLFile.xml");
Faz necessário o uso da
classe XmlNodeList para percorrer os elementos da lista, no laços for
aninhados, percorremos a lista de elementos e comparamos se existe a rota entre
duas cidades informadas na página, caso tenha, será gerado o código Java Script
que irá gerar marcadores no mapa, que representa os postos fiscais.
strPostos += "var cShape" + p + "=
new VEShape(VEShapeType.Pushpin, new
VELatLong(" +
elementoList[i].ChildNodes.Item(p).Attributes.GetNamedItem("latitude").InnerText + ", "
+
elementoList[i].ChildNodes.Item(p).Attributes.GetNamedItem("longitude").InnerText + ")); ";
O objeto
VEShape é um objeto da api Bing maps que exibe um marcador na página.
Posteriormente
a variável trechoScript receberá o trecho de código Java
Script.
trechoScript = @"var map = null;
var pontoInicialMapa = new
VELatLong(-19.888564008579245, -43.918458223342896, 0, VEAltitudeMode.Default);
function GetMap()
{
pontoInicialMapa = new
VELatLong(-19.888564008579245, -43.918458223342896, 0, VEAltitudeMode.Default);
map = new VEMap('myMap');
map.LoadMap(pontoInicialMapa, 8);
}
function GetRouteMap()
{
var locations;
locations = new
Array('" +
txtOrigem.Text + "', '" +
txtDestino.Text + "');";
trechoScript += @"var
options = new VERouteOptions;
options.DrawRoute = true;
options.SetBestMapView =
false;
options.DistanceUnit = VERouteDistanceUnit.Mile;
options.ShowDisambiguation
= true;
map.GetDirections(locations, options); ";
Explicando
melhor o trecho de código inserido na variável trechoScript, a função GetMap()
renderiza o mapa com os pontos cardeais (latitude e longitude) definidos.
A função
GetRouteMap() obtém a trajetória da rota a partir das cidades informadas pelo
usuário nos TextBox.
trechoScript
+= strPostos;
for
(int i = 0; i < numeroPostos; i++)
{
trechoScript += "map.AddShape(cShape" + i + "); ";
}
trechoScript += "}";
ClientScript.RegisterStartupScript(this.GetType(), string.Empty, trechoScript, true);
No trecho
final, a variável trechoScript recebe os pontos cardeais dos postos fiscais(trechoScript += strPostos) a serem redenrizados no mapa.
No laço
For, o é adicionado propriamente no código script os marcadores, de acordo com
o número de postos fiscais existentes perante o trajeto obtido.
Conclusão
A tecnologia de sistemas de geovisualização tem si tornado
uma alternativa interessante, tendo uma aplicabilidade abrangente, pois a
necessidade de localização geográfica associada a outro tipo de informação pode
ser importante para o cotidiano das pessoas.
No exemplo proposto, a idéia é demonstrar que existem
alternativas para se trabalhar com sistemas que necessitam de informações
georeferenciadas.
Referências
Bing Maps Platform
http://www.microsoft.com/maps/
Using
JavaScript Along with ASP.NET 2.0
http://msdn.microsoft.com/en-us/library/aa479390.aspx
MORAES, Maurício. Mapas na Web. Info Exame, São Paulo, n. 275, p.
28-40, Jan. 2009.