Rajattomasti OpenStreetMap-aineistoon perustuvia vektorikarttatiiliä, jotka voit ottaa suoraan käyttöön MapLibre GL:ssä tai Leafletissa. Ei API-avainta, käyttökiintiöitä eikä yllätyslaskuja.
Useimmat karttatiilien tarjoajat houkuttelevat ilmaisella käyttökiintiöllä. Kun kävijämäärä kasvaa, käyttöperusteinen laskutus muuttaa pienen kokeilun tuntuvaksi laskuksi: vaikeaselkoisia mittareita, jokaisesta kartan latauksesta kertyviä maksuja ja hinnastoja, joiden ymmärtämiseen tarvitset taulukkolaskentaohjelman. Näin toimivat sekä Google Maps että Mapbox. Ilmaiselta tuntunut palvelu muuttuu kuluksi, jota et ehkä halua projektillesi.
LFMaps toimii toisin. Ilmainen tarkoittaa ilmaista: ei yllätyksiä, käyttörajoja eikä laskuja.
Kaikki, mitä tarvitset kartan julkaisemiseen. Ei mitään turhaa.
Lisää karttatiilien URL-osoite ja aloita. Ei rekisteröitymistä, käyttöoikeustunnusta eikä hallintapaneelia.
Ei kiintiöitä, joustavia käyttörajoja eikä latauskohtaista laskuria. Käytä niin paljon kuin tarvitset.
Ei kuluja millään kävijämäärällä: kymmenen kartan katselukertaa tai kymmenen miljoonaa.
Emme seuraa kävijöitäsi emmekä aseta evästeitä. Tietosuojaselosteesi pysyy yhtä lyhyenä kuin ennenkin.
Toimii parhaiten MapLibre GL:n kanssa, mutta myös Leafletilla ja Reactilla
<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 on saatavilla vain ES-moduuleina, joten nämä esimerkit lataavat sen import map -määrityksen ja moduuliskriptin avulla.
npm i maplibre-gl@^6Tuo se sitten JavaScript-koodiisi:
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)Paketoituna MapLibre ei löydä worker-tiedostoaan itse. Tässä on Vite-toteutus. Webpackin ja muiden paketointityökalujen ohjeet löydät täältä: MapLibren asennusopas.
<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>Paremmat Core Web Vitals -arvot parantavat usein myös hakukonesijoituksia
Kevennä sivun ensilatausta tällä latausratkaisulla:
// Vite-toteutus; katso muiden paketointityökalujen ohjeet asennusoppaasta
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Lataa MapLibre GL:n ja sen CSS-tyylit viivästetysti tarvittaessa
* @returns {Promise} MapLibre GL -moduuli
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Lataa MapLibre GL:n CSS-tyylit dynaamisesti
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* MapLibre GL:n viivästetyn latauksen luokka
* Tarjoaa maplibregl:n kaltaisen rajapinnan viivästetyllä latauksella
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Luo uuden karttainstanssin ja lataa MapLibre GL:n viivästetysti tarvittaessa
* @param {Object} options - Kartan asetukset
* @returns {Promise} MapLibre GL:n Map-instanssi
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Hakee MapLibre GL -kirjaston ja lataa sen viivästetysti tarvittaessa
* @returns {Promise} MapLibre GL -kirjasto
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Käyttöesimerkki:
import MapLibreLoader from './maplibre-loader.js';
// Luo kartta vasta tarvittaessa (esim. vierityksen tai käyttäjän toiminnon yhteydessä)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Lisää säätimet, merkit jne.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Lisäominaisuudet ja koko rajapinnan kuvauksen löydät täältä: MapLibre GL JS:n dokumentaatio
Leaflet ei osaa lukea vektoritiiliä yksinään, joten käytä sen kanssa maplibre-gl-leaflet-lisäosaa:
<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>Lisäosa tukee Leaflet 1.x:ää: samat ilmaiset karttatiilet ilman laskutusta.
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"
/>
)
}Ei mapbox-gl:ää eikä käyttöoikeustunnusta: react-map-gl käyttää suoraan MapLibre GL:ää.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Karttatiilet toimitetaan CDN-jakeluverkon kautta, joten kartat ilmestyvät hetkessä
99,9 %:n käytettävyys
Koko maailman kattava OpenStreetMap-aineisto
Muutama rivi MapLibre GL- tai Leaflet-koodia, ja karttasi on valmis
Sama tehtävä: kartta sivullesi. Aivan erilainen lasku kuun lopussa.
Rehellisesti rajoituksista: LFMaps tarjoaa vain karttatiilet. Geokoodaus, reititys ja vaiheittaiset ajo-ohjeet eivät kuulu palveluun.
Kyllä. Ei maksullista versiota, luottokorttia eikä käyttölaskuja kävijämäärästä riippumatta. LFMaps rahoitetaan sivuprojektina, kuten tämän sivun muutkin ilmaiset työkalut.
Et. Sinun ei tarvitse rekisteröityä eikä vaihtaa käyttöoikeustunnuksia. Aseta karttatyylin osoitteeksi LFMapsin URL-osoite, ja kartta toimii.
Ei kiintiöitä eikä kiinteää pyyntönopeuden rajaa. Pyydämme vain, ettet massalataa koko tiiliaineistoa. Tavallinen kartan käyttö sivustolla tai sovelluksessa sopii hyvin.
Kyllä. Suosittelemme MapLibre GL:ää, joka piirtää vektoritiilet suoraan, mutta myös Leaflet toimii maplibre-gl-leaflet-lisäosan avulla.
OpenStreetMapista OpenFreeMapin kautta. Aineisto on yhteisön tuottamaa, ja juuri siksi se voi pysyä ilmaisena.
Kyllä, myös kaupalliset projektit ovat sallittuja. Pidä OpenStreetMapin lähdemerkintä näkyvissä kartalla. Se on ainoa vaatimus.
Emme. Emme kerää henkilötietoja emmekä aseta evästeitä karttatiilipyyntöjen yhteydessä, joten kartan lisääminen ei tuo lisättävää tietosuojaselosteeseesi.
Niissä on ilmainen kiintiö, jonka ylityttyä maksat jokaisesta kartan latauksesta. LFMapsissa laskuria ei ole lainkaan: hinta on nolla sekä kymmenellä että kymmenellä miljoonalla kartan katselukerralla.
Luo harmonisia väripaletteja
Ilmainen salasanageneraattori
Ilmainen URL-lyhentäjä muokattavilla osoitteilla
QR-koodit, joita voit muokata myöhemmin
Kuvat valmiiksi somejulkaisuihin
Muotoile tiivistetty koodi luettavaksi
Luo .gitignore-tiedostoja helposti
Ravintolan varausjärjestelmä
Ajanvarausohjelma kampaamoille
Ilmainen favicon-generaattori
Ilmainen allergeenijuliste ravintoloille
Jaa Markdown kauniisti
Ravintolasi ruokalista verkkoon ilmaiseksi