Mapa com os estados brasileiros arrastáveis para comparação de áreas, e como fazer o mesmo para seu país ou região usando o Leaflet.js

Caros pesquisadores e entusiastas de SIG de código-livre,

Bem-vindos ao meu blog!

Gosto de começar com um aviso - posso ser uma pesquisadora desta área, mas isso não significa que tudo que eu faço ou escrevo aqui funcionará para você, no seu computador e com suas configurações e versões de pacotes. Me eximo de qualquer responsabilidade se você perder dados ou estragar sua instalação. Também não autorizo cópias do meu conteúdo.

Na semana passada, explorei um pouco como fazer um mapa Leaflet.js usando o plugin qgis2web no QGIS e alterando o código após a criação do mapa. Enquanto explorava os vários plug-ins disponíveis para o Leaflet.js, o plug-in Leaflet Truesize me chamou a atenção. Olha, você deve ter visto aqueles mapas nos quais dá para arrastar os países do mundo para poder comparar seus tamanhos e formas, especialmente porque as áreas das regiões fora do trópico são deformadas nas projeções cartográficas mais comuns. O plugin Leaflet Truesize é inspirado em um site que tem um mapa com países arrastáveis, chamado The True Size of….

No entanto, estes mapas geralmente têm opções limitadas de polígonos georreferenciados arrastáveis. A boa notícia é que usando o plugin Leaflet Truesize, você pode adicionar polígonos arrastáveis personalizados ao mapa.

Um mapa que pensei quase imediatamente em fazer é a representação dos estados brasileiros arrastáveis individualmente, para que o usuário possa compará-los entre si e também com o tamanho de outros países. Estou usando este mapa como um exemplo para o tutorial a seguir.

Quero ver o mapa!

Se você está aqui pelo mapa, aqui está ele!

Clique em Carregar Mapa para vê-lo. Pode levar algum tempo para carregar em conexões lentas.

Fontes de dados: Natural Earth, IBGE.

Cores diferentes representam as diferentes regiões do Brasil: Sul, Sudeste, Centro-oeste, Norte e Nordeste.

Se você é professor(a) e deseja usar este mapa para as aulas da escola ou qualquer outra aula, na verdade, use-o à vontade. Se precisar de uma versão offline, você pode salvar o html deste mapa e abri-lo offline no computador da sala de aula (deve funcionar). Mas se você tiver algum problema para fazer isso, pode entrar em contato comigo por e-mail.

Tutorial para fazer você mesmo um mapa destes

Neste tutorial rápido, vou mostrar como adicionar uma camada arrastável de tamanho variável com a latitude ao seu webmap do Leaflet.

Os dados empregados neste tutorial simples são as divisões de países do site Natural Earth e as UFs (estados e Distrito Federal), atualizadas em 2020, pelo Instituto Brasileiro de Geografia e Estatística (IBGE). Também cito os shapefiles do NEREUS da Universidade de São Paulo.

Vou usar QGIS 3.16.9 para gerar os polígonos para o mapa.

Primeiro, adicione o plugin ao seu mapa

De acordo com as instruções do gerenciador do plugin, o usuário pode instalar o plug-in ou baixar diretamente o código-fonte. Optei por baixar o código-fonte. Salvei com o nome leaflet-truesize.js na pasta js do meu projeto do mapa do Leaflet.js. Se você não tiver essa pasta, poderá salvá-la na mesma pasta que tem o arquivo html, mas tenha cuidado ao escrever qualquer caminho no sistema para retirar o “/js/”.

Em seguida, vá para o arquivo html e adicione ao corpo html:

<script src="js/leaflet-truesize.js"></script>

Prepare o polígono a ser adicionado ao mapa usando o QGIS

Claro, vou começar pelo meu estado, o Rio Grande do Sul, que é também o estado mais ao sul do Brasil.

Abro, no QGIS 3.16.9, o shapefile do Brasil e suas UFs, do IBGE.

Olhando em suas propriedades, vejo que o tipo de geometria é MultiPolygon. Infelizmente, só consegui fazer Leaflet Truesize funcionar com geometria do tipo polígono. Tentei adicionar um multipolígono, mas não funcionou (o objeto gerado para mim no mapa não é móvel). Mas o repositório do plugin diz que ele pode suportar Multipolygon, então talvez a versão para download ainda não tenha sido atualizada, ou talvez eu tenha feito algo errado? Mas, então, se você fizer funcionar com Multipolígonos, ótimo!

De qualquer forma, a boa notícia é que você pode facilmente gerar um único polígono para representar cada área. Outra possibilidade seria usar o conjunto de dados do NEREUS-USP (http://www.usp.br/nereus/?dados=unidades-federativas), que já são shapefiles baseados em geometria de polígono.

Para transformar multipolígonos em polígonos, use a ferramenta “Multipart to singleparts”.

Eu apliquei isso ao meu shapefile original e obtive:

Agora podemos ver que o tipo de geometria é Polygon.

Quando vou para a tabela de atributos, vejo que existem vários polígonos que delimitam o estado do Rio Grande do Sul (RS):

No entanto, para o Leaflet Truesize, devemos fornecer apenas um polígono. Provavelmente, existem mais de um polígono porque existem áreas, tais como ilhas, que pertencem aos estados brasileiros.

Para saber qual polígono é mais representativo do RS, uso a ferramenta Select Features by Area or Single Click.

Usando esta ferramenta, clico uma vez em cima do RS:

Clico com o botão direito no layer e em seguida em Save Selected Features as…

Ao salvar, escolho o formato como GeoJSON.

Salvei o arquivo. Agora, ao abrir a tabela de atributos, eu encontro apenas um polígono. Isto é o que estávamos procurando.

Prepare o script para receber a camada arrastável

Abra o código html do seu mapa. Dentro das tags de script, usando JavaScript, crie o pane e dê a ele um nome único.

        map.createPane('pane_RS');
        map.getPane('pane_RS').style.zIndex = 405;
        map.getPane('pane_RS').style['mix-blend-mode'] = 'normal';

Crie a feição:

const RS_geojson = {
  		type: 'Feature',
  		properties: {},
  		geometry: {
   		 type: 'Polygon',
   		 coordinates: [] }
	};

Preencheremos a parte das coordenadas mais adiante.

Crie a camada True Size:

        const trueSizeLayer = new L.trueSize(RS_geojson, {
         color: '#FF0000',
	 pane: 'pane_RS',
         weight: 1,
         opacity: 1,
         dashArray: '7, 10',
        }).addTo(map);

Ajuste a cor da camada de sobreposição. Este código padrão fornecerá uma camada arrastável na cor vermelha.

Para alterar a cor da borda, altere a opção “color”, e para alterar a cor de preenchimento, adicione “fillcolor”, no mesmo molde de “color”. Eu também tive que deletar a parte de leaflet-truesize.js com a definição de fillColor para conseguir que a cor dos polígonos mudasse. Para criar uma borda com linha contínua, basta excluir o “dashArray”. Um exemplo:

        const trueSizeLayer = new L.trueSize(RS_geojson, {
         color: '#FFF000',
         fillcolor: '#FFF000',
         pane: 'pane_RS',
         weight: 1,
         opacity: 1,
        }).addTo(map);

Copie a geometria do arquivo GeoJSON para o JS.

Abra o arquivo GeoJSON. No caso, abri no Vim.

Copie as coordenadas (tudo depois das coordenadas e antes das chaves “}”).

Cole as coordenadas no lugar que deixamos para elas.

coordinates: [ [ [ -56.323271271, -28.924725248 ], …]] }

Teste o webmap

Clique duas vezes em index.html (ou no nome do seu arquivo html) e tente mover a camada adicionada.

Para mim, funcionou bem!

Faça o mesmo para cada estado ou para cada polígono

Fácil, não é? Bom, faltam 26 estados…

Eu estava simplesmente salvando todos os GeoJSONs e repetindo o processo no arquivo html. No entanto, alguns estados têm muitos vértices e isso torna o html final muito pesado.

Simplifique os polígonos (opcional)

Para simplificar os polígonos e, portanto, tornar o mapa mais leve, use a ferramenta Simplify do QGIS.

Para os estados brasileiros, achei que o algoritmo distância (Douglas-Peucker) com tolerância de 0,25° gerou um resultado satisfatório:

Há um aviso no algoritmo de simplificação de polígonos que diz que você deve ter cuidado ao usar graus como a unidade, mas não me sinto confortável projetando o país inteiro no mesmo sistema de coordenadas projetadas, porque isso distorceria muito algumas partes do Brasil. Para países menores, pode ser uma boa opção. Ou, eu poderia reprojetar cada estado em sua projeção adequada e, em seguida, realizar os cálculos, mas isso seria muito trabalho para pouco benefício, em um mapa que será usado apenas para comparações a olho - meu objetivo aqui não é ser 100% precisa.

Esta simplificação dos polígonos torna o mapa do Leaflet resultante cerca de 500 vezes mais leve.

Observações

Lembre-se de alterar o z-index de cada camada para controlar qual delas fica em cima da outra quando elas se cruzam.

Lembre-se de alterar o nome da constante “trueSizeLayer” para cada camada arrastável adicionada.

Para poder alterar a cor do polígono arrastável, eu removi também a definição de fillcolor em leaflet-truesize.js.

Pronto!

O mapa mostrado no início da postagem foi gerado por meio do presente pipeline.