Os sistemas de informação geográfica (SIG) web-based são, hoje em dia, cada vez mais uma solução a ser equacionada por diversos motivos.
A velocidade de internet disponível atualmente já não é um problema para os tempos de resposta aos pedidos cliente-servidor. Por isso mesmo podemos ter uma velocidade confortável para que o acesso à aplicação e aos dados no servidor já não seja um problema. Não existe a necessidade de instalação do programa no computador. A aplicação é acedida através de um browser de internet sem necessidade de nenhuma configuração especial.
É independente do sistema operativo. Seja qual for o sistema (Windows, Linux, XOS, etc.) basta ter um browser instalado na máquina. E a obtenção de dados e serviços externos é maior, com a facilidade na recepção dos mesmos via webservices ou APIs.
A juntar a estas vantagens, temos tecnologias open source acessíveis com alguma facilidade. Alguns casos são o dinamismo do HTM5, o CSS3, o jQuery e por último a API do Google Maps (entre outras, como o Bing) que auxiliam na criação de um bom SIG.
Um exemplo de um web-SIG que utiliza muitas destas tecnologias é o GeObserver, um sistema que alberga uma vasta informação geográfica de uma área protegida em Portugal, a Serra da Estrela, e que se serve desta informação para gerar análises, prevenções e informações necessárias para estudos e investigações sobre aquela área.
Uma das vantagens deste SIG é a facilidade de obtenção de dados, a velocidade no tratamento e visualização dos mesmos.
Desta forma vou tentar transmitir alguma experiência nesta área para a criação de um web-sig com recurso às tecnologias descritas e disponíveis a qualquer um. Não vou falar no modo de instalação de servidores e bases de dados, de arquiteturas de aplicações (ou frameworks) nem como deverá estar distribuída a aplicação; isso dependerá do que se pretende fazer e no Portal iMasters têm vários artigos falando disso. Penso que a melhor arquitetura, e é a que eu utilizo, é a MVC; no entanto haverá outras formas de fazer e do agrado de cada um.
Para começar, vamos precisar ter uma instalação wamp (windows + apache + mysql + php) ou xamp (linux + apache + mysql + php) feita na nossa máquina.
Vou iniciar falando na API do Google Maps, versão 3, que será utilizada. Deverá antes de mais criar uma API Key no Google APIs Console para poder utilizar o serviço.
Agora iremos criar um exemplo simples. Pode ser repetitivo para muitos, mas que será fundamental para depois entender o resto.
Nos artigos seguintes iremos criar classes em PHP que facilitarão a criação de mapas com múltiplos e diferenciados dados. Vamos criar uma página com o nome mapa.php com o seguinte código:
<!DOCTYPE html>
<html>
<head>
<title>Mapa</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[Sua API_KEY]&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-11.480025,-46.669922),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Explicando:
Declaração do HTML5 para a aplicação:
<!DOCTYPE html>
Div onde será mostrado o mapa
Div map-canvas
Chamada à API da Google:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[Sua API_KEY]&sensor=false">
Função initialize() (JavaScript)
Esta função será executada logo que a página seja carregada através da chamada em:
google.maps.event.addDomListener(window, 'load', <b>initialize</b>);
Nesta função temos uma variável (array) “mapOptions” que guarda as características do mapa, a posição central na tela (center), o zoom e o tipo de mapa (mapTypeId) que poderá ser também HYBRID, SATELLITE ou TERRAIN.
Logo a seguir, o mapa é inicializado com a variável mapOptions, que lhe dará os parâmetros de visualização:
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
O mapa deverá aparecer desta forma:
Para colocar uma marcação simples no mapa basta acrescentar o seguinte código, dentro da função initializa:
var latlng = new google.maps.LatLng(-11.480025,-46.669922);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Olá Brasil"
});
marker.setMap(map);
Neste caso, a marcação é colocada no mesmo ponto que definimos como centro do mapa, na variável “latlng”.
Este é um artigo simples, mas fundamental para perceber os que virão a seguir.
Nos próximos artigos irei explicar a criação de polígonos (complexos e linhas) com recurso a classes de PHP e acesso a base de dados.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?