Tessere vettoriali illimitate basate sui dati OpenStreetMap, pronte per MapLibre GL o Leaflet. Nessuna chiave API, nessuna quota, nessuna fattura a sorpresa.
La maggior parte dei fornitori di tessere cartografiche ti accoglie con crediti gratuiti. Poi il traffico cresce e la fatturazione a consumo trasforma un piccolo esperimento in una spesa concreta: contatori poco chiari, costi che aumentano a ogni caricamento della mappa e tariffe per cui serve un foglio di calcolo. Google Maps e Mapbox funzionano entrambi così. Quello che sembrava gratuito diventa un costo di cui il tuo progetto farebbe volentieri a meno.
Con LFMaps è diverso. Gratuito significa gratuito: niente sorprese, limiti o fatture.
Tutto ciò che serve per pubblicare una mappa. Senza il superfluo.
Inserisci l’URL delle tessere e parti. Nessuna registrazione, nessun token di accesso, nessun pannello di controllo.
Nessuna quota, nessuna soglia nascosta, nessun conteggio dei caricamenti della mappa. Usa quello che ti serve.
Nessun costo, qualunque sia il traffico: dieci visualizzazioni della mappa o dieci milioni.
Non tracciamo i tuoi visitatori e non impostiamo cookie. La tua informativa sulla privacy resta semplice come prima.
Ideale con MapLibre GL, funziona anche con Leaflet e 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 è disponibile solo come moduli ES: questi esempi lo caricano tramite una import map e uno script di tipo module.
npm i maplibre-gl@^6Poi importalo nel tuo 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)All’interno di un bundle, MapLibre non riesce a trovare autonomamente il proprio worker. Questo è l’esempio per Vite; per webpack e gli altri bundler, consulta la Guida all’installazione di 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>Core Web Vitals migliori spesso favoriscono il posizionamento nei motori di ricerca
Usa questo caricatore per alleggerire la visualizzazione iniziale:
// Esempio per Vite; per altri bundler, consulta la guida all’installazione
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Carica MapLibre GL e il suo CSS solo quando servono
* @returns {Promise} Il modulo MapLibre GL
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Carica dinamicamente il CSS di MapLibre GL
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Classe per il caricamento differito di MapLibre GL
* Fornisce un’API simile a maplibregl, ma con caricamento differito
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Crea una nuova istanza della mappa, caricando MapLibre GL solo se necessario
* @param {Object} options - Opzioni di configurazione della mappa
* @returns {Promise} Un’istanza Map di MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Restituisce la libreria MapLibre GL, caricandola solo se necessario
* @returns {Promise} La libreria MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Esempio d’uso:
import MapLibreLoader from './maplibre-loader.js';
// Crea la mappa solo quando serve (ad esempio, allo scorrimento o a un’interazione dell’utente)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Aggiungi controlli, marcatori, ecc.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Per le funzionalità avanzate e l’API completa, consulta la Documentazione di MapLibre GL JS
Leaflet non può leggere le tessere vettoriali da solo: usalo con il 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>Il plugin supporta Leaflet 1.x: le stesse tessere gratuite, senza costi.
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"
/>
)
}Niente mapbox-gl, niente token di accesso: react-map-gl comunica direttamente con MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Tessere distribuite tramite CDN, per visualizzare le mappe in un attimo
Disponibilità del 99,9%
Dati OpenStreetMap per tutto il mondo
Poche righe di MapLibre GL o Leaflet e sei online
Lo stesso risultato: una mappa nella tua pagina. Una fattura molto diversa a fine mese.
Il compromesso, con trasparenza: LFMaps offre solo tessere cartografiche. Geocodifica, calcolo dei percorsi e indicazioni di navigazione passo passo non fanno parte del servizio.
Sì. Nessun piano a pagamento, nessuna carta di credito e nessuna fattura a consumo, qualunque sia il traffico. LFMaps è finanziato come progetto personale, proprio come gli altri strumenti gratuiti di questa pagina.
No. Non c’è nulla a cui registrarsi e nessun token da sostituire periodicamente. Imposta un URL di LFMaps come stile della mappa e funziona subito.
Nessuna quota e nessun limite rigido alla frequenza delle richieste. Chiediamo solo di non scaricare in massa l’intero insieme di tessere: il normale utilizzo di una mappa su un sito web o un’app va benissimo.
Sì. MapLibre GL visualizza le tessere vettoriali in modo nativo ed è la soluzione che consigliamo, ma anche Leaflet funziona con il plugin maplibre-gl-leaflet.
Da OpenStreetMap, distribuiti tramite OpenFreeMap. I dati sono creati dalla comunità, ed è proprio questo che permette di mantenerli gratuiti.
Sì, anche per progetti commerciali. Mantieni visibile sulla mappa l’attribuzione a OpenStreetMap: è l’unico requisito.
No. Non raccogliamo dati personali e non impostiamo cookie sulle richieste di tessere. Aggiungere una mappa non richiede quindi aggiunte alla tua informativa sulla privacy.
Offrono un piano gratuito e poi fanno pagare ogni caricamento della mappa quando il traffico cresce. LFMaps non ha alcun contatore: il prezzo è zero, sia con dieci visualizzazioni sia con dieci milioni.
Crea palette di colori armoniose
Generatore di password gratuito
Accorcia e personalizza i tuoi URL, gratis
Codici QR modificabili anche dopo la creazione
Immagini pronte per i post sui social
Rendi leggibile il codice minificato
Genera facilmente file .gitignore
Sistema di prenotazione per ristoranti
Software di prenotazione per parrucchieri
Generatore di favicon gratuito
Crea gratis un cartello degli allergeni per il tuo ristorante
Condividi Markdown con stile
Il menu del tuo ristorante online, gratis