Kafelki wektorowe bez limitu, oparte na danych OpenStreetMap, gotowe do użycia z MapLibre GL lub Leaflet. Bez klucza API, bez limitów, bez niespodziewanych faktur.
Większość dostawców kafelków mapowych kusi darmowym pakietem na start. Potem ruch rośnie, a rozliczanie według zużycia zmienia mały eksperyment w prawdziwy wydatek: niejasne zasady naliczania opłat, koszt każdego wyświetlenia mapy i cenniki, do których potrzeba arkusza kalkulacyjnego. Tak działają zarówno Google Maps, jak i Mapbox. Coś, co wydawało się darmowe, staje się kosztem, którego Twój projekt może nie potrzebować.
LFMaps działa inaczej. Za darmo znaczy za darmo — bez niespodzianek, limitów i faktur.
Wszystko, czego potrzebujesz, by dodać mapę. Bez zbędnych dodatków.
Wklej adres URL kafelków i gotowe. Bez rejestracji, tokena dostępu i panelu zarządzania.
Bez limitów, ukrytych ograniczeń i naliczania opłat za wyświetlenia mapy. Korzystaj tyle, ile potrzebujesz.
Zero kosztów przy dowolnym ruchu — od dziesięciu wyświetleń mapy po dziesięć milionów.
Nie śledzimy odwiedzających i nie ustawiamy plików cookie. Twoja polityka prywatności pozostaje tak krótka jak dotąd.
Najlepiej działa z MapLibre GL, ale także z Leaflet i 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 jest dostępne wyłącznie jako moduły ES, dlatego te przykłady ładują bibliotekę za pomocą mapy importów i skryptu modułowego.
npm i maplibre-gl@^6Następnie zaimportuj bibliotekę w kodzie 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)W zbudowanym pakiecie MapLibre nie potrafi samodzielnie odnaleźć swojego workera. To wariant dla Vite; rozwiązania dla webpacka i innych narzędzi opisuje instrukcja instalacji 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>Lepsze Core Web Vitals często oznaczają wyższe pozycje w wynikach wyszukiwania
Użyj tego kodu, by przyspieszyć pierwsze wyświetlenie strony:
// Wariant dla Vite; dla innych narzędzi do budowania pakietów sprawdź instrukcję instalacji
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Ładuje MapLibre GL i jego CSS dopiero wtedy, gdy są potrzebne
* @returns {Promise} Moduł MapLibre GL
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Dynamicznie ładuje CSS MapLibre GL
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Klasa do ładowania MapLibre GL na żądanie
* Udostępnia API podobne do maplibregl, ale z ładowaniem na żądanie
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Tworzy nową instancję mapy, w razie potrzeby ładując MapLibre GL na żądanie
* @param {Object} options - Opcje konfiguracji mapy
* @returns {Promise} Instancja Map z biblioteki MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Zwraca bibliotekę MapLibre GL, w razie potrzeby ładując ją na żądanie
* @returns {Promise} Biblioteka MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Przykład użycia:
import MapLibreLoader from './maplibre-loader.js';
// Utwórz mapę dopiero wtedy, gdy jest potrzebna (np. po przewinięciu strony lub interakcji użytkownika)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Dodaj elementy sterujące, znaczniki itp.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Zaawansowane funkcje i pełne API opisuje dokumentacja MapLibre GL JS
Leaflet nie obsługuje samodzielnie kafelków wektorowych, więc połącz go z wtyczką 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>Wtyczka obsługuje Leaflet 1.x — te same darmowe kafelki, bez żadnych opłat.
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"
/>
)
}Bez mapbox-gl i tokena dostępu — react-map-gl łączy się bezpośrednio z MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Kafelki dostarczane przez CDN sprawiają, że mapy pojawiają się w mgnieniu oka
Dostępność na poziomie 99,9%
Dane OpenStreetMap obejmujące cały świat
Kilka wierszy kodu MapLibre GL lub Leaflet i mapa działa
Ten sam efekt — mapa na Twojej stronie. Zupełnie inny rachunek na koniec miesiąca.
Uczciwie o ograniczeniach: LFMaps udostępnia wyłącznie kafelki mapowe. Geokodowanie, wyznaczanie tras i nawigacja zakręt po zakręcie nie są częścią usługi.
Tak. Nie ma płatnego pakietu, podawania karty ani rachunków za zużycie — niezależnie od ruchu. LFMaps jest finansowane jako projekt poboczny, podobnie jak pozostałe darmowe narzędzia na tej stronie.
Nie. Nie musisz się rejestrować ani wymieniać tokenów. Wystarczy wskazać adres URL LFMaps jako styl mapy i gotowe.
Nie ma limitu zużycia ani sztywnego limitu częstotliwości żądań. Prosimy jedynie, by nie pobierać masowo całego zestawu kafelków — zwykłe korzystanie z mapy na stronie lub w aplikacji jest w porządku.
Tak. MapLibre GL natywnie renderuje kafelki wektorowe i to właśnie tę bibliotekę polecamy, ale Leaflet również działa z wtyczką maplibre-gl-leaflet.
Z OpenStreetMap, udostępniane za pośrednictwem OpenFreeMap. Dane tworzy społeczność — właśnie dlatego mogą pozostać darmowe.
Tak, również w projektach komercyjnych. Zachowaj widoczną na mapie informację o źródle danych OpenStreetMap — to jedyny wymóg.
Nie. Nie zbieramy danych osobowych i nie ustawiamy plików cookie przy żądaniach kafelków, więc dodanie mapy nie wymaga rozszerzenia polityki prywatności.
Te usługi oferują darmowy pakiet, a gdy go przekroczysz, naliczają opłaty za wyświetlenia mapy. LFMaps w ogóle nie mierzy zużycia do rozliczeń: cena wynosi zero przy dziesięciu wyświetleniach i przy dziesięciu milionach.
Twórz harmonijne palety kolorów
Darmowy generator haseł
Darmowy skracacz linków z własnymi adresami
Kody QR, które możesz później edytować
Grafiki gotowe do publikacji w mediach społecznościowych
Przywróć czytelny format kodu
Łatwo generuj pliki .gitignore
System rezerwacji dla restauracji
Program do rezerwacji wizyt dla fryzjerów
Darmowy generator favicon
Darmowy plakat z alergenami dla restauracji
Udostępniaj Markdown w pięknej oprawie
Menu Twojej restauracji online, za darmo