Gráficos com WebGL Globe

Segundo a definição do site Chrome Experiments, o “WebGL Globe é uma plataforma aberta para a visualização de dados geográficos”. É possível copiar o código, adicionar dados e criar seu próprio WebGL Globe .

O site Chrome Experiments do Google possui muitas amostras de experiências feitos pela comunidade de desenvolvedores. Todos desenvolvidos em HTML5 e JavaScript usando tecnologias web abertas, como Canvas, WebGL, WebRTC e Portable Native Client. Alguns requerimentos são necessários como uma versão estável do Google Chrome sem flags, extensões ou plugins ou Chrome para Android e IOS.

Nossa experiência consiste em inserir dados do PIB das capitais do Brasil em 2011 obtidos do IBGE apenas como exemplo e fazer uma experiência usando uma imagem obtida do site Natural Earth III . Como o Chrome Experiments usa a biblioteca JavaScript Three.js usamos o exemplo do blog Thematic Mapping blog para alterar a imagem do globo como uma segunda opção.

Para a criação do gráfico, o Chrome Experiments usa um arquivo JSON – JavaScript Object Notation – para inserir os dados. Os dados foram inseridos em uma planilha para um planejamento melhor e os valores do PIB foram divididos por 1.000.000.000 para que os dados não extrapolassem os limites do gráfico e foram usados somente 3 casas decimais após a vírgula e manipulados somente como exemplo e ilustração para este exemplo. Os valores observados na planilha abaixo são: Cidade, latitude, longitude e magnitude.

Estes dados foram inseridos seguindo a seguinte ordem: latitude, longitude, magnitude sempre separados por uma vírgula conforme a imagem abaixo:

Depois de inseridos os dados podemos ver os nossos dados no arquivo .json e ver um lindo resultado no mapa do Chrome Experiments:

Para saber mais:

http://www.chromeexperiments.com/globe

http://threejs.org/

http://blog.thematicmapping.org/2013/09/creating-webgl-earth-with-threejs.html

Mapas em 3D

O WebGL Earth é um globo 3D digital para dispositivos móveis e web e é um projeto de código aberto – OpenSource Project.

O projeto permite visualizar mapas, imagens de satélite e fotografias aéreas em um globo visualizador. Com ele é possível visualizar nossos dados e mapas em qualquer navegador de qualquer plataforma , incluindo navegadores de dispositivos móveis. O projeto é sustentado com o apoio e colaboração da comunidade de desenvolvedores e é um software livre sob licença GPLv3 padrão conforme descrição da página do projeto .

Há diversas bases para os mapas como o mapa acima que tem uma base do MapQuest e do OpenStreetMap…

O WebGL Earth tem as seguintes características: Rotatividade e zoom do globo , inclinação da câmera , livre circulação no espaço; funciona sem um plugin nos navegadores modernos; exibe mapas existentes ( OpenStreetMap , Bing, … ) além de suportar mapas personalizados no sistema de coordenadas mercator e EPSG:3857 ou EPSG:900913.
Apesar de não necessitar de nenhum plugin para navegadores modernos é preciso que o navegador possua suporte para o HTML5 Canvas e extensão WebGL ( Firefox4 , Chrome 9 + , … dispositivos móveis iPhone / iPad / Android acima ). A linguagem de programação utilizada é o JavaScript com o compilador Closure Compiler no Sistema Operacional Windows. No Linux e no Mac é só rodar o comando make.
O código fonte está no repositório https://github.com/webglearth/webglearth conforme indicação da página do quickstart . Nesta página encontramos os passo necessários para configurarmos o ambiente de desenvolvimento do WebGL Earth.

No exemplo do WebGL Earth podemos visualizar a linda base do Bing Maps Aerial como a imagem abaixo…

Para saber mais:

http://www.webglearth.org/

https://github.com/webglearth/webglearth

http://data.webglearth.com/doc/

http://www.mapquest.com/

https://www.bingmapsportal.com

http://www.openstreetmap.org/#map=5/51.500/-0.100

Integração de Servidores de Mapas com o gvSIG

O gvSIG é um eficiente aplicativo para trabalhar, fazer apresentações e integrações com servidores de mapas, criações entre outras necessidades da área de geoprocessamento e está disponível para baixar em: http://www.gvsig.org/web. Por falar em integração entre serviços e servidores de mapas, o gvSIG possui uma interface amigável para esse tipo de serviço usando os serviços de mapas WMS – Web Map Service, WFS – Web Feature Service entre outros protocolos, descrito no artigo anterior, e esse será o assunto deste post.

Os mapas deste projeto serão obtidos de dois servidores de mapas: o i3geo e o GeoServer e finalizado com uma base completa do OpenLayers.

Nosso passo inicial será criar um serviço de mapa no i3geo…

Em seguida, no botão “Arquivo” que está no canto superior direito é preciso selecionar a opção “Converter em WMS e WMC” para obter o endereço – URL – do serviço WMS…

Surgirá uma nova janela com a URL do serviço WMS. Nesse caso é preciso copiar e guardar esse endereço para ser usado como pedido de serviço WMS no gvSIG…

No GeoServer o serviço “Goias” foi criado conforme definições de posts anteriores…

Apesar do serviço WMS estar disponível, o protocolo WFS será usado para integrar o mapa do estado de Goiás com o mapa do estado de Minas Gerais no formato GML para visualizar o serviço.

Para obter a URL do serviço uma boa dica é copiá-la da barra de endereços do navegador. Copiar e guardar a URL inteira para fazer o pedido de serviço WFS no gvSIG…

O serviço http://localhost é um serviço disponível apenas na máquina local. Para fazer com que o serviço de mapas esteja disponível para acessos externos, os servidores de mapas deverão estar configurados com uma URL válida para acessos externos. Esta configuração não será abordada neste post.

Com os dois serviços prontos e disponíveis o próximo passo será criar o nosso projeto no gvSIG. Com o Aplicativo aberto e uma nova “Vista” será criada. Em seguida, em “Adicionar capa” uma nova janela será aberta. Existem muitas opções disponíveis para integração no projeto:

A aba WMS será selecionada para inserir o serviço do i3geo; e no formulário “Servidor” a URL do i3geo que estava guardada será inserida. O próximo passo será clicar em conectar…

Na aba “Capas“, o serviço criado no i3geo que está disponível na lista “Selecionar Capas” será selecionado, e em seguida os botões “Adicionar” e “Seguinte” serão acionados…

Neste passo, deverão ser preenchidas as opções: “Selecionar formatos“, “Seleccionar SRS” e “Select text format for info by point“. As opções selecionadas foram respectivamente: “image/png“, “EPSG:4326” e “application/vnd.ogc.gml“…

O mapa estará disponível no nosso projeto.

O próximo passo será adicionar uma outra camada, o serviço WFS do GeoServer…

Na janela é preciso selecionar a aba WFS, e inserir a URL do serviço do GeoServer, finalmente os botões “Conectar” e “Seguinte” serão acionados…

Em seguida, na aba “Capas” o campo “Layer name” será selecionado…

O mapa WFS do GeoServer então estará disponível no nosso projeto junto com o mapa WMS do i3geo.

Finalmente o serviço WMS do OpenLayers será adicionado para completar o nosso projeto…

Para saber mais:

http://www.gvsig.org/web

http://openlayers.org/

http://www.softwarepublico.gov.br/ver-comunidade?community_id=1444332

http://br.geoserver.org/

http://www.opengeospatial.org/

http://andersonmedeiros.com/integracao-i3geo-com-gvsig/

http://edmarmoretti.blogspot.com.br/2012/10/uso-do-gvsig-para-publicar-mapas-com-o.html

Camadas de Mapas WMS e WFS no Quantum GIS

No site da OGC – Open Geospatial Consortium, um ®Web Map Service (WMS) é um padrão de interface OpenGIS. O objetivo deste é fornecer uma interface HTTP simples para solicitação de imagens de mapa de uma ou mais base de dados geoespaciais distribuídos; Em um pedido WMS, obtemos como resposta uma ou mais imagens de mapas nos formatos PNG, JPEG, TIFF etc. que podem ser exibidas em aplicativos web e visualizados em um navegador.

Segundo o Wikipédia, há uma definição de outro protocolo de serviço de mapas: o WFS – Web Feature Service que também “é um dos serviços especificados pela OGC – Open Geospatial Consortium para acesso e manipulação de dados geográficos na web. Este serviço permite o acesso a dados, independentemente do formato de armazenamento.”

No Quantum GIS, encontramos as ferramentas necessárias para a utilização dos protocolos de mapas (WMS, WFS, WCS etc.) e usaremos esta ferramenta e os protocolos de serviços de mapas WMS e WSF  neste post. O Quantum GIS possui dois aplicativos o Browser – cujas funcionalidades mostram claramente a importância do uso dos protocolos e o Desktop que podem usar os serviços de mapas para construção de camadas de apresentações.

Um pequeno exemplo: vamos supor que estamos fazendo uma apresentação de camadas de mapas em Porto Alegre no estado do Rio Grande do Sul e queremos que uma pessoa em Boa Vista – Roraima acesse e visualize a nossa apresentação. O que fazer? Existem servidores de mapas que disponibilizam os serviços de mapas, mas é preciso que a pessoa que vai disponibilizar o serviço conheça um pouco de programação para fazer uma apresentação na web ou então usar os serviços de mapas, como o WMS, em um servidor de mapas, e o destinatário acessar a apresentação com o Quantum GIS Browser sem precisar fazer nenhuma linha de programação.

O servidor de mapas GeoServer é o servidor que será usado neste exemplo.

Depois de criados os serviços de mapas do Brasil e do estado do Rio Grande do Sul, criaremos um grupo com esses dois serviços no servidor conforme a figura abaixo…

No navegador as camadas ficarão sobrepostas…

Para acessar este serviço no Quantum GIS Browser, abra o aplicativo e insira um nome de referência e a sua respectiva URL. E qual é a forma mais fácil de saber a URL do serviço? Uma boa dica é copiar o endereço do serviço que está na barra de endereço que neste exemplo está em: http://localhost:8080/geoserver/RioGrandedoSul/wms?service=WMS&version=1.1.0&request=GetMap&layers=BrasilRS&styles=&bbox=-73.9909428424323,-33.75086258672306,-34.79316793092651,5.272224949620011&width=512&height=509&srs=EPSG:4326&format=application/openlayers

e retirar a parte de informações do estilo. Ficará conforme a URL abaixo:

http://localhost:8080/geoserver/RioGrandedoSul/wms?service=WMS&version=1.1.0&request=GetMap&layers=BrasilRS

Neste ponto paramos um pouco para uma pequena observação: Eu como uma pessoa da área de Tecnologia da Informação,  acho natural o uso do localhost  porque este serviço está rodando na minha máquina e localmente apenas. Mas para que uma pessoa distante possa usar o serviço, é preciso que o servidor de mapas esteja com uma URL válida para acessos externos porque o localhost não faz e não deixa acessar. A configuração do servidor de mapas e a sua respectiva URL não fazem parte do escopo desta matéria.

Agora, com o endereço em mãos configure o Quantum GIS Browser para a visualização:

Depois de adicionado o serviço, o próximo passo será fazer a conexão com o serviço…

Finalmente conectado, os serviços WMS disponíveis poderão ser visualizados juntamente com os serviços de exemplo do GeoServer,

Ao clicar na aba Preview, o mapa poderá ser visualizado no aplicativo…

Em seguida, usaremos os serviços de mapas WMS e WFS  no Quantum GIS Desktop. Para isso usaremos a interface WFS usando o serviço GML do GeoServer…

O próximo passo agora será abrir o Quantum GIS Desktop e…

inserir um mapa com a interface WFS que será o mapa do Brasil.

Depois de clicar no botão para inserir o serviço, insira um nome e a sua respectiva URL no formulário da janela. A dica para saber a URL é a mesma da dica anterior só que neste caso é preciso usar todo o endereço sem dispensar nada:

http://localhost:8080/geoserver/RioGrandedoSul/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=RioGrandedoSul:Brasil&maxFeatures=50

Em seguida, clique em conectar e adicione o mapa no aplicativo…

O mapa poderá ser então visualizado.

O próximo passo será a inserção do mapa do estado do Rio Grande do Sul com a interface WMS. Para isso clique no botão para inserir o protocolo…

Adicione o nome e a sua respectiva URL conforme visto anteriormente no Quantum GIS Browser…

E adicione o mapa que poderá ser visualizado,

Para finalizar vamos adicionar uma camada de  serviço WMS do OpenLayers junto ao nosso mapa para  ficarmos com uma visualização mais completa.

Para saber mais:

http://www.opengeospatial.org/

http://www.qgis.org/en/site/

http://br.geoserver.org/

http://openlayers.org/

http://andersonmedeiros.com/consumir-wms-qgis/

Mapas Temáticos Usando Leaflet

Leaflet é uma biblioteca open-source na linguagem JavaScript para mapas interativos desenvolvido por Vladimir Agafonkin, conforme o post anterior https://geobrainstorms.wordpress.com/2014/02/06/mapas-vetoriais-com-leaflet/ postado pelo Marcelo Ito.

O Interactive Cloropleth Map é um mapa de calor que mostra as cores conforme a intensidade dos dados e como é baseado em JavaScript possibilita uma visualização dinâmica das cores. Este exemplo usará o exemplo contido no site para disponibilizar as cores do estado do Pará.

O primeiro passo será criar um arquivo GeoJSON das mesorregiões do estado no Quantum GIS …

Depois de salvar o arquivo no formato GeoJSON é preciso transformá-lo em um arquivo JavaScript com a extensão .js . Para isso é preciso abrir o arquivo GeoJSON em um editor de texto de sua preferência e salvar este arquivo com a extensão .js (JavaScriptFile) e neste exemplo o arquivo será chamado de para.js . Abra este arquivo e insira uma variável JavaScript conforme o exemplo marcado em azul na imagem abaixo:

Como este mapa é só um exemplo os nomes das variáveis não serão modificados para não alterarmos muito o código e por isso serão chamados conforme o original: statesData, density e name.

Em seguida, usando a página do site como exemplo mudamos o nome do arquivo apontando para o arquivo para.js que neste exemplo está na mesma pasta da página, as coordenadas geográficas (latitude e longitude) e o nível de zoom para 6 conforme a figura abaixo.

O próximo passo foi alterar as cores e as intensidades conforme a variável density do arquivo para.js …

Em seguida foi preciso alterar os rótulos da legenda…

E traduzir o quadro de informações…

O resultado foi um belo, prático leve e funcional exemplo do Interactive Cloropleth Maps do estado do Pará com o Leaflet…

Para saber mais:

http://leafletjs.com/

http://leafletjs.com/examples/choropleth.html#interactive-choropleth-map

http://cloudmade.com/

http://www.openstreetmap.org

KML no MapQuest

Keyhole Map Language – KML é uma linguagem baseada em XML , conforme descrito em post anteriores, e o MapQuest é uma linda plataforma de mapas com muitos recursos para desenvolvimentos de aplicativos. O MapQuest possui frameworks em JavaScript, Flash entre outros e nos formatos abertos (Open JavaScript API , Open Flash Maps API e Open Mobile Flash Maps API ) e licenciados também. Para começar a desenvolver é preciso inscrever-se no site e obter uma chave de licença para o seu aplicativo.

O exemplo deste post, feito apenas para um pequeno teste, mostrará pontos visualizados com ícones obtidos de um servidor próprio ou de uma URL, que mostrará informações de dados (fictícios) de determinados pontos de um arquivo shapefile das rodovias federais do estado do Rio de Janeiro obtido do site do DNIT e convertido em um arquivo .kml, conforme a Bruna explica muito bem no seu post, para inserir no mapa nos formatos “sat” e “osm” do MapQuest.

Para facilitar o arquivo .kml será disponibilizado em um servidor local (http://localhost) e será chamado conforme a figura abaixo:

O nível de aproximação (zoom) está definido para 9 e agora é preciso centralizar o mapa inserindo as coordenadas geográficas (latitude e longitude)…

Para inserir os ícones é preciso definir o local com as devidas coordenadas geográficas, o tipo de ícone, a URL do ícone, o tamanho, o título e o conteúdo a ser apresentado no ícone …

O corpo do balão de informações do MapQuest (setInfoContentHTML) mostrou ser muito flexível e eficiente por aceitar as tags html possibilitando assim a inserção de imagem, vídeo, tabelas entre outras tags html conforme os exemplos das imagens que seguirão abaixo.

Para adicionar um ícone no mapa é só seguir comando abaixo:

E visualizar o mapa no formato “osm” com uma tabela (table) html…

No formato “osm” com um exemplo de vídeo no balão de informações para cada ícone no formato .mp4 de teste do player do Quick Time…

E no formato “sat” com uma imagem .jpg…

Este foi um exemplo da API Open JavaScript do MapQuest. No site podemos encontrar exemplos desta e de outras APIs .

Para saber mais:

http://developer.mapquest.com/

http://developer.mapquest.com/web/documentation/open-sdk/javascript/v7.0

http://developer.mapquest.com/web/documentation/open-sdk/javascript/v7.0/kml-georss

Mapa GeoJSON no Mapbox

Mapbox é uma linda plataforma para disponibilização de mapas customizados na web, desktop e dispositivos móveis baseados no OpenStreetMap e outros dados abertos. Possui biblioteca para a linguagem de programação JavaScript e Toolkits para IOS e OSX e API Rest para web services.

Usando o exemplo do Mapbox veremos a facilidade e praticidade de inserção de marcadores, imagens, linhas e também polígonos como o exemplo deste polígono vetorial no formato GeoJSON. Do código disponível no site, que insere um marcador, neste exemplo, feito apenas para um pequeno teste e uma simples documentação, apenas duas pequenas alterações foram feitas: a primeira alteração foi centralizar o mapa conforme as coordenadas geográficas (latitude e longitude) do estado da Paraíba e o nível de aproximação (zoom) para 8…

e alterar o local em que está o nosso arquivo “paraiba.geojson” …

Para fazer o arquivo GeoJSON do estado da Paraíba a Fernanda explica muito bem no post “Desenho de um Polígono no OpenLayers” . No Quantum GIS é só abrir o arquivo shape e salvar no formato GeoJSON.

Para mostrar dados em um balão de informações é só acrescentar os seguintes dados no arquivo GeoJSON conforme a marcação na imagem abaixo:

O resultado é um lindo exemplo de mapa que pode ser usado em desktops e dispositivos móveis. Para desenvolver os mapas é preciso fazer a inscrição no site que possui muitos outros exemplos.

Para saber mais:

https://www.mapbox.com

https://www.mapbox.com/developers/

https://www.mapbox.com/mapbox.js/example/v1.0.0/geojson-marker-from-url/

Mapa com Modest Maps

Modest Maps segundo a definição do site é uma pequena, extensível biblioteca livre para desenvolvedores e designers que pretendem usar mapas interativos em seus projetos. A biblioteca na linguagem JavaScript (Modest Maps JS) é compatível com o Firefox, Chrome, Opera, iOS, Android e Internet Explorer 7 ao 9. No site encontramos também as extensões, exemplos e uma boa documentação para começar a desenvolver e outras implementações para linguagens de programação como Python, Action Script3 entre outras.

Para fazer este exemplos juntamos dois exemplos do site: o Zoom Slider e o Overlay Popup.

O primeiro passo foi copiar o arquivo JavaScript follower-canvas.js do Overlay Popup para a pasta do Zoom Slider para que o balão de informações possa mostrar um texto e em seguida abrir o arquivo index.html do Zoom Slider em um editor de texto e inserir o arquivo .js copiado …

Em seguida é preciso abrir o arquivo app.js em um editor de texto e centralizar o mapa baseado no OpenStreetMap no local desejado inserindo também o nível de aproximação (zoom) do local…

e inserir a variável f que irá mostrar o balão de informações com o texto quando o Slider for ativado…

Finalmente quando o Slider de zoom for ativado o balão de informações aparecerá no mapa.

Para saber mais:

 http://modestmaps.com/

 http://modestmaps.com/examples/

 http://www.openstreetmap.org

Mapas Vetoriais com Leaflet

Leaflet é uma biblioteca open-source na linguagem JavaScript para mapas interativos desenvolvido por Vladimir Agafonkin. Funciona com eficiência na maioria das plataformas móveis e desktop e destaca-se pela sua simplicidade, performance e usabilidade e as vantagens do HTML5 e CSS3 dos navegadores modernos. Além de ser fácil de usar tem uma excelente documentação no site juntamente com códigos para ajudar no desenvolvimento. Os mapas são muito agradáveis e bonitos baseados no OpenStreetMap e Cloudmade.

Este exemplo, modificado apenas para um teste, segue o Quick Start Guide do Leaflet que insere um marcador, um círculo vetorial e um polígono vetorial. Como um mapa é um polígono vetorial foi possível criar uma camada de mapa com a finalidade de mostrar informações para diversas finalidades. O primeiro passo foi obter as coordenadas geográficas do mapa vetorial com o Quantum GIS abrindo o arquivo shape desejado e salvando-o no formato .kml …

Com isso é possível obter as coordenadas geográficas necessárias para a inserção como um polígono no Leaflet…

Para facilitar e obter as coordenadas no formato texto usamos os passos do post anterior https://geobrainstorms.wordpress.com/2013/05/23/mapa-de-calor-com-o-google-maps/ .

Em seguida modificamos as coordenadas geográficas (latitude e longitude) de visualização e o nível de aproximação (zoom) adequado…

O próximo passo foi inserir todas as coordenadas geográficas obtidas do mapa vetorial e inserir no código no lugar do polígono…

As cores do mapa e da borda, a largura da borda e as informações do balão de informação foram alteradas conforme a imagem abaixo:

O resultado final é um belo e funcional mapa de calor com informações,

Para saber mais:

http://leafletjs.com/

 http://leafletjs.com/examples/quick-start.html

 http://cloudmade.com/

 http://www.openstreetmap.org

Sobreposição de Camadas de Mapas com jQuery

JQVMap é um plugin em jQuery para mapas vetoriais Scalable Vector Graphics (SVG) .

Esta matéria é uma continuação do post anterior “Mapa SVG com JQVMap – Passo a Passo” e irá demonstrar um caminho de como fazer uma sobreposição dos mapas vetoriais SVG.

O primeiro passo é inserir a camada de mapa da América do Sul no arquivo JavaScript correspondente ao mapa SVG que neste exemplo foi alterado para este exemplo e está localizado em: src=”../jqvmap/maps/jquery.vmap.south-america.js” …

Em seguida o mapa do Brasil será inserido sobre o mapa da América do Sul,

E finalmente o mapa das mesorregiões do estado de Goiás será inserido sobre os dois mapas,

O JQVMap é um projeto Open Source com diversas possibilidades de criação de mapas SVG – Scalable Vector Maps.

Para saber mais:

http://jqvmap.com/