Neomezené vektorové mapové dlaždice z dat OpenStreetMap, připravené pro MapLibre GL i Leaflet. Bez klíče API, bez kvót a bez nečekaných účtů.
Většina poskytovatelů mapových dlaždic vás přivítá kreditem zdarma. Pak návštěvnost vzroste a účtování podle využití promění malý experiment v pořádný účet. Neprůhledné měření, poplatky za každé načtení mapy a ceníky, na které potřebujete tabulku. Takto fungují Google Maps i Mapbox. Z něčeho zdánlivě bezplatného se stává náklad, který váš projekt nepotřebuje.
LFMaps funguje jinak. Zdarma znamená zdarma — bez překvapení, bez limitů a bez faktur.
Vše, co potřebujete ke zprovoznění mapy. Nic zbytečného.
Stačí vložit URL dlaždic a můžete začít. Bez registrace, přístupového tokenu a administrace.
Bez kvót, skrytých omezení a počítání načtení mapy. Používejte, kolik potřebujete.
Nulové náklady při jakékoli návštěvnosti — deset zobrazení mapy i deset milionů.
Vaše návštěvníky nesledujeme a neukládáme žádné cookies. Zásady ochrany soukromí mohou zůstat stejně stručné.
Nejlépe fungují s MapLibre GL, ale také s Leaflet a 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 je k dispozici pouze jako moduly ES. Tyto příklady jej proto načítají pomocí mapy importů a modulového skriptu.
npm i maplibre-gl@^6Poté jej importujte do JavaScriptu:
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 sestaveném balíčku MapLibre nedokáže samo najít svůj worker. Toto je postup pro Vite. Pro webpack a další nástroje najdete postup v průvodci instalací 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ší Core Web Vitals často znamenají lepší pozice ve vyhledávání
Pro rychlejší první vykreslení použijte tento načítací modul:
// Varianta pro Vite, postupy pro další sestavovací nástroje najdete v instalační příručce
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Načte MapLibre GL a jeho CSS až ve chvíli, kdy jsou potřeba
* @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čítá CSS knihovny MapLibre GL
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Třída pro odložené načítání MapLibre GL
* Poskytuje API podobné maplibregl, ale s odloženým načítáním
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Vytvoří novou instanci mapy a v případě potřeby načte MapLibre GL
* @param {Object} options - Možnosti konfigurace mapy
* @returns {Promise} Instance třídy Map knihovny MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Vrátí knihovnu MapLibre GL a v případě potřeby ji nejprve načte
* @returns {Promise} Knihovna MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Příklad použití:
import MapLibreLoader from './maplibre-loader.js';
// Vytvořte mapu až v případě potřeby (např. při posunutí stránky nebo interakci uživatele)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Přidejte ovládací prvky, značky atd.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Pokročilé funkce a kompletní API najdete v dokumentaci MapLibre GL JS
Leaflet neumí sám načítat vektorové dlaždice. Propojte jej proto s pluginem 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>Plugin podporuje Leaflet 1.x — stejné bezplatné dlaždice, žádné účtování.
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 přístupového tokenu — react-map-gl komunikuje přímo s MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Dlaždice se načítají z CDN, takže se mapy zobrazí během okamžiku
Dostupnost 99,9 %
Data OpenStreetMap pokrývající celý svět
Pár řádků s MapLibre GL nebo Leaflet a mapa běží
Stejný výsledek — mapa na vaší stránce. Účet na konci měsíce je ale úplně jiný.
A co za to? LFMaps poskytuje pouze mapové dlaždice. Geokódování, plánování tras ani navigace krok za krokem nejsou součástí služby.
Ano. Žádný placený tarif, platební karta ani účet za využití — bez ohledu na návštěvnost. LFMaps je financován jako vedlejší projekt, stejně jako ostatní bezplatné nástroje na této stránce.
Ne. Nemusíte se registrovat ani pravidelně měnit token. Jako styl mapy nastavte URL služby LFMaps a vše funguje.
Žádné kvóty ani pevný limit počtu požadavků. Prosíme jen, abyste hromadně nestahovali celou sadu dlaždic. Běžné použití mapy na webu nebo v aplikaci je v pořádku.
Ano. MapLibre GL vykresluje vektorové dlaždice přímo, a proto jej doporučujeme. Leaflet ale funguje také, pokud použijete plugin maplibre-gl-leaflet.
Z OpenStreetMap prostřednictvím OpenFreeMap. Data vytváří komunita, a právě díky tomu mohou zůstat zdarma.
Ano, i pro komerční projekty. Jedinou podmínkou je ponechat na mapě viditelné uvedení zdroje OpenStreetMap.
Ne. Nesbíráme osobní údaje a při požadavcích na dlaždice neukládáme cookies. Přidáním mapy tak nevzniká nic nového, co byste museli uvádět v zásadách ochrany soukromí.
Tyto služby nabízejí bezplatný tarif, ale při vyšším využití účtují každé načtení mapy. LFMaps využití vůbec nepočítá: cena je nulová při deseti zobrazeních mapy i při deseti milionech.
Vytvářejte sladěné barevné palety
Generátor hesel zdarma
Zkracování URL s vlastními odkazy zdarma
QR kódy, které můžete později upravit
Obrázky připravené pro sociální sítě
Převeďte minifikovaný kód do čitelné podoby
Snadné vytváření souborů .gitignore
Rezervační systém pro restaurace
Rezervační software pro kadeřnictví
Generátor favicon zdarma
Plakát s alergeny pro restaurace zdarma
Sdílejte Markdown v krásné podobě
Jídelní lístek vaší restaurace online a zdarma