Jubin peta percuma untuk laman web dan aplikasi anda Pantas. Percuma. Selamanya.

Jubin peta vektor tanpa had berasaskan data OpenStreetMap, sedia digunakan dengan MapLibre GL atau Leaflet. Tiada kunci API, kuota atau bil mengejut.

Dikuasakan oleh OpenFreeMap 🚀

Cuba demo Baca dokumentasi

Mengapa jubin peta menjadi mahal (dan mengapa LFMaps kekal percuma)

Kebanyakan penyedia jubin peta menarik anda dengan kredit percuma. Apabila trafik meningkat, caj mengikut penggunaan menukar percubaan kecil menjadi bil sebenar — kiraan penggunaan yang kabur, caj bagi setiap paparan peta dan halaman harga yang memerlukan hamparan untuk difahami. Google Maps dan Mapbox menggunakan model ini. Apa yang terasa percuma akhirnya menjadi kos yang mungkin membebankan projek anda.

LFMaps berbeza. Percuma bermaksud percuma — tiada kejutan, had atau invois.

Mengapa pilih LFMaps untuk jubin peta percuma?

Segala yang anda perlukan untuk menerbitkan peta. Tanpa perkara yang tidak diperlukan.

Tidak memerlukan kunci API

Masukkan URL jubin dan terus guna. Tiada pendaftaran, token akses atau papan pemuka.

Permintaan jubin tanpa had

Tiada kuota, had tersembunyi atau caj bagi setiap paparan peta. Gunakan sebanyak yang diperlukan.

Percuma selamanya

Tiada kos pada sebarang tahap trafik — sepuluh paparan peta mahupun sepuluh juta.

Tiada penjejakan atau pengumpulan data

Kami tidak menjejak pelawat anda atau menetapkan kuki. Dasar privasi anda kekal ringkas.

Demo jubin vektor langsung — tiga gaya peta

Cara menambah jubin peta percuma pada laman anda

Paling sesuai dengan MapLibre GL, turut serasi dengan Leaflet atau React

Langkah 1: Tambahkan MapLibre GL pada HTML anda

<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 memuatkannya melalui peta import dan skrip modul.

Atau pasang dengan npm

npm i maplibre-gl@^6

Kemudian import dalam 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)

Dalam berkas, MapLibre tidak dapat mencari worker sendiri. Ini ialah cara untuk Vite; bagi webpack dan yang lain, lihat panduan pemasangan MapLibre.

Langkah 2: Cipta peta anda

<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>

Petua: muatkan MapLibre apabila diperlukan untuk Core Web Vitals yang lebih baik

Disyorkan

Manfaatnya:

Memperbaik Largest Contentful Paint (LCP)

Mengurangkan First Input Delay (FID)

Mengawal Cumulative Layout Shift (CLS)

Menjimatkan kira-kira 750KB pada muatan pertama

Core Web Vitals yang lebih baik sering membantu kedudukan carian

Gunakan pemuat ini untuk paparan awal yang lebih ringan:

// Cara untuk Vite; lihat panduan pemasangan bagi pembina berkas lain
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';

let maplibrePromise = null;
let cssLoaded = false;

/**
 * Memuatkan MapLibre GL dan CSS apabila 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;
}

/**
 * Memuatkan CSS MapLibre GL secara dinamik
 */
async function loadMapLibreCSS() {
    if (!cssLoaded) {
        await import('maplibre-gl/dist/maplibre-gl.css');
        cssLoaded = true;
    }
}

/**
 * Kelas pemuat tertunda MapLibre GL
 * Menyediakan API yang serupa dengan maplibregl, dengan pemuatan tertunda
 */
export class MapLibreLoader {
    constructor() {
        this.maplibregl = null;
    }

    /**
     * Mencipta tika peta baharu, memuatkan MapLibre GL hanya jika diperlukan
     * @param {Object} options - Pilihan konfigurasi peta
     * @returns {Promise} Tika Map bagi MapLibre GL
     */
    async createMap(options) {
        this.maplibregl = await loadMapLibre();
        return new this.maplibregl.Map(options);
    }

    /**
     * Mendapatkan pustaka MapLibre GL, memuatkannya hanya jika 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';

// Cipta peta hanya apabila diperlukan (contohnya ketika menatal 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 kawalan, penanda dan sebagainya
    const maplibregl = await MapLibreLoader.getLibrary();
    map.addControl(new maplibregl.NavigationControl());
}

Untuk ciri lanjutan dan API lengkap, lihat dokumentasi MapLibre GL JS

Menggunakan Leaflet? Tambahkan jubin peta percuma dengan satu pemalam

Leaflet tidak dapat membaca jubin vektor sendiri, jadi gunakannya bersama pemalam 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>

Pemalam ini menyokong Leaflet 1.x — jubin percuma yang sama, tanpa sebarang bil.

Jubin peta percuma dalam React

npm i react-map-gl maplibre-gl@^6

import 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 berhubung terus dengan MapLibre GL.

Gaya jubin peta percuma: bright, positron dan liberty

https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty

Dibina untuk kepantasan: penghantaran jubin peta pantas ke seluruh dunia

Sepantas kilat

Jubin dihantar melalui CDN supaya peta dipaparkan sekelip mata

Boleh diharap

Masa beroperasi 99.9%

Liputan seluruh dunia

Data OpenStreetMap yang meliputi seluruh dunia

Mudah disepadukan

Beberapa baris MapLibre GL atau Leaflet, dan peta anda sedia digunakan

Alternatif percuma kepada Google Maps dan Mapbox

Tujuan yang sama — peta pada halaman anda. Bil hujung bulan yang jauh berbeza.

Penyedia jubin peta berbayar

Pelan percuma, kemudian caj setiap paparan peta apabila penggunaan melebihi hadnya
Kunci API yang perlu dicipta, dilindungi dan diganti secara berkala
Papan pemuka penggunaan, kuota dan amaran bil yang perlu dipantau
Analitik yang dikumpulkan tentang pengguna peta anda

LFMaps

Percuma pada sebarang tahap trafik — tiada meter penggunaan
Tiada kunci API kerana tiada akaun
Tiada apa-apa untuk dipantau: tampal URL gaya dan teruskan kerja
Tiada penjejakan terhadap anda atau pelawat anda

Batasan yang perlu diketahui: LFMaps hanya menyediakan jubin peta. Geopengekodan, pengiraan laluan dan panduan arah langkah demi langkah tidak termasuk dalam perkhidmatan ini.

Jubin peta percuma: soalan lazim

Adakah LFMaps benar-benar percuma?

Ya. Tiada pelan berbayar, kad kredit atau bil penggunaan — tanpa mengira trafik anda. LFMaps dibiayai sebagai projek sampingan, sama seperti alat percuma lain pada halaman ini.

Adakah saya memerlukan kunci API atau akaun?

Tidak. Tiada pendaftaran atau token yang perlu diganti. Halakan gaya peta anda ke URL LFMaps dan terus gunakan.

Adakah jubin peta mempunyai had kadar atau kuota?

Tiada kuota atau had kadar yang ketat. Kami hanya meminta agar anda tidak memuat turun keseluruhan set jubin secara pukal — penggunaan peta biasa pada laman web atau aplikasi dibenarkan.

Adakah LFMaps serasi dengan Leaflet serta MapLibre GL?

Ya. MapLibre GL memaparkan jubin vektor secara asli dan merupakan pilihan yang kami syorkan, tetapi Leaflet juga boleh digunakan dengan pemalam maplibre-gl-leaflet.

Dari manakah data peta diperoleh?

Daripada OpenStreetMap, disampaikan melalui OpenFreeMap. Data ini dihasilkan oleh komuniti, dan itulah sebabnya ia boleh kekal percuma.

Bolehkah saya menggunakan LFMaps pada laman web komersial?

Ya, termasuk projek komersial. Pastikan atribusi OpenStreetMap kelihatan pada peta — itu sahaja syaratnya.

Adakah anda menjejak pelawat saya?

Tidak. Kami tidak mengumpulkan data peribadi atau menetapkan kuki pada permintaan jubin, jadi penambahan peta tidak memerlukan sebarang tambahan pada dasar privasi anda.

Apakah bezanya dengan Google Maps atau Mapbox?

Penyedia itu menawarkan pelan percuma, kemudian mengenakan caj setiap paparan peta apabila penggunaan meningkat. LFMaps langsung tiada meter penggunaan: harganya sifar untuk sepuluh paparan peta mahupun sepuluh juta.

Alat percuma kami yang lain untuk pembangun

LFColors

Bina palet warna yang harmoni

LFMDP

Penjana kata laluan percuma

LFNY

Pemendek URL tersuai, percuma

LFQR

Kod QR yang boleh disunting kemudian

LFSocial

Imej sedia untuk siaran media sosial

LFUnminify

Kembalikan kod termampat kepada bentuk yang mudah dibaca

LFGitignore

Jana fail .gitignore dengan mudah

ViteUneTable

Sistem tempahan restoran

ViteUneCoupe

Perisian tempahan untuk pendandan rambut

LFFavicon

Penjana favicon percuma

LFAllergenes

Poster alergen percuma untuk restoran

LFMarkdown

Kongsi Markdown dengan indah

LFMenu

Menu restoran anda dalam talian, percuma