EXPLORANDO O HTML5 PARA VISUALIZACAO DE DADOS

GEOGRAFICOS

Marcel Mendonça Grilo1, Jéferson José Ribeiro2,, Sérgio Souza Costa3

1Cientista da Computação, UNIFEI, Itajubá-MG, marcelgrilo86@gmail.com

2Cientista da Computação, UNIFEI, Itajubá-MG, jefersonjribeiro@gmail.com3Doutor em Computação Aplicada, UFMA, São Luís-MA, prof.sergio.costa@gmail.com

Sérgio Souza CostaProfessor - UFMADoutor em Computação Aplicada (INPE)

http://info.cern.ch/hypertext/WWW/TheProject.html

A “invenção da Web” - 1991

Requisição

Resposta

ClienteServidor

Consumidor ProvedorInformação

Mapas, um importante meio de apresentar informações espaciais.

Informações não textuais.

Servidores de mapas

Primeiro servidor de mapas 1993

GetMap

ClienteServidor

Resposta

Servidores de mapas - wms

1. Preparar dados2. Definir simbologias3. Gerar e renderizar tiles4. Fazer caches de tiles5. Publicar tile

1. Exibir tiles

Toda interação com o usuário gera uma requisição ao servidor, ex: zoom, mover , consulta a atributos.

A Web não é apenas um meio de transmissão de informações. Aplicações ricas na internet.

Mudança de paradigma

Multim

edia

Offline

& S

torag

e

Graphic

s & 3D

Perform

ance

Device

s

Seman

tics

Conne

ctivit

y

Uma nova especificação, paras as novas necessidades.

Whatwg

Dados vetoriais

● Inline SVG● Canvas

Inline SVG

SVG (Scalabe Vector Graphics) integrado ao documento HTML.

Um bairro de Recife.

var b_canvas = document.getElementById("c");var context = b_canvas.getContext("2d");context.fillRect(50, 25, 150, 100);

Canvas

JavaScript

Canvas Uma região retangular da tela, que pode ser manipulada por uma API JavaScript.

Cores Estilos Sombras Caminhos Texto

Desenho de imagens

Manipulação de pixels

ComposiçãoEstilos de linha

Retângulos

Transformações

<canvas id="c" width="500" height="375"></canvas>

HTML

Inline SVG

Canvas

BibliotecaAplicação

GMLKMLGeoJSONOSM-XML

Uma biblioteca que abstraia a renderização dados geográficos, lidando com diferentes formatos.

1. Leaflet2. OpenLayer3. Cartagen

Abstraindo a visualização

Leaflet (http://leafletjs.com/)

● Biblioteca JavaScript, moderna (JQuery like) e leve (125kb).

● Desenvolvida e mantida pela Cloudmade, e com contribuições de diversos programadores.

● Muito bem documentada, com guias, tutoriais e exemplos.● Suporte a SVG, canvas e VML (IE antigos).● Extendido através de plugins● Tile layers (OSM, WMS)● Vector layers (GeoJSON)● Projeção (latlong,Spherical Mercator)

Micro-regiõesCicloviaPraças e áreas verdes

Integrando diferentes camadas, de diferentes fontes.

Fonte: GeoSON - Recife Dados

Leaflet - Explorando Usando requisições assíncronas (AJAX) para retornar os dados geográficos que coincidem com uma região selecionada.

OpenLayer 3

● Biblioteca JavaScript moderna (versão 3 redesenhada).● Muito bem documentada, com guias, tutoriais e exemplos.● Suporte a SVG, canvas e VML (IE antigos).● Muitos recursos.● Tile layers (OSM, Bing, MapQuest, WMS)● Vector layers (GeoJSON, KML, GML, TopoJSON)● Projeção (latlong,Spherical Mercator)

OpenLayer 3 - Explorando

BingMaps + Recife Dados (GeoJSON)

Fonte de dados vetoriais

1. Localmente2. Portal de dados abertos governamentais3. OpenStreetMap (API)4. Servidores de dados vetoriais

Micro-regiõesCicloviaPraças e áreas verdes

http://dados.recife.pe.gov.br/dataset

Portal de dados abertos governamentais

Dados abertos governamentais são “dados produzidos pelo governo e colocados a disposicao das pessoas de forma a tornar possıvel nao apenas sua leitura e acompanhamento, mas tambem sua reutilizacao em novos projetos, sıtios e aplicativos; seu cruzamento com outros dados de diferentes fontes” (W3C, 2011)

http://api.openstreetmap.org/api/0.6/map?bbox=-43.7161000,-20.5347000,-43.6822000,-20.5061000

OSM (API) + Bing Maps

OpenStreetMap (API)

OpenStreetMap (API)

Formato Tamanho

OSM (XML) 4,1 MB

GeoJSON 6,3 MB

GeoJSON Minify

1,9 MB

OpenStreetMap (API)

Visualização prejudicada em níveis de zoom baixos, pelo grande volume de dados.

Servidores de dados vetoriais

Vector tiling

Multiescala e generalização

Fonte: GAFFURI (2012)

Servidores de dados vetoriais

Existem alguns protótipos, como o TileStache (Python) e OpenCarto (Java). Neste trabalho não foram explorados.

OpenCarto

Considerações finais

● Os servidores de mapas evoluíram muito nos últimos 20 anos, tornando mais fácil a experiência do usuário.

● O HTML5 traz novas oportunidades e desafios na construção de outros tipos de aplicativos○ Não apenas prover informações espaciais.

● O uso de dados vetoriais, não pode ser visto como substituto aos servidores de mapas atuais, mas sim a base para uma nova geração de aplicativos geográficos na web.

● Existem ainda outros recursos, como GeoLocation, WebSocket, Offline Storage.

● Visualização de dados vetoriais se mostra um importante instrumento de apoio a divulgação e integração de dados abertos governamentais.

Referências

GAFFURI, J. Toward Web Mapping with Vector Data. In: XIAO, N.; KWAN, M.-P.; GOODCHILD, M.; SHEKHAR, S. (Eds.). Geographic Information Science SE - 7. Lecture Notes in Computer Science. [S.l.]: Springer Berlin Heidelberg, 2012. v. 7478p. 87–101.

W3C. Manual dos dados abertos: governo. Disponıvel em: <http://www.w3c.br/pub/Materiais/PublicacoesW3C/Manual_Dados_Abertos_WEB.pd f>.