quinta-feira, setembro 27, 2007

Criando uma aplicação Webmapping com o Alov map

O Alov map é um publicador de mapas gratuito, desenvolvido através da linguagem Java que pode ser implementado na forma de applet ou servlet. Na versão servlet os dados ficam armazenados em um SGBD e são enviados ao cliente de forma incremental, através do botão de “ligar/desligar camada”, já na versão applet, todos os dados são enviados ao cliente no momento em que a página é carregada no browser.

Embora a versão servlet seja mais flexível, neste tutorial vamos trabalhar inicialmente na versão applet deste programa, que é bem mais fácil de configurar para usuários iniciantes. Mais detalhes sobre o alov podem ser encontrados no site
http://alov.org

Para visualizar a página que será criada neste tutorial é necessário que você tenha a máquina virtual Java (JVM), ou o JRE instalados no seu computador.

1o Passo – Download do Alov Map:

Para baixar o Alov é necessário que o usuário faça um registro na página de downloads do site, após este registro, baixe a versão applet do programa, como mostra a figura 1 abaixo:

Figura 1 – baixando a versão Applet.

Os dados deste tutorial podem ser baixados no site: http://geo.marcello.googlepages.com/municipios.zip

2oPasso – Preparando a aplicação:

Coloque os arquivos baixados em uma mesma pasta de sua escolha, não é necessário descompactar o arquivo shapefile zipado (municipios.zip). A seguir vamos criar dois arquivos para que o aplicativo funcione, um no formato XML e outro no formato HTML.

3o Passo – Criando o arquivo XML de configuração dos layers:

Neste arquivo iremos definir a forma na qual os dados serão apresentados no Alov, à medida que fomos passando para os outros tutoriais, este arquivo irá sendo alterado de forma gradativa. Através de um editor de texto de sua escolha, crie um arquivo chamado config.xml com o conteúdo abaixo:

<?xml version="1.0" encoding="ISO-8859-1"?>
<project zoomunits="km" mapunits="degrees">
<layer name="Municipios" visible="yes" showlegend="yes">
<dataset url="municipios.zip" />
<renderer>
<symbol fill="211:255:190" outline="38:115:0" />
</renderer>
</layer>
</project>

Explicando...

A linha 1 indica que este arquivo é um XML, e qual é a sua codificação.

Na linha 2 inicia-se a tag projeto, todos os dados que serão mostrados no aplicativo devem ser declarados em algum lugar dentro do projeto, também foram definidos dois atributos para essa tag, um indicando que as unidades de zoom estão em quilômetros (zoomunits="km") e outro indicando que as unidades do mapa estão em graus decimais (mapunits="degrees"). A linha 9 fecha o projeto iniciado na linha 2.

Na linha 3 inicia-se um layer, onde o seu nome foi definido como municípios (name="Municipios"), que estará visível quando o Alov for inicializado (visible="yes") e terá uma legenda mostrando a sua cor e/ou símbolos utilizados (showlegend="yes"). A linha 8 indica o final da definição do layer.

Na linha 4 é definido o local e nome do arquivo shapefile desta camada (url="municipios.zip"), observe que não é necessário descompactá-lo, já que o Alov é capaz de ler arquivos no formato zip.

A linha 5 inicia a tag renderer onde dentro dela, definiremos a aparência do layer através da tag symbol. Os atributos fill e outline definem respectivamente as cores de preenchimento e da cor da borda do polígono na escala RGB. A linha 8 fecha a tag renderer.

4o Passo – Criando o arquivo HTML:

No arquivo HTML será colocado a diretiva applet, responsável por carregar a janela do aplicativo. Para isso, crie um arquivo chamado mapa.html com o conteúdo abaixo:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webmapping</title>
</head>
<body>
<applet codebase ="."
code="org.alov.viewer.SarApplet"
archive="alov_applet.jar"
width="650" height="400" align="center">
<param name="pid" value="config.xml">
</applet>
</body>
</html>

Explicando...

As linhas 1 e 2 indicam o doctype do arquivo HTML, a linha 3 inicia a tag html com o atributo namespace e a linha 16 fecha o tag html.

A linha 4 inicia a tag do cabeçalho (head), onde é definido o título do documento através da tag title, na linha 6. A linha 7 fecha a tag head.

O conteúdo da página é definido dentro do corpo (body), ou seja, entre as linhas 8 e 15.

A linha 9 inicia a tag applet, indicando que o arquivo alov_applet.jar está na mesma pasta em que o HTML se encontra (codebase =”.”), em seguida são informados o nome da classe java (linha 10) e o nome do arquivo que deve ser carregado (linha 11).

Na linha 12 são passados os parâmetros de largura, altura e alinhamento da janela do applet.

Por fim, na linha 13 temos a tag param, que informa o nome do applet (name=”pid”) e o nome do arquivo XML (value=”config.xml”), já a linha 14 fecha a tag applet.

5o Passo – Visualizando a aplicação:

Abra o arquivo mapa.html e veja como ficou sua primeira aplicação Alov Map, se não aparecer a página mostrada abaixo, verifique se não há algum erro no seu código, ou se a máquina virtual Java não está instalada no seu computador. No próximo post veremos como construir alguns mapas temáticos e como habilitar o modo de consulta por atributos. Um Abraço!

Nenhum comentário: