Neribotos vektorinės žemėlapio išklotinės iš OpenStreetMap duomenų, paruoštos naudoti su MapLibre GL ar Leaflet. Be API rakto, kvotų ir netikėtų sąskaitų.
Dauguma žemėlapio išklotinių teikėjų iš pradžių pasiūlo nemokamų kreditų. Tačiau lankomumui augant, mokėjimas už naudojimą nedidelį bandymą paverčia tikromis išlaidomis: neaiškūs skaitikliai, mokestis už kiekvieną žemėlapio įkėlimą ir kainoraščiai, kuriems suprasti reikia skaičiuoklės. Taip veikia ir Google Maps, ir Mapbox. Tai, kas atrodė nemokama, tampa išlaidomis, kurių jūsų projektui visai nereikia.
LFMaps veikia kitaip. Nemokamai reiškia nemokamai: be staigmenų, apribojimų ir sąskaitų.
Viskas, ko reikia žemėlapiui įdiegti. Nieko nereikalingo.
Įrašykite išklotinių URL ir pradėkite. Be registracijos, prieigos rakto ir valdymo skydelio.
Be kvotų, paslėptų apribojimų ir žemėlapio įkėlimų skaitiklio. Naudokite tiek, kiek reikia.
Jokių išlaidų, kad ir koks lankomumas: dešimt žemėlapio peržiūrų ar dešimt milijonų.
Nesekame jūsų lankytojų ir neįrašome slapukų. Privatumo politika gali likti tokia pat trumpa.
Geriausiai veikia su MapLibre GL, taip pat su Leaflet ir 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 platinama tik ES moduliais, todėl šiuose pavyzdžiuose ji įkeliama naudojant importų žemėlapį ir modulio scenarijų.
npm i maplibre-gl@^6Tada importuokite į JavaScript kodą:
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)Sukomplektuotoje programoje MapLibre negali savarankiškai rasti savo vykdyklės. Čia pateiktas Vite variantas; apie webpack ir kitus įrankius skaitykite MapLibre diegimo vadove.
<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>Geresni Core Web Vitals rodikliai dažnai padeda užimti aukštesnes pozicijas paieškoje
Naudokite šį įkėliklį, kad pradinis puslapio vaizdas pasirodytų greičiau:
// Vite variantas; kitų komplektavimo įrankių instrukcijas rasite diegimo vadove
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Prireikus atidėtai įkelia MapLibre GL ir jo CSS
* @returns {Promise} MapLibre GL modulis
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Dinamiškai įkelia MapLibre GL CSS
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* MapLibre GL atidėtojo įkėlimo klasė
* Teikia į maplibregl panašią API su atidėtuoju įkėlimu
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Sukuria naują žemėlapio egzempliorių, prireikus atidėtai įkeldama MapLibre GL
* @param {Object} options - Žemėlapio konfigūracijos parinktys
* @returns {Promise} MapLibre GL Map egzempliorius
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Gauna MapLibre GL biblioteką, prireikus ją atidėtai įkeldama
* @returns {Promise} MapLibre GL biblioteka
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Naudojimo pavyzdys:
import MapLibreLoader from './maplibre-loader.js';
// Sukurti žemėlapį tik prireikus, pavyzdžiui, slenkant ar naudotojui atliekant veiksmą
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Pridėti valdiklius, žymeklius ir kt.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Apie išplėstines galimybes ir visą API skaitykite MapLibre GL JS dokumentacijoje
Leaflet savarankiškai neskaito vektorinių išklotinių, todėl naudokite jį su maplibre-gl-leaflet papildiniu:
<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>Papildinys palaiko Leaflet 1.x: tos pačios nemokamos išklotinės, be jokių sąskaitų.
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"
/>
)
}Be mapbox-gl ir prieigos rakto: react-map-gl tiesiogiai bendrauja su MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Išklotinės teikiamos per CDN, todėl žemėlapiai pasirodo akimirksniu
99,9% pasiekiamumas
OpenStreetMap duomenys apima visą pasaulį
Kelios MapLibre GL ar Leaflet kodo eilutės ir žemėlapis jau veikia
Tas pats tikslas: žemėlapis jūsų puslapyje. Visai kitokia sąskaita mėnesio pabaigoje.
Atvirai apie ribas: LFMaps teikia tik žemėlapio išklotines. Geokodavimas, maršrutų skaičiavimas ir nuoseklios navigacijos instrukcijos į paslaugą neįeina.
Taip. Nėra mokamo plano, nereikia mokėjimo kortelės ir negausite sąskaitos už naudojimą, kad ir koks būtų lankomumas. LFMaps finansuojamas kaip papildomas projektas, kaip ir kiti šiame puslapyje pristatyti nemokami įrankiai.
Ne. Nereikia registruotis ar keisti prieigos rakto. Nurodykite LFMaps URL savo žemėlapio stiliui ir viskas veiks.
Nėra kvotų ar griežtos užklausų dažnio ribos. Tik prašome masiškai nesisiųsti viso išklotinių rinkinio: įprastas žemėlapio naudojimas svetainėje ar programėlėje yra visiškai tinkamas.
Taip. MapLibre GL vektorines išklotines atvaizduoja tiesiogiai, todėl jį rekomenduojame, tačiau Leaflet taip pat veikia su maplibre-gl-leaflet papildiniu.
Iš OpenStreetMap, per OpenFreeMap. Duomenis kuria bendruomenė, todėl jie ir gali likti nemokami.
Taip, paslauga tinka ir komerciniams projektams. Žemėlapyje palikite matomą OpenStreetMap autorystės nuorodą: tai vienintelis reikalavimas.
Ne. Nerenkame asmens duomenų ir išklotinių užklausose neįrašome slapukų, todėl pridėjus žemėlapį nereikia papildyti privatumo politikos.
Šios paslaugos siūlo nemokamą planą, o jį išaugus ima mokestį už žemėlapio įkėlimus. LFMaps neturi jokio skaitiklio: tiek dešimt, tiek dešimt milijonų žemėlapio peržiūrų kainuoja nulį.
Kurkite derančias spalvų paletes
Nemokamas slaptažodžių generatorius
Nemokamas nuorodų trumpinimas su pasirinktu adresu
QR kodai, kuriuos galėsite redaguoti vėliau
Paveikslėliai socialinių tinklų įrašams
Atkurkite skaitomą kodo formatą
Lengvai kurkite .gitignore failus
Restoranų rezervacijų sistema
Rezervacijų programa kirpėjams
Nemokamas svetainės piktogramų generatorius
Nemokamas alergenų plakatas restoranams
Dalykitės gražiai pateiktu Markdown
Jūsų restorano meniu internete nemokamai