GeoBrainStorms

Gráficos com WebGL Globe

Postado por Marcelo Ito em junho 9, 2014
Publicado em: Mapas. Marcado: Google Chrome, WebGL. 2 Comentários

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 .

terra7

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.

terra4

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.

terra5

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

terra6B

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

terra3

Para saber mais:

http://www.chromeexperiments.com/globe

http://threejs.org/

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

Anúncios

Mapas em 3D

Postado por Marcelo Ito em maio 2, 2014
Publicado em: Mapas. Marcado: código aberto, globo 3D, linguagem de programação, Software Livre. Deixe um comentário

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 .

3dbr

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

3dbh

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…

3dsp

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

Postado por Marcelo Ito em abril 18, 2014
Publicado em: Mapas. Marcado: GvSIG, OpenLayers, WFS. Deixe um comentário

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.

ProtocoloMapa (35)

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…

ProtocoloMapa

ProtocoloMapa (2)

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…

ProtocoloMapa (7)

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…

ProtocoloMapa (8)

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

ProtocoloMapa (3)

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.

geoprote

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…

geoprotg

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:

ProtocoloMapa (9)

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…

ProtocoloMapa (10)

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…

ProtocoloMapa (12)

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“…

ProtocoloMapa (13)

O mapa estará disponível no nosso projeto.

ProtocoloMapa (14)

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

ProtocoloMapa (15)

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…

ProtocoloMapa (16)

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

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

ProtocoloMapa (27)

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

ProtocoloMapa (34)

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

Postado por Marcelo Ito em abril 18, 2014
Publicado em: Mapas. Marcado: o Quantum GIS, WFS. 1 comentário

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

ProtocoloMapa (56)

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…

geoprot (1)

No navegador as camadas ficarão sobrepostas…

geoprot

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

geoprotb

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:

ProtocoloMapa (36)

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

ProtocoloMapa (37)

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

ProtocoloMapa (38)

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

ProtocoloMapa (41)

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…

geoprotd

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

ProtocoloMapa (44)

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

ProtocoloMapa (45)

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

ProtocoloMapa (47)

O mapa poderá ser então visualizado.

ProtocoloMapa (48)

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…

ProtocoloMapa (49)

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

ProtocoloMapa (50)

E adicione o mapa que poderá ser visualizado,

ProtocoloMapa (51)

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

ProtocoloMapa (55)

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

Postado por andreleonel7 em março 31, 2014
Publicado em: Mapas. 1 comentário

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.

geog0005

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 …

geog0004

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:

geog0011

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.

geog0007

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

geog0008

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

geog0010

E traduzir o quadro de informações…

geog0124

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

geog0006

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

Postado por Marcelo Ito em fevereiro 12, 2014
Publicado em: Mapas. 1 comentário

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.

geog0004

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:

geor1

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)…

geog0005

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 …

geog0007

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:

geog0008

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

gmap0023

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…

gmap0019

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

gmap0024

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

Postado por Marcelo Ito em fevereiro 6, 2014
Publicado em: Mapas. 1 comentário

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.

geog0002

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…

geog0122

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

geog0123

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.

geog0014

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:

geog0008

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.

geog0003

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

Postado por Marcelo Ito em fevereiro 6, 2014
Publicado em: Mapas. Deixe um comentário

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.

geog0004

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 …

geog0005

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…

geog0006

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

geog0007

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

geog0002

Para saber mais:

 http://modestmaps.com/

 http://modestmaps.com/examples/

 http://www.openstreetmap.org

Mapas Vetoriais com Leaflet

Postado por Marcelo Ito em fevereiro 6, 2014
Publicado em: Mapas. 1 comentário

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.

geog0004

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 …

geog0010

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

geog0011

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…

geog0005

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…

geog0006

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:

geog0007

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

geog0003

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

Postado por Marcelo Ito em dezembro 22, 2013
Publicado em: Mapas. Marcado: scalable vector graphics, SVG. 4 Comentários

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.

jq1

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” …

jq7

jq2

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

jq8

jq4

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

jq9

jq15c

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

Para saber mais:

http://jqvmap.com/

Navegação de Posts

← Entradas Mais Antigas
Entradas mais Recentes →
  • Busca no blog

  • Autores

    • andreleonel7
      • Mapas Temáticos Usando Leaflet
    • geosenso.com
      • Site Geosenso – Geotecnologias
    • Weiller de Ávila
      • Delimitação de Áreas de Preservação Permanente – Parte 1
    • Bruna Sulino Vasconcelos
      • Destacando Mapas Utilizando Cascading Style Sheets (CSS)
    • Fernanda Martins
      • Desenho de um Polígono GeoJSON no OpenLayers
    • gabigeo
      • Mapa SVG com JQVMAP – Passo a Passo
    • Marcelo Ito
      • Delimitação de um Mapa com Swift
    • Murilo Cardoso
      • Livro sobre servidores de mapas usando tecnologias livres gratuito
    • Victor Alves
      • Importando Pontos 2D ou Amostras no Spring
  • Arquivos

    • julho 2017
    • abril 2017
    • março 2017
    • abril 2016
    • fevereiro 2016
    • março 2015
    • julho 2014
    • junho 2014
    • maio 2014
    • abril 2014
    • março 2014
    • fevereiro 2014
    • dezembro 2013
    • novembro 2013
    • outubro 2013
    • julho 2013
    • maio 2013
    • abril 2013
    • março 2013
    • fevereiro 2013
    • dezembro 2012
    • novembro 2012
    • outubro 2012
    • setembro 2012
    • agosto 2012
    • julho 2012
    • maio 2012
    • fevereiro 2012
    • janeiro 2012
    • novembro 2011
    • outubro 2011
    • setembro 2011
    • agosto 2011
    • julho 2011
    • junho 2011
    • abril 2011
    • março 2011
    • fevereiro 2011
    • janeiro 2011
  • Curta Geobrainstorms

    Curta Geobrainstorms
  • ArcGIS Base de Dados Climatologia Especial Eventos Fazendo Mapas/Como Fazer Mapas? (Layouts) Geo Dicas Geo Podcast Geo Programação Geotecnologia para Professores GvSIG Iniciando o Desenvolvimento em Geoprocessamento Mac OS X Mapas Quantum GIS Sensoriamento Remoto SIG online Sites Software Livre Spring uDIG
  • Blogs que sigo

    • mordredtitan
    • GeoSenso
    • gabigeo
    • brunasvasconcelos
    • Planet Tutorial
    • Murilo Cardoso
    • QGIS Brasil
    • Anderson Medeiros
    • Anderson Medeiros
    • Geo Independência
    • Sadeck - Geotecnologias
    • GeoBrainStorms
  • Abrir um vetor Amazônia legal ArcGIS Auto Cad AutoCad Banco de Dados business intelligence Clima Clima Koppen Climatologia Clip de vetores Cobertura Vegetal Copiar shape Dados ambientais Design de mapas Editando tabela Editar Tabela Editor Ensino ensino de geografia Fazendo Mapas Flickr Geografia Geoprocessamento no Mac OS X GIS Goes google maps GvSIG I3 Geo ibama IBGE Inserir Grid Inserir Legenda Inserir Texto Inserir Título Legenda linguagem de programação Mac OS X Mapa Mapa-Mundí Atualizado Mapa-Mundí de Biomas Mapa de Municípios do Mato Grosso do Sul Mapa Mundi Mapas Mapas Antigos Mapas de Municípios do Mato Grosso do Sul Mapas temáticos mapserver Meteorologia Meteosat Mudanças Climáticas OpenLayers o quantum postgis Precipitação qgis Quantum GIS região metropolitana de goiânia Satélite scalable vector graphics Sensoriamento Remoto servidor web apache Shape SIG SIG online Site Snow Leopard Software Livre SVG Temperatura uDIG vector maps Vetor Vetorização WFS
  • Previsão do Tempo

    Clique na imagem para mais detalhes
    Clique na imagem para mais detalhes
    Clique na imagem para mais detalhes
  • Anúncios
Crie um website ou blog gratuito no WordPress.com.
mordredtitan

4 out of 5 dentists recommend this WordPress.com site

GeoSenso

gabigeo

Just another WordPress.com site

brunasvasconcelos

Geoprocessamento e Biologia

Planet Tutorial

Tutoriais e dicas sobre temas diversos

Murilo Cardoso

Geografia, Tecnologia e Ensino

QGIS Brasil

Anderson Medeiros

Tudo sobre Geoprocessamento

Anderson Medeiros

Geo Independência

nossa essência é a liberdade...

Sadeck - Geotecnologias

Geotecnologias, isso em primeiro lugar, serve para planejar.

GeoBrainStorms

Cancelar