Vou mostrar-te: Leaflet – um mapa gratuito
Leaflet é uma biblioteca que milhões de sites usam para mostrar mapas. É gratuita e adiciona-se com duas linhas no <head>:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>Depois só precisas de uma caixa para o mapa e algumas linhas de JavaScript:
<div id="mapa" style="height: 400px; border-radius: 12px;"></div>
<script>
// Coordinates for the map's center and zoom level (bigger number = closer)
const mapa = L.map('mapa').setView([49.19, 16.61], 13);
// Map tiles from OpenStreetMap (free)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
}).addTo(mapa);
// A pin with a popup
L.marker([49.19, 16.61])
.addTo(mapa)
.bindPopup('<strong>We are here!</strong>');
</script>Três passos: criar o mapa, adicionar a camada base, pôr um pino. Podes adicionar quantos pinos quiseres – repete L.marker.
Uma biblioteca é código que outra pessoa escreveu e que pedes emprestado, para não teres de escrever tudo tu. O Leaflet trata de deslocar, ampliar e gestos táteis no telemóvel por ti. Tu só dizes ao mapa o que mostrar.
Mais pinos a partir de uma lista
Quando tens vários sítios, guarda-os num array e percorre-o – como com o tempo:
const mista = [
{ nazev: 'Šumava 2025', lat: 49.06, lng: 13.61 },
{ nazev: 'Lipno – camping trip', lat: 48.63, lng: 14.23 },
{ nazev: 'Prague – school trip', lat: 50.09, lng: 14.42 },
];
for (const misto of mista) {
L.marker([misto.lat, misto.lng]).addTo(mapa).bindPopup(misto.nazev);
}Agora és tu 💪
🏫 Site da escola – solução
Um mapa com a localização da escola na página «Contactos». Bónus: um segundo pino para o ginásio ou campo de educação física.
🙋 Site pessoal – solução
Um mapa «Os meus sítios»: onde vives (só aproximadamente – a cidade chega!), o teu parque favorito, onde vais de férias.
🌍 Diário de viagens – solução
Esta é a tua lição estrela: um mapa de todas as tuas viagens com pinos de uma lista. Cada popup pode ligar a um relato de viagem.
⚽ Site de clube – solução
Um mapa «Onde jogamos»: campo de casa + campos dos adversários. Os pais visitantes vão adorar.
Privacidade: nunca ponhas a tua morada exata num site. Um pino na praça principal da tua cidade chega e sobra.
Verifica: O teu site tem um mapa que se pode deslocar e ampliar, com pelo menos dois pinos com popups.
O que ficas a saber desta lição
- Bibliotecas (como Leaflet) emprestam-te superpoderes prontos.
- Um mapa = um mapa + camada base + pinos.
- Uma lista de sítios num array + um ciclo = um mapa de qualquer tamanho.
© 2026 Ing. Martin Polak / AlgoRhino · Condições de uso do conteúdo