Tile peta vektor tanpa batas dari data OpenStreetMap, siap dipasang di MapLibre GL atau Leaflet. Tanpa kunci API, tanpa kuota, tanpa tagihan tak terduga.
Kebanyakan penyedia tile peta menawarkan kredit gratis di awal. Saat lalu lintas meningkat, tarif berdasarkan pemakaian membuat proyek kecil berubah menjadi tagihan nyata: hitungan pemakaian yang tidak jelas, biaya untuk setiap pemuatan peta, dan daftar harga yang perlu dihitung dengan spreadsheet. Google Maps dan Mapbox sama-sama menggunakan model ini. Layanan yang semula terasa gratis bisa menjadi biaya yang tidak diinginkan proyek Anda.
LFMaps berbeda. Gratis berarti gratis — tanpa kejutan, tanpa batas pemakaian, tanpa tagihan.
Semua yang Anda perlukan untuk menampilkan peta. Sesederhana itu.
Masukkan URL tile dan langsung gunakan. Tanpa pendaftaran, token akses, atau dasbor.
Tanpa kuota, batas tersembunyi, atau hitungan biaya per pemuatan peta. Gunakan sesuai kebutuhan.
Tanpa biaya berapa pun lalu lintas Anda — sepuluh atau sepuluh juta tampilan peta.
Kami tidak melacak pengunjung Anda dan tidak memasang cookie. Kebijakan privasi Anda tetap sederhana.
Paling cocok dengan MapLibre GL, tetapi juga mendukung Leaflet dan 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 hanya tersedia sebagai modul ES, jadi contoh ini memuatnya melalui import map dan skrip modul.
npm i maplibre-gl@^6Lalu impor di JavaScript Anda:
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)Di dalam bundel, MapLibre tidak dapat menemukan worker secara otomatis. Ini adalah contoh untuk Vite; untuk webpack dan lainnya, lihat panduan instalasi 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>Core Web Vitals yang lebih baik sering membantu peringkat pencarian
Gunakan pemuat ini agar tampilan awal lebih ringan:
// Contoh untuk Vite; lihat panduan instalasi untuk bundler lainnya
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Memuat MapLibre GL dan CSS-nya saat diperlukan
* @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;
}
/**
* Memuat CSS MapLibre GL secara dinamis
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Kelas pemuat MapLibre GL sesuai kebutuhan
* Menyediakan API yang mirip dengan maplibregl, tetapi memuatnya saat diperlukan
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Membuat instans peta baru dan memuat MapLibre GL saat diperlukan
* @param {Object} options - Opsi konfigurasi peta
* @returns {Promise} Instans MapLibre GL Map
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Mengambil pustaka MapLibre GL dan memuatnya saat diperlukan
* @returns {Promise} Pustaka MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Contoh penggunaan:
import MapLibreLoader from './maplibre-loader.js';
// Buat peta hanya saat diperlukan (misalnya saat menggulir atau berinteraksi)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Tambahkan kontrol, penanda, dan lainnya.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Untuk fitur lanjutan dan API lengkap, lihat dokumentasi MapLibre GL JS
Leaflet tidak dapat membaca tile vektor secara langsung, jadi gunakan bersama plugin 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 ini mendukung Leaflet 1.x — tile gratis yang sama, tanpa tagihan.
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"
/>
)
}Tanpa mapbox-gl atau token akses — react-map-gl terhubung langsung ke MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Tile disajikan melalui CDN, sehingga peta tampil dalam sekejap
Waktu aktif 99.9%
Data OpenStreetMap yang mencakup seluruh dunia
Cukup beberapa baris MapLibre GL atau Leaflet untuk menampilkan peta
Sama-sama menampilkan peta di halaman Anda. Biaya di akhir bulan sangat berbeda.
Batasannya: LFMaps hanya menyediakan tile peta. Geocoding, perencanaan rute, dan petunjuk arah belokan demi belokan tidak termasuk dalam layanan ini.
Ya. Tidak ada paket berbayar, kartu kredit, atau tagihan pemakaian, berapa pun lalu lintas Anda. LFMaps dibiayai sebagai proyek sampingan, seperti alat gratis lainnya di halaman ini.
Tidak. Anda tidak perlu mendaftar atau memperbarui token. Arahkan gaya peta Anda ke URL LFMaps dan peta langsung berfungsi.
Tidak ada kuota atau batas laju yang ketat. Kami hanya meminta agar Anda tidak mengunduh seluruh kumpulan tile secara massal. Penggunaan peta biasa di situs web atau aplikasi diperbolehkan.
Ya. MapLibre GL merender tile vektor secara langsung dan menjadi pilihan kami, tetapi Leaflet juga bisa digunakan dengan plugin maplibre-gl-leaflet.
Dari OpenStreetMap, disajikan melalui OpenFreeMap. Data ini dibuat oleh komunitas, sehingga bisa tetap gratis.
Ya, termasuk untuk proyek komersial. Pastikan atribusi OpenStreetMap tetap terlihat pada peta — hanya itu persyaratannya.
Tidak. Kami tidak mengumpulkan data pribadi atau memasang cookie pada permintaan tile, sehingga menambahkan peta tidak menambah kewajiban dalam kebijakan privasi Anda.
Keduanya menawarkan paket gratis, lalu mengenakan biaya per pemuatan peta ketika pemakaian meningkat. LFMaps tidak mengenakan biaya pemakaian: sepuluh maupun sepuluh juta tampilan peta tetap gratis.
Buat palet warna yang serasi
Generator kata sandi gratis
Pemendek URL khusus, gratis
Kode QR yang bisa Anda edit nanti
Gambar siap pakai untuk unggahan media sosial
Rapikan kode yang diminifikasi
Buat berkas .gitignore dengan mudah
Sistem reservasi restoran
Perangkat lunak pemesanan untuk salon rambut
Generator favicon gratis
Pembuat poster alergen gratis untuk restoran
Bagikan Markdown dengan tampilan menarik
Menu restoran Anda secara online, gratis