Neomejene vektorske ploščice zemljevidov iz podatkov OpenStreetMap, pripravljene za MapLibre GL ali Leaflet. Brez ključa API, kvot in nepričakovanih računov.
Večina ponudnikov ploščic zemljevidov vas privabi z brezplačnim dobroimetjem. Nato obisk naraste in obračunavanje po porabi majhen poskus spremeni v pravi strošek: nepregledni števci, stroški ob vsakem nalaganju zemljevida in ceniki, za katere potrebujete preglednico. Tako delujeta Google Maps in Mapbox. Kar se je zdelo brezplačno, postane strošek, ki ga vaš projekt morda ne želi.
LFMaps je drugačen. Brezplačno pomeni brezplačno: brez presenečenj, omejitev in računov.
Vse, kar potrebujete za objavo zemljevida. Brez odvečnih stvari.
Vstavite URL ploščic in začnite. Brez registracije, žetonov za dostop in nadzorne plošče.
Brez kvot, prikritih omejitev in štetja nalaganj zemljevida. Uporabite toliko, kot potrebujete.
Brez stroškov pri vsakem obsegu obiska: za deset ali deset milijonov ogledov zemljevida.
Vašim obiskovalcem ne sledimo in ne nastavljamo piškotkov. Vaš pravilnik o zasebnosti ostane enako kratek.
Najbolje deluje z MapLibre GL, pa tudi z Leaflet ali 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 na voljo samo kot moduli ES, zato ga ti primeri naložijo z uvoznim zemljevidom in skriptom vrste module.
npm i maplibre-gl@^6Nato ga uvozite v svoj 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)V paketu MapLibre ne more sam poiskati svoje delovne niti. To je različica za Vite; za webpack in druge glejte vodnik za namestitev 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>Boljši Core Web Vitals pogosto pomenijo boljšo uvrstitev v iskalnikih
Za hitrejši prvi izris uporabite ta nalagalnik:
// Različica za Vite; za druge orodja za združevanje glejte vodnik za namestitev
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Odloženo naloži MapLibre GL in njegov CSS, ko sta potrebna
* @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;
}
/**
* Dinamično naloži CSS za MapLibre GL
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Razred za odloženo nalaganje MapLibre GL
* Ponuja API, podoben maplibregl, z odloženim nalaganjem
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Ustvari nov primerek zemljevida in po potrebi odloženo naloži MapLibre GL
* @param {Object} options - Nastavitve zemljevida
* @returns {Promise} Primerek Map iz MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Pridobi knjižnico MapLibre GL in jo po potrebi odloženo naloži
* @returns {Promise} Knjižnica MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Primer uporabe:
import MapLibreLoader from './maplibre-loader.js';
// Zemljevid ustvari šele, ko je potreben (npr. ob pomikanju ali dejanju uporabnika)
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 kontrolnike, oznake itd.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Za napredne funkcije in celoten API glejte dokumentacijo MapLibre GL JS
Leaflet sam ne zna brati vektorskih ploščic, zato ga povežite z vtičnikom 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>Vtičnik podpira Leaflet 1.x: iste brezplačne ploščice, brez računov.
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"
/>
)
}Brez mapbox-gl in žetonov za dostop: react-map-gl komunicira neposredno z MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Ploščice se dostavljajo prek omrežja CDN, zato se zemljevidi prikažejo v hipu
99.9% razpoložljivost
Podatki OpenStreetMap pokrivajo ves svet
Nekaj vrstic MapLibre GL ali Leaflet in zemljevid je objavljen
Ista naloga: zemljevid na vaši strani. Povsem drugačen račun ob koncu meseca.
Odkrito o omejitvah: LFMaps ponuja samo ploščice zemljevidov. Geokodiranje, izračun poti in navigacija z navodili niso del storitve.
Da. Ni plačljivega paketa, kreditne kartice ali računa za porabo, ne glede na vaš obisk. LFMaps se financira kot stranski projekt, enako kot druga brezplačna orodja na tej strani.
Ne. Ni registracije in ni žetonov, ki bi jih morali menjavati. Nastavite URL LFMaps za slog zemljevida in vse deluje.
Ni kvot in ni stroge omejitve hitrosti zahtevkov. Prosimo le, da ne prenašate množično celotnega nabora ploščic. Običajna uporaba zemljevida na spletišču ali v aplikaciji je povsem v redu.
Da. MapLibre GL izvorno izrisuje vektorske ploščice in ga priporočamo, Leaflet pa deluje z vtičnikom maplibre-gl-leaflet.
Iz OpenStreetMap, prek storitve OpenFreeMap. Podatke ustvarja skupnost in prav zato lahko ostanejo brezplačni.
Da, tudi v komercialnih projektih. Na zemljevidu ohranite vidno navedbo avtorstva OpenStreetMap. To je edina zahteva.
Ne. Pri zahtevkih za ploščice ne zbiramo osebnih podatkov in ne nastavljamo piškotkov, zato dodajanje zemljevida ne zahteva dopolnitev pravilnika o zasebnosti.
Ta ponudnika ponujata brezplačni paket, nato pa z rastjo zaračunavata vsako nalaganje zemljevida. LFMaps sploh nima števca: cena je nič pri desetih in pri desetih milijonih ogledov zemljevida.
Ustvarite usklajene barvne palete
Brezplačni generator gesel
Brezplačni krajšalnik URL-jev po meri
Kode QR, ki jih lahko pozneje uredite
Slike, pripravljene za objave na družbenih omrežjih
Razširite strnjeno kodo
Preprosto ustvarite datoteke .gitignore
Sistem za rezervacije v restavracijah
Program za naročanje v frizerskih salonih
Brezplačni generator ikon spletnih mest
Brezplačni plakat z alergeni za restavracije
Delite Markdown v lepi obliki
Vaš jedilnik na spletu, brezplačno