Mosaicos vetoriais de mapas sem limites, criados a partir dos dados do OpenStreetMap e prontos a integrar no MapLibre GL ou no Leaflet. Sem chave API, sem quotas, sem faturas inesperadas.
A maioria dos fornecedores de mosaicos de mapas começa por oferecer créditos gratuitos. Depois, o tráfego cresce e a faturação por utilização transforma uma pequena experiência numa verdadeira despesa — contadores pouco transparentes, custos que aumentam a cada carregamento do mapa e tabelas de preços que exigem uma folha de cálculo. Tanto o Google Maps como o Mapbox funcionam assim. O que parecia gratuito torna-se um custo que o seu projeto pode não querer suportar.
O LFMaps é diferente. Gratuito significa gratuito — sem surpresas, sem limites, sem faturas.
Tudo o que precisa para pôr um mapa a funcionar. Sem complicações.
Basta inserir o URL dos mosaicos. Sem registo, sem token de acesso, sem painel de controlo.
Sem quotas, sem limites flexíveis, sem contagem de carregamentos do mapa. Use o que precisar.
Custo zero, qualquer que seja o tráfego — dez visualizações do mapa ou dez milhões.
Não rastreamos os seus visitantes nem definimos cookies. A sua política de privacidade continua tão simples como antes.
Funciona melhor com MapLibre GL, mas também com Leaflet ou React
<link href="https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" rel="stylesheet" />
<script type="importmap">
{ "imports": { "maplibre-gl": "https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs" } }
</script>O MapLibre GL v6 é distribuído apenas como módulos ES, pelo que estes exemplos o carregam através de um mapa de importações e de um script de módulo.
npm i maplibre-gl@^6Depois, importe-o no seu JavaScript:
import * as maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
maplibregl.setWorkerUrl(workerUrl)Num bundle, o MapLibre não consegue localizar o seu worker sozinho. Este exemplo usa Vite; para webpack e outros, consulte o guia de instalação do MapLibre.
<div id="map" style="width: 100%; height: 500px"></div>
<script type="module">
import * as maplibregl from 'maplibre-gl'
const map = new maplibregl.Map({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
})
</script>Melhores Core Web Vitals tendem a favorecer a posição nos resultados de pesquisa
Use este carregador para tornar a apresentação inicial mais leve:
// Exemplo para Vite; consulte o guia de instalação para outros bundlers
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Carrega o MapLibre GL e o respetivo CSS apenas quando necessário
* @returns {Promise} O módulo MapLibre GL
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Carrega dinamicamente o CSS do MapLibre GL
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Classe de carregamento diferido do MapLibre GL
* Disponibiliza uma API semelhante à de maplibregl, mas com carregamento diferido
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Cria uma nova instância de mapa, carregando o MapLibre GL apenas se necessário
* @param {Object} options - Opções de configuração do mapa
* @returns {Promise} Uma instância de Map do MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Obtém a biblioteca MapLibre GL, carregando-a apenas se necessário
* @returns {Promise} A biblioteca MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Exemplo de utilização:
import MapLibreLoader from './maplibre-loader.js';
// Criar o mapa apenas quando necessário (por exemplo, ao deslocar a página ou interagir)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Adicionar controlos, marcadores, etc.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Para funcionalidades avançadas e a API completa, consulte a documentação do MapLibre GL JS
O Leaflet não consegue ler mosaicos vetoriais por si só, pelo que deve combiná-lo com o plugin maplibre-gl-leaflet:
<link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet" />
<script type="importmap">
{ "imports": {
"leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js",
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs"
} }
</script>
<script type="module">
import * as L from 'leaflet'
import { maplibreGL } from 'https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.1.4/dist/leaflet-maplibre-gl.mjs'
const map = L.map('map').setView([48.6937, 6.1844], 12)
maplibreGL({
style: 'https://data.lfmaps.fr/styles/bright',
}).addTo(map)
</script>O plugin suporta Leaflet 1.x — os mesmos mosaicos gratuitos, sem qualquer faturação.
npm i react-map-gl maplibre-gl@^6import Map from 'react-map-gl/maplibre'
import { setWorkerUrl } from 'maplibre-gl'
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
import 'maplibre-gl/dist/maplibre-gl.css'
setWorkerUrl(workerUrl)
export default function MyMap() {
return (
<Map
initialViewState={{ longitude: 6.1844, latitude: 48.6937, zoom: 12 }}
style={{ width: '100%', height: 500 }}
mapStyle="https://data.lfmaps.fr/styles/bright"
/>
)
}Sem mapbox-gl nem token de acesso — o react-map-gl comunica diretamente com o MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Mosaicos servidos por uma CDN, para que os mapas apareçam num instante
99,9% de disponibilidade
Dados do OpenStreetMap que abrangem o mundo inteiro
Bastam algumas linhas de MapLibre GL ou Leaflet para ter o mapa a funcionar
A mesma função — um mapa na sua página. Uma fatura bem diferente ao fim do mês.
A limitação, com toda a transparência: o LFMaps fornece apenas mosaicos de mapas. A geocodificação, o cálculo de percursos e as indicações de navegação passo a passo não fazem parte do serviço.
Sim. Não há plano pago, cartão de crédito nem faturas de utilização — seja qual for o seu tráfego. O LFMaps é financiado como projeto paralelo, tal como as outras ferramentas gratuitas desta página.
Não. Não precisa de se registar nem de renovar tokens. Basta configurar o estilo do mapa com um URL do LFMaps e está pronto.
Não há quotas nem limites rígidos de pedidos. Pedimos apenas que não descarregue em massa todo o conjunto de mosaicos — a utilização normal de mapas num site ou aplicação não tem qualquer problema.
Sim. O MapLibre GL apresenta os mosaicos vetoriais de forma nativa e é a opção que recomendamos, mas o Leaflet também funciona com o plugin maplibre-gl-leaflet.
Do OpenStreetMap, disponibilizados através do OpenFreeMap. Os dados são criados pela comunidade, e é precisamente por isso que podem continuar gratuitos.
Sim, incluindo projetos comerciais. Mantenha a atribuição ao OpenStreetMap visível no mapa — é o único requisito.
Não. Não recolhemos dados pessoais nem definimos cookies nos pedidos de mosaicos, pelo que adicionar um mapa não acrescenta nada à sua política de privacidade.
Esses serviços oferecem um plano gratuito e depois cobram por carregamento do mapa à medida que o projeto cresce. O LFMaps não tem contadores: o preço é zero para dez visualizações do mapa ou para dez milhões.
Crie paletas de cores harmoniosas
Gerador gratuito de palavras-passe
Encurtador gratuito de URLs personalizados
Códigos QR que pode editar mais tarde
Imagens prontas para publicar nas redes sociais
Torne o seu código minificado legível
Gere ficheiros .gitignore facilmente
Sistema de reservas para restaurantes
Software de marcações para cabeleireiros
Gerador gratuito de favicons
Cartaz gratuito de alergénios para restaurantes
Partilhe Markdown com uma apresentação cuidada
A ementa do seu restaurante online, gratuitamente