Dale vectoriale de hartă nelimitate, bazate pe date OpenStreetMap, gata de integrat în MapLibre GL sau Leaflet. Fără cheie API, cote sau facturi neașteptate.
Majoritatea furnizorilor de dale de hartă te întâmpină cu credite gratuite. Apoi traficul crește, iar facturarea în funcție de consum transformă un mic experiment într-o cheltuială reală: contoare neclare, costuri care cresc la fiecare încărcare a hărții și pagini de prețuri pentru care ai nevoie de un tabel de calcul. Așa funcționează atât Google Maps, cât și Mapbox. Ceea ce părea gratuit devine un cost pe care proiectul tău poate nu și-l dorește.
LFMaps funcționează altfel. Gratuit înseamnă gratuit: fără surprize, limite sau facturi.
Tot ce îți trebuie pentru a publica o hartă. Nimic în plus.
Adaugă URL-ul dalelor și pornește. Fără înscriere, token de acces sau panou de administrare.
Fără cote, limite ascunse sau contorizarea încărcărilor hărții. Folosește cât ai nevoie.
Cost zero, indiferent de trafic: zece afișări ale hărții sau zece milioane.
Nu îți urmărim vizitatorii și nu setăm cookie-uri. Politica ta de confidențialitate rămâne la fel de simplă.
Funcționează cel mai bine cu MapLibre GL, dar și cu Leaflet sau 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 este distribuit exclusiv ca module ES, așa că aceste exemple îl încarcă printr-o hartă de importuri și un script de tip modul.
npm i maplibre-gl@^6Apoi importă-l în codul 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)Într-un pachet, MapLibre nu își poate găsi singur procesul worker. Aceasta este varianta pentru Vite; pentru webpack și alte instrumente, consultă ghidul de instalare 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>Rezultatele Core Web Vitals mai bune înseamnă adesea poziții mai bune în căutări
Folosește acest încărcător pentru o afișare inițială mai rapidă:
// Varianta pentru Vite; consultă ghidul de instalare pentru alte instrumente de împachetare
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Încarcă MapLibre GL și stilurile CSS la nevoie
* @returns {Promise} Modulul MapLibre GL
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Încarcă dinamic stilurile CSS MapLibre GL
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Clasă pentru încărcarea MapLibre GL la nevoie
* Oferă un API similar cu maplibregl, dar cu încărcare la nevoie
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Creează o nouă instanță de hartă și încarcă MapLibre GL la nevoie
* @param {Object} options - Opțiuni de configurare a hărții
* @returns {Promise} O instanță Map din MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Obține biblioteca MapLibre GL și o încarcă la nevoie
* @returns {Promise} Biblioteca MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Exemplu de utilizare:
import MapLibreLoader from './maplibre-loader.js';
// Creează harta doar când este necesar (de exemplu, la derulare sau la interacțiunea utilizatorului)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Adaugă comenzi, marcaje etc.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Pentru funcții avansate și API-ul complet, consultă documentația MapLibre GL JS
Leaflet nu poate citi singur dale vectoriale, așa că folosește-l împreună cu modulul 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>Modulul acceptă Leaflet 1.x: aceleași dale gratuite, fără facturi.
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"
/>
)
}Fără mapbox-gl sau token de acces: react-map-gl comunică direct cu MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Dale livrate prin CDN, pentru hărți care apar într-o clipă
Disponibilitate de 99,9%
Date OpenStreetMap care acoperă întreaga lume
Câteva linii de MapLibre GL sau Leaflet și harta este online
Același rezultat: o hartă pe pagina ta. O factură foarte diferită la sfârșitul lunii.
Compromisul, pe scurt: LFMaps oferă doar dale de hartă. Geocodarea, calcularea rutelor și indicațiile de navigare pas cu pas nu fac parte din serviciu.
Da. Nu există plan plătit, nu ai nevoie de card și nu primești facturi pentru utilizare, indiferent de trafic. LFMaps este finanțat ca proiect personal, la fel ca celelalte instrumente gratuite de pe această pagină.
Nu. Nu trebuie să te înscrii și nu ai niciun token de înlocuit periodic. Folosește un URL LFMaps pentru stilul hărții și totul funcționează.
Nu există cote sau limite stricte de frecvență. Te rugăm doar să nu descarci automat întregul set de dale; utilizarea normală a unei hărți pe un site sau într-o aplicație este în regulă.
Da. MapLibre GL afișează nativ dalele vectoriale și este soluția pe care o recomandăm, dar și Leaflet funcționează cu modulul maplibre-gl-leaflet.
Din OpenStreetMap, prin OpenFreeMap. Datele sunt create de comunitate, tocmai de aceea pot rămâne gratuite.
Da, inclusiv în proiecte comerciale. Păstrează mențiunea de atribuire OpenStreetMap vizibilă pe hartă: aceasta este singura cerință.
Nu. Nu colectăm date personale și nu setăm cookie-uri la cererile de dale, așa că adăugarea unei hărți nu presupune completarea politicii de confidențialitate.
Aceste servicii oferă un plan gratuit, apoi facturează fiecare încărcare a hărții când traficul crește. LFMaps nu contorizează utilizarea: prețul este zero atât la zece afișări, cât și la zece milioane.
Creează palete de culori armonioase
Generator gratuit de parole
Scurtare gratuită de URL-uri personalizate
Coduri QR pe care le poți modifica ulterior
Imagini pregătite pentru rețelele sociale
Fă codul minificat ușor de citit
Generează ușor fișiere .gitignore
Sistem de rezervări pentru restaurante
Program de gestionare a programărilor pentru saloane de coafură
Generator gratuit de faviconuri
Afiș gratuit cu alergeni pentru restaurante
Distribuie documente Markdown cu stil
Meniul restaurantului tău online, gratuit