Tessel·les vectorials il·limitades a partir de dades d’OpenStreetMap, a punt per integrar-les amb MapLibre GL o Leaflet. Sense clau API, sense quotes ni factures inesperades.
La majoria de proveïdors de tessel·les de mapa et donen la benvinguda amb crèdits gratuïts. Després, el trànsit creix i la facturació per ús converteix un petit experiment en una factura ben real: comptadors poc transparents, càrrecs que augmenten cada cop que es carrega un mapa i tarifes que requereixen un full de càlcul per entendre-les. Google Maps i Mapbox funcionen així. Allò que semblava gratuït es converteix en una despesa que el teu projecte potser no es pot permetre.
LFMaps és diferent. Gratuït vol dir gratuït: sense sorpreses, sense límits ni factures.
Tot el que necessites per publicar un mapa. Res que no et calgui.
Enganxa l’URL de les tessel·les i comença. Sense registre, sense testimoni d’accés ni tauler de control.
Sense quotes, sense límits encoberts ni comptadors de càrregues de mapa. Fes-ne servir tantes com necessitis.
Cost zero amb qualsevol volum de trànsit: deu visualitzacions del mapa o deu milions.
No fem seguiment dels teus visitants ni instal·lem galetes. La teva política de privadesa continua sent igual de breu.
Funciona de meravella amb MapLibre GL, i també amb Leaflet o 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>MapLibre GL v6 només es distribueix com a mòduls ES; per això, aquests exemples el carreguen amb un mapa d’importacions i un script de mòdul.
npm i maplibre-gl@^6Després, importa’l al teu 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)Dins d’un paquet, MapLibre no pot trobar el seu worker tot sol. Aquesta és la versió per a Vite; per a webpack i altres eines, consulta la Guia d’instal·lació de 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>Uns bons Core Web Vitals sovint afavoreixen el posicionament als cercadors
Fes servir aquest carregador per alleugerir la primera renderització:
// Versió per a Vite; consulta la guia d’instal·lació per a altres empaquetadors
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Carrega MapLibre GL i el seu CSS de manera diferida quan cal
* @returns {Promise} El mòdul MapLibre GL
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Carrega dinàmicament el CSS de MapLibre GL
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Classe de càrrega diferida de MapLibre GL
* Ofereix una API semblant a maplibregl, però amb càrrega diferida
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Crea una instància de mapa i carrega MapLibre GL de manera diferida si cal
* @param {Object} options - Opcions de configuració del mapa
* @returns {Promise} Una instància de Map de MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Obté la biblioteca MapLibre GL i la carrega de manera diferida si cal
* @returns {Promise} La biblioteca MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Exemple d’ús:
import MapLibreLoader from './maplibre-loader.js';
// Crea el mapa només quan calgui (p. ex., en desplaçar la pàgina o quan l’usuari hi interactuï)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Afegeix controls, marcadors, etc.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Per a funcions avançades i l’API completa, consulta la Documentació de MapLibre GL JS
Leaflet no pot llegir tessel·les vectorials tot sol; combina’l amb el connector 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>El connector és compatible amb Leaflet 1.x: les mateixes tessel·les gratuïtes, sense cap factura.
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"
/>
)
}Sense mapbox-gl ni testimoni d’accés: react-map-gl es comunica directament amb MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Tessel·les servides des d’una CDN perquè els mapes apareguin en un instant
99.9% de disponibilitat
Dades d’OpenStreetMap que cobreixen tot el món
Unes quantes línies de MapLibre GL o Leaflet i ja tens el mapa en marxa
La mateixa funció: un mapa a la teva pàgina. Una factura ben diferent a final de mes.
La contrapartida, amb tota claredat: LFMaps t’ofereix tessel·les de mapa i res més. La geocodificació, el càlcul de rutes i les indicacions pas a pas no formen part del servei.
Sí. No hi ha cap pla de pagament, no et demanem cap targeta de crèdit ni t’enviem cap factura d’ús, sigui quin sigui el teu trànsit. LFMaps es finança com a projecte personal, igual que les altres eines gratuïtes d’aquesta pàgina.
No. No t’has de registrar enlloc ni renovar cap testimoni d’accés. Configura l’estil del teu mapa amb un URL de LFMaps i ja funciona.
No hi ha quotes ni cap límit estricte de peticions. Només et demanem que no descarreguis massivament tot el conjunt de tessel·les; l’ús habitual d’un mapa en un web o una aplicació és benvingut.
Sí. MapLibre GL renderitza les tessel·les vectorials de manera nativa i és l’opció que recomanem, però Leaflet també funciona amb el connector maplibre-gl-leaflet.
D’OpenStreetMap, servides a través d’OpenFreeMap. Les dades les crea la comunitat, i precisament per això poden continuar sent gratuïtes.
Sí, també en projectes comercials. Mantén visible l’atribució a OpenStreetMap al mapa: és l’únic requisit.
No. No recollim dades personals ni instal·lem galetes en les peticions de tessel·les, de manera que afegir un mapa no afegeix res a la teva política de privadesa.
Aquests serveis ofereixen un pla gratuït i, quan el trànsit creix, cobren per cada càrrega de mapa. LFMaps no té cap comptador: el preu és zero tant amb deu visualitzacions del mapa com amb deu milions.
Crea paletes de colors harmonioses
Generador de contrasenyes gratuït
Escurçador d’URL personalitzat i gratuït
Codis QR que pots editar més endavant
Imatges a punt per publicar a les xarxes socials
Desminifica el teu codi
Genera fitxers .gitignore fàcilment
Sistema de reserves per a restaurants
Programari de reserves per a perruqueries
Generador de favicones gratuït
Cartell d’al·lèrgens gratuït per a restaurants
Comparteix Markdown amb estil
La carta del teu restaurant en línia, de franc