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.