EXPLORANDO O HTML5 PARA VISUALIZAC A O DE DADOS GEOGRA FICOS Marcel Mendonça Grilo1, Jéferson José Ribeiro2,, Sérgio Souza Costa3 1 Cientista da Computação, UNIFEI, Itajubá-MG, marcelgrilo86@gmail.com Cientista da Computação, UNIFEI, Itajubá-MG, jefersonjribeiro@gmail.com 3 Doutor 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)
A invenção da Web - 1991 http://info.cern.ch/hypertext/www/theproject.html
Informação Consumidor Provedor Requisição Resposta Cliente Servidor
Mapas, um importante meio de apresentar informações espaciais. Informações não textuais.
Servidores de mapas Primeiro servidor de mapas 1993
Servidores de mapas - wms GetMap Resposta Cliente Servidor 1. Exibir tiles Toda interação com o usuário gera uma requisição ao servidor, ex: zoom, mover, consulta a atributos. 1. 2. 3. 4. 5. Preparar dados Definir simbologias Gerar e renderizar tiles Fazer caches de tiles Publicar tile
Mudança de paradigma A Web não é apenas um meio de transmissão de informações. Aplicações ricas na internet.
C M ia es ic D ev ed tim ul s tic an m Se ity iv ct ne on rfo Pe & an ce 3D ag e rm ic s or St ph & ra G e in ffl O Whatwg Uma nova especificação, paras as novas necessidades.
Dados vetoriais Inline SVG Canvas
Inline SVG SVG (Scalabe Vector Graphics) integrado ao documento HTML. Um bairro de Recife.
Canvas Uma região retangular da tela, que pode ser manipulada por uma API JavaScript. HTML Canvas <canvas id="c" width="500" height="375"></canvas> JavaScript var b_canvas = document. getelementbyid("c"); var context = b_canvas.getcontext ("2d"); context.fillrect(50, 25, 150, 100); Cores Desenho de imagens Estilos Estilos de linha Sombras Caminhos Manipulação de pixels Texto Composição Transformações Retângulos
Abstraindo a visualização Uma biblioteca que abstraia a renderização dados geográficos, lidando com diferentes formatos. Inline SVG Aplicação Biblioteca 1. 2. 3. GML KML GeoJSON OSM-XML Leaflet OpenLayer Cartagen Canvas
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)
Leaflet - Explorando Integrando diferentes camadas, de diferentes fontes. Fonte: GeoSON - Recife Dados Micro-regiões Ciclovia Praças e áreas verdes 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. 2. 3. 4. Localmente Portal de dados abertos governamentais OpenStreetMap (API) Servidores de dados vetoriais
Portal de dados abertos governamentais http://dados.recife.pe.gov.br/dataset Dados abertos governamentais são dados produzidos pelo governo e colocados a disposic a o das pessoas de forma a tornar possı vel na o apenas sua leitura e acompanhamento, mas tambe m sua reutilizac a o em novos projetos, sı tios e aplicativos; seu cruzamento com outros dados de diferentes fontes (W3C, 2011) Micro-regiões Ciclovia Praças e áreas verdes
OpenStreetMap (API) OSM (API) + Bing Maps http://api.openstreetmap.org/api/0.6/map?bbox=-43.7161000,-20.5347000, -43.6822000,-20.5061000
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>.