O documento discute a exploração do HTML5 para visualização de dados geográficos. Apresenta como bibliotecas JavaScript como Leaflet e OpenLayers podem ser usadas para integrar e visualizar dados vetoriais de diferentes fontes, incluindo arquivos GeoJSON, bancos de dados governamentais e a API do OpenStreetMap. Conclui destacando o potencial do HTML5 para novas aplicações geográficas que integram dados abertos.

1. EXPLORANDO O HTML5 PARA
VISUALIZAÇ ÃO DE DADOS
GEOGRÁFICOS
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.com
3Doutor em Computação Aplicada, UFMA, São Luís-MA, prof.sergio.costa@gmail.com

2. Sérgio Souza Costa
Professor - UFMA
Doutor em Computação Aplicada (INPE)

3. A “invenção da Web” - 1991
http://info.cern.ch/hypertext/WWW/TheProject.html

4. Consumidor Provedor
Requisição
Resposta
Cliente
Servidor
Informação

5. Mapas, um importante meio de apresentar
informações espaciais.
Informações
não textuais.

6. Servidores de mapas
Primeiro servidor
de mapas 1993

7. Servidores de mapas - wms
GetMap
Cliente
Servidor
Resposta
1. Preparar dados
2. Definir simbologias
3. Gerar e renderizar tiles
4. Fazer caches de tiles
5. Publicar tile
1. Exibir tiles
Toda interação com o
usuário gera uma
requisição ao
servidor, ex: zoom,
mover , consulta a
atributos.

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

9. Whatwg
Uma nova especificação,
paras as novas necessidades.
Multimedia
Offline & Storage
Graphics & 3D
Performance
Devices
Semantics
Connectivity

10. Dados vetoriais
● Inline SVG
● Canvas

11. Inline SVG
SVG (Scalabe Vector Graphics) integrado ao
documento HTML.
Um bairro de Recife.

12. Canvas
Uma região retangular da tela, que pode ser manipulada
por uma API JavaScript.
HTML
<canvas id="c" width="500" height="375"></canvas>
var b_canvas = document.
getElementById("c");
var context = b_canvas.getContext
("2d");
context.fillRect(50, 25, 150, 100);
Canvas
JavaScript
Cores Estilos Sombras Caminhos Texto
Desenho de
Estilos de Manipulação
Composição
imagens
linha
de pixels
Retângulos
Transformações

13. Abstraindo a visualização
Uma biblioteca que abstraia a renderização dados
geográficos, lidando com diferentes formatos.
Inline SVG
Canvas
Aplicação Biblioteca
GML
KML
GeoJSON
OSM-XML
1. Leaflet
2. OpenLayer
3. Cartagen

14. 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)

15. Leaflet - Explorando Usando requisições assíncronas
Integrando diferentes camadas, de
diferentes fontes.
Fonte: GeoSON - Recife Dados
Micro-regiões
Ciclovia
Praças e áreas verdes
(AJAX) para retornar os dados
geográficos que coincidem com uma
região selecionada.

16. 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)

17. OpenLayer 3 - Explorando
BingMaps + Recife Dados (GeoJSON)

18. Fonte de dados vetoriais
1. Localmente
2. Portal de dados abertos governamentais
3. OpenStreetMap (API)
4. Servidores de dados vetoriais

19. Portal de dados abertos
governamentais
Micro-regiões
Ciclovia
Praças e áreas verdes
http://dados.recife.pe.gov.br/dataset
Dados abertos governamentais são
“dados produzidos pelo governo e
colocados à disposição das
pessoas de forma a tornar possı́vel
não apenas sua leitura e
acompanhamento, mas também
sua reutilização em novos projetos,
sı́tios e aplicativos; seu cruzamento
com outros dados de diferentes
fontes” (W3C, 2011)

20. http://api.openstreetmap.org/api/0.6/map?bbox=-43.7161000,-20.5347000,
-43.6822000,-20.5061000
OSM (API) +
Bing Maps
OpenStreetMap (API)

21. OpenStreetMap (API)
Formato Tamanho
OSM (XML) 4,1 MB
GeoJSON 6,3 MB
GeoJSON
Minify
1,9 MB

22. OpenStreetMap (API)
Visualização prejudicada em níveis de zoom
baixos, pelo grande volume de dados.

23. Servidores de dados vetoriais
Vector tiling
Multiescala e
generalização
Fonte: GAFFURI (2012)

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

25. 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.

26. 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>.