Neobmedzené vektorové mapové dlaždice z údajov OpenStreetMap, pripravené na použitie s MapLibre GL alebo Leaflet. Bez kľúča API, bez kvót, bez nečakaných faktúr.
Väčšina poskytovateľov mapových dlaždíc vás privíta bezplatným kreditom. Potom návštevnosť rastie a účtovanie podľa spotreby premení malý experiment na poriadny účet — neprehľadné počítadlá, poplatky rastúce s každým načítaním mapy a cenníky, na ktoré potrebujete tabuľkový procesor. Takto fungujú Google Maps aj Mapbox. Zdanlivo bezplatná služba sa stane nákladom, ktorý váš projekt možno nepotrebuje.
LFMaps funguje inak. Zadarmo znamená zadarmo — bez prekvapení, bez limitov, bez faktúr.
Všetko, čo potrebujete na spustenie mapy. Nič navyše.
Stačí vložiť URL dlaždíc a môžete začať. Bez registrácie, prístupového tokenu aj ovládacieho panela.
Bez kvót, skrytých limitov a počítania načítaní mapy. Používajte, koľko potrebujete.
Nulové náklady pri akejkoľvek návštevnosti — pri desiatich zobrazeniach mapy aj pri desiatich miliónoch.
Nesledujeme vašich návštevníkov a neukladáme cookies. Vaše zásady ochrany súkromia zostanú rovnako stručné.
Najlepšie fungujú s MapLibre GL, ale aj s Leaflet alebo 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 sa dodáva iba vo forme modulov ES, preto ho tieto príklady načítavajú pomocou mapy importov a modulového skriptu.
npm i maplibre-gl@^6Potom ho importujte vo svojom JavaScripte:
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)V zostavenom balíku MapLibre nedokáže sám nájsť svoj worker. Toto je postup pre Vite; pre webpack a ďalšie nástroje si pozrite návod na inštaláciu 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>Lepšie Core Web Vitals často znamenajú lepšie pozície vo vyhľadávaní
Na rýchlejšie prvé vykreslenie použite tento načítavač:
// Verzia pre Vite; pre ostatné nástroje na zostavovanie balíkov pozrite návod na inštaláciu
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Načíta MapLibre GL a jeho CSS až vtedy, keď sú potrebné
* @returns {Promise} Modul MapLibre GL
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Dynamicky načíta CSS pre MapLibre GL
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Trieda na odložené načítanie MapLibre GL
* Poskytuje API podobné maplibregl, ale s odloženým načítaním
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Vytvorí novú inštanciu mapy a podľa potreby načíta MapLibre GL
* @param {Object} options - Možnosti konfigurácie mapy
* @returns {Promise} Inštancia triedy Map knižnice MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Získa knižnicu MapLibre GL a podľa potreby ju načíta
* @returns {Promise} Knižnica MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Príklad použitia:
import MapLibreLoader from './maplibre-loader.js';
// Vytvorte mapu až vtedy, keď je potrebná (napr. pri posúvaní stránky alebo interakcii používateľa)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Pridajte ovládacie prvky, značky atď.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Pokročilé funkcie a úplné API nájdete v dokumentácii MapLibre GL JS
Leaflet sám nedokáže čítať vektorové dlaždice, preto ho skombinujte s doplnkom 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>Doplnok podporuje Leaflet 1.x — tie isté bezplatné dlaždice, bez akýchkoľvek poplatkov.
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 a bez prístupového tokenu — react-map-gl komunikuje priamo s MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Dlaždice sa doručujú cez CDN, takže mapy sa zobrazia za okamih
Dostupnosť 99,9 %
Údaje OpenStreetMap pokrývajú celý svet
Pár riadkov kódu s MapLibre GL alebo Leaflet a mapa je na svete
Rovnaký výsledok — mapa na vašej stránke. Úplne iný účet na konci mesiaca.
Na rovinu: LFMaps poskytuje iba mapové dlaždice. Geokódovanie, plánovanie trás a podrobná navigácia nie sú súčasťou služby.
Áno. Žiadny platený program, žiadna platobná karta ani účet za spotrebu — bez ohľadu na návštevnosť. LFMaps je financovaný ako vedľajší projekt, rovnako ako ostatné bezplatné nástroje na tejto stránke.
Nie. Nemusíte sa registrovať ani pravidelne meniť token. Nastavte štýl mapy na URL služby LFMaps a všetko funguje.
Žiadne kvóty ani pevný limit počtu požiadaviek. Prosíme len, aby ste hromadne nesťahovali celú sadu dlaždíc — bežné používanie mapy na webe alebo v aplikácii je v poriadku.
Áno. MapLibre GL vykresľuje vektorové dlaždice natívne a odporúčame ho, ale funguje aj Leaflet s doplnkom maplibre-gl-leaflet.
Z OpenStreetMap, prostredníctvom služby OpenFreeMap. Údaje vytvára komunita, a práve preto môžu zostať bezplatné.
Áno, aj v komerčných projektoch. Na mape ponechajte viditeľné uvedenie zdroja OpenStreetMap — to je jediná podmienka.
Nie. Nezbierame žiadne osobné údaje a pri požiadavkách na dlaždice neukladáme cookies, takže pridaním mapy nemusíte rozširovať svoje zásady ochrany súkromia.
Tieto služby ponúkajú bezplatný program a po jeho prekročení účtujú každé načítanie mapy. LFMaps nemá žiadne počítadlo: cena je nula pri desiatich zobrazeniach mapy aj pri desiatich miliónoch.
Vytvárajte harmonické farebné palety
Bezplatný generátor hesiel
Vlastný skracovač URL zadarmo
QR kódy, ktoré môžete neskôr upraviť
Obrázky pripravené na sociálne siete
Vráťte minifikovanému kódu čitateľnú podobu
Jednoducho generujte súbory .gitignore
Rezervačný systém pre reštaurácie
Rezervačný softvér pre kaderníctva
Bezplatný generátor favicon
Bezplatný plagát s alergénmi pre reštaurácie
Zdieľajte Markdown v krásnej podobe
Jedálny lístok vašej reštaurácie online a zadarmo