uMap: criar mapas web de forma simples e em poucos minutos

Como vimos anteriormente, o uMap é um software livre que permite criar e partilhar mapas personalizados na Web, com base no OpenStreetMap, de forma simples e rápida. Agora, vamos explorar mais funcionalidades. Para isso, utilizaremos o mesmo servidor apresentado anteriormente, disponível em umap.openstreetmap.fr/pt.

Importar ficheiro

Uma das formas mais simples de importar dados consiste em utilizar um ficheiro CSV, um formato bastante comum para o armazenamento de dados tabulares, que pode ser criado em qualquer editor de folha de cálculo.

No nosso exemplo, utilizámos o LibreOffice Calc para criar uma tabela com dados relativos a castelos portugueses. A folha apresenta seis colunas que armazenam diferentes atributos de cada castelo: name, description, longitude, latitude, sipa_url e media. Os dois primeiros campos — name e description — encontram-se em inglês para que o uMap os reconheça automaticamente como campos destinados ao nome e à descrição de cada ponto. As coordenadas geográficas são armazenadas nas colunas latitude e longitude. Os dois atributos restantes — sipa_url e media — armazenam, respetivamente, URL de páginas web e de modelos 3D disponíveis online.

Para importar os dados, utilize a ferramenta de importação e selecione o respetivo ficheiro (1). O uMap deverá reconhecer automaticamente o formato do ficheiro (2). Em seguida, escolha se pretende criar uma nova camada ou importar os dados para uma camada já existente (3) e clique em ‘Importar dados’.

 

Importar dados remotos

O uMap também permite importar dados alojados remotamente. Como vamos importar dados relativos a todo o território de Portugal continental, comece por ajustar a vista do mapa para incluir toda a área pretendida.

Na ferramenta de importação, utilize a opção ‘Assistentes de importação’ e escolha Overpass. Depois, introduza a seguinte expressão:

[boundary=administrative][border_type=distrito]

Em seguida, clique em ‘Selecionar estes dados’. Depois, escolha ‘Importar uma nova camada’ e defina o modo de importação como ‘Copiar para a camada’. Termine clicando em ‘Importar dados’.

Fundo personalizado

Para definir um fundo personalizado, aceda às propriedades avançadas do mapa e preencha, pelo menos, os campos URL e atribuição. No nosso exemplo, utilizamos o mapa disponibilizado pelo Consortium of Ancient World Mappers em cawm.lib.uiowa.edu/tiles/{z}/{x}/{y}.png sob licença Creative

Commons CC BY 4.0.

Gestor de camadas

Através do Gestor de camadas podemos aceder às propriedades das camadas, definir configurações de cada camada, reordenar camadas ou visualizar e editar a tabela de dados associada. No nosso exemplo existem duas camadas: Camada 1 — dados importados a partir do ficheiro CSV; Camada 2 — dados importados através do Overpass.

Vamos ocultar a Camada 2 e editar a Camada 1.

Nas ‘Propriedades da camada’, altere o nome da camada e aproveite para experimentar outros tipos de camada. No nosso exemplo, a camada passa a chamar-se ‘Castelos’ e será utilizado o tipo de camada ‘Padrão’.

Ícones personalizados

Ainda nas ‘Propriedades da camada’, aceda ao separador ‘Propriedades de formas geométricas’ para configurar o aspeto dos ícones. No nosso exemplo, escolhemos ‘Nenhum’ na forma do ícone e utilizámos o seguinte URL para o símbolo:

https://raw.githubusercontent.com/iemdigital/map-icons/refs/heads/main/military/tower_filled_black.svg

 

Imagens, 3D e Vídeos

Ainda através do Gestor de camadas, no separador ‘Opções de interação’, vamos configurar o popup apresentado quando clicamos nos elementos do mapa. No nosso exemplo, selecionámos a opção ‘Popup (largo)’ e vamos personalizar o conteúdo. Neste momento, o conteúdo do popup inclui apenas os dados presentes nas colunas name e description.

Vamos começar por inserir — para criar uma linha separadora horizontal. Depois, digitamos a expressão:

[[{sipa_url}|Ficha SIPA]]

Esta expressão cria uma hiperligação com o texto ‘Ficha SIPA’, apontando para o URL armazenado na coluna sipa_url. Utilizamos chavetas para chamar propriedades existentes na tabela de dados — {nome_da_propriedade} — e parênteses retos duplos para criar hiperligações. Neste caso, usamos ainda uma barra vertical para separar o URL do texto da hiperligação.

Para inserir uma imagem, basta colocar o respetivo URL dentro de dupla chaveta, como no exemplo seguinte: {{https://ansol.org/images/logo.svg}}

Através de iframes também podemos integrar conteúdos externos, como vídeos do YouTube ou modelos 3D do Sketchfab. Para inserir uma iframe, introduza o respetivo URL dentro de tripla chaveta, como em:

{{{https://www.youtube.com/embed/HAAXuY1iesU?si=0–kZEni5vQo5uB8}}}