O ALOV Map é um aplicativo simples, construído usando-se a linguagem Java que nos permite visualizar mapas tanto em formato vetorial, como os do tipo shapefile como também matriciais, através da internet, com qualidade bastante satisfatória. Você gostaria de aprender como usar essa opção para montagem de aplicações webmapping? Veremos nesse tutorial como montar um mapa básico, publicando arquivos em formato vetorial.
EXEMPLO PRÁTICO
Vamos criar uma aplicação que permitirá visualizar os atributos gráficos e alfanuméricos de um shapefile com a divisão política do Brasil.
O resultado do que será mostrado nesse tutorial, quanto à visualização, será semelhante ao mostrado na figura.
Antes de prosseguir com a explicação, podemos resumir o funcionamento de um Webmapping desse tipo, afirmando que ele faz uso de um arquivo HTML, um XML (com as devidas configurações), o arquivo shapefile compactado e o applet do Alov Map – Todos estes devem, preferivelmente, estar em um mesmo nível ou diretório.
FAZENDO O DOWNLOAD DO ALOV MAP
O site do projeto Alov Map foi removido há algum tempo. Mas ainda é possível fazer o download na página a seguir:
O Alov também possui uma versão servlet, que não será considerada neste tutorial.
CRIAÇÃO DE ARQUIVOS HTML E XML
Para criar os arquivos de extensão *.html e *.xml que serão usados para o funcionamento da aplicação, poderemos usar um dos diversos editores de código fontes, como por exemplo o SciTE (software livre), ou mesmo o bloco de notas.
Abaixo estão os códigos dos arquivos XML e HTML.
Entenda que a primeira linha mostrada abaixo é padrão para arquivos XML e diz a respeito de certas características peculiares do arquivo. Códigos da linguagem XML, e também os na HTML (XHTML) são organizados utilizando o que chamamos de tags.
A seguir, temos a explicação de algumas das tags usadas neste caso acima:
A tag <project … </project> indica o início e o término do projeto do arquivo XML. Na maioria dos casos, para que seja indicado o fechamento da tag usa-se o sinal “</” ou “/>”.
No trecho <domain name=”Brasil” … xmin=”-78.71″ ymin=”-35.94″ xmax=”-20.29″ ymax=”12.67″/> é necessário entender que “domain name=”Brasil”” se refere ao domínio, ou seja a um campo que aparecerá na aplicação que será usado, por exemplo, para dar um zoom total no layer.
Já o restante: “xmin=”-78.71″ ymin=”-35.94″ xmax=”-20.29″ ymax=”12.67″” é a delimitação do retângulo envolvente, também chamado bounds, que delimita a camada da informação. Perceba que nesse caso foram usadas coordenadas geográficas em grau decimal.
OBS: Vale lembrar que o retângulo envolvente é determinado pelas coordenadas do canto inferior esquerdo e superior direito que delimitam a área representada pelo layer.
A parte do código onde está escrito: <map name=”Divisão Política” index=”m1″ /> está relacionado com o nome do mapa a ser visualizado. Nesse nosso exemplo só temos um único mapa, ou nomeado como “Divisão Política”. Essa linha poderá exercer a função de controlar a exibição dos mapas temáticos, se existirem na aplicação, o que ainda não é o nosso caso.
O trecho <layer … </layer> define as diversas camadas de informação. Em nosso exemplo, também só temos um único layer, chamado “Estados”.
Note também que a tag layer traz a declaração: name=”Estados” visible=”yes” showlegend=”yes” zoom=”50″>, que significa, respectivamente, que ao carregar a aplicação, o layer “Estados” estará visível, mostrando uma legenda na lateral da tela e ao vermos a tabela de atributos do shapefile teremos uma opção de zoom de índice 50.
Já a parte onde aparece: <dataset url=”shape.zip” /> indica o nome do arquivo compactado onde estão os shapefiles.
Por fim, o trecho <renderer> <symbol fill=”211:255:190″ outline=”38:115:0″ /> </renderer> indica características da visualização da camada de informação. Os números entre aspas e separados por dois pontos estão relacionados ao padrão RGB (Red, Green, Blue) de composição das cores. Por exemplo, neste código, a cor da linha de contorno das feições e o preenchimento dos polígonos são tonalidades do verde.
Para essa nossa primeira experiência com o Alov, o arquivo XML já está suficientemente bem configurado. Mas é de suma importância também prepararmos bem o arquivo HTML. O código fonte do arquivo *.html usado para nosso exemplo foi:
As duas primeiras linhas dizem a respeito das características do tipo de documento HTML. A tag <html … </html> se referem ao início e o encerramento do uso da linguagem XHTML. Isso mesmo, a linguagem se chama XHTML e não HTML, embora a extensão do arquivo continue sendo *.html.
No trecho copiado abaixo, colocamos o título da página, nesse caso escolhemos “.:ClickGeo – Brasil:.”. Perceba que que colocamos isso dentro da tag head, que se refere ao cabeçalho.
Dentro da tag body colocamos outra tag muito importante chamada applet. Segue a baixo o detalhamento do que está dentro da tag applet.
- archive=”alov_applet.jar” – Faz referencia ao applet do Alov, note a extensão *.jar mostrando que se trata de uma aplicação montada em Java.
- width=”980″ height=”530″ align=”center”> – Nessa linha definimos as dimensões da janela na qual será exibida o applet do Alov.
- <param name=”pid” value=”mapa.xml”> – Nessa parte fazemos referência ao arquivo XML criado anteriormente, neste caso “mapa.xml” (que poderia ter sido nomeado de outra forma, sem problemas)
Assim terminamos de configurar o arquivo HTML. Abra o arquivo mapa.html com seu browser e veja como ficou aplicação Alov Map.
Para baixar o tutorial, em PDF, acesse o link abaixo.
-
[download id=”66″]
Este tutorial já foi utilizado como referência de um interessante artigo sobre webmapping. Veja:
Esta aplicação inicial será bem básica, oferecendo a possibilidade de visualização atributos gráficos e alfanuméricos do shapefile. O resultado deverá ser semelhante ao mostrado na figura acima no início desta postagem.
TUTORIAIS SOBRE WEBMAPPING
Quer aprender mais sobre aplicativos open source para publicação de mapas na internet? Leia as seguintes matérias relacionadas:
Caso tenha alguma dúvida sobre o uso do Alov Map, entre em contato através de nosso sistema de comentários.
