ไทล์แผนที่ฟรีสำหรับเว็บไซต์และแอปของคุณ เร็ว ฟรี ใช้ได้ตลอดไป

ไทล์แผนที่เวกเตอร์จากข้อมูล OpenStreetMap ใช้กับ MapLibre GL หรือ Leaflet ได้ทันที ไม่ต้องใช้ API Key ไม่มีโควตา และไม่มีค่าใช้จ่ายที่คาดไม่ถึง

ขับเคลื่อนโดย OpenFreeMap 🚀
ลองแผนที่ตัวอย่าง อ่านเอกสารประกอบ

ทำไมค่าไทล์แผนที่ถึงแพงขึ้น (และทำไม LFMaps จึงไม่เป็นแบบนั้น)

ผู้ให้บริการไทล์แผนที่ส่วนใหญ่มักเริ่มด้วยเครดิตฟรี แต่เมื่อมีผู้ใช้งานมากขึ้น การคิดเงินตามปริมาณก็เปลี่ยนโปรเจ็กต์เล็ก ๆ ให้มีค่าใช้จ่ายจริง ทั้งตัวเลขการใช้งานที่ดูยาก ค่าบริการที่เพิ่มทุกครั้งที่โหลดแผนที่ และหน้าราคาที่ต้องใช้ตารางคำนวณ Google Maps กับ Mapbox ก็คิดเงินแบบนี้ สิ่งที่เคยดูเหมือนฟรีจึงอาจกลายเป็นต้นทุนที่คุณไม่ต้องการ

LFMaps ต่างออกไป ฟรีก็คือฟรี ไม่มีค่าใช้จ่ายแอบแฝง ไม่มีเพดาน และไม่มีใบแจ้งหนี้

ทำไมจึงเลือกไทล์แผนที่ฟรีจาก LFMaps?

ทุกอย่างที่ต้องใช้เพื่อแสดงแผนที่ ครบเท่าที่จำเป็น

ไม่ต้องใช้ API Key

ใส่ URL ของไทล์แล้วเริ่มได้เลย ไม่ต้องสมัครสมาชิก ไม่ต้องมี access token หรือหน้าแดชบอร์ด

ขอไทล์ได้ไม่จำกัด

ไม่มีโควตา ไม่มีเพดานแฝง และไม่คิดเงินต่อการโหลดแผนที่ ใช้ได้ตามต้องการ

ฟรีตลอดไป

ไม่มีค่าใช้จ่ายไม่ว่าจะมีคนดูแผนที่สิบครั้งหรือสิบล้านครั้ง

ไม่ติดตามและไม่เก็บข้อมูล

เราไม่ติดตามผู้เข้าชมและไม่ใช้คุกกี้ นโยบายความเป็นส่วนตัวของคุณจึงไม่ต้องยาวขึ้น

ตัวอย่างไทล์แผนที่เวกเตอร์แบบสด พร้อมรูปแบบแผนที่สามแบบ

วิธีเพิ่มไทล์แผนที่ฟรีลงในเว็บไซต์ของคุณ

ทำงานได้ดีที่สุดกับ MapLibre GL และใช้กับ Leaflet หรือ React ได้ด้วย

ขั้นตอนที่ 1: เพิ่ม MapLibre GL ลงใน HTML

<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 แจกจ่ายเป็น ES modules เท่านั้น ตัวอย่างเหล่านี้จึงโหลดผ่าน import map และ module script

หรือติดตั้งด้วย npm

npm i maplibre-gl@^6

จากนั้นนำเข้าใน 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)

เมื่อใช้ในบันเดิล MapLibre จะหา worker เองไม่พบ ตัวอย่างนี้ใช้รูปแบบของ Vite; หากใช้ webpack หรือเครื่องมืออื่น โปรดดู คู่มือการติดตั้ง MapLibre.

ขั้นตอนที่ 2: สร้างแผนที่ของคุณ

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

เคล็ดลับ: โหลด MapLibre เมื่อจำเป็นเพื่อให้ Core Web Vitals ดีขึ้น

แนะนำ

ข้อดีคือ:

ช่วยให้ Largest Contentful Paint (LCP) ดีขึ้น
ลด First Input Delay (FID)
ช่วยควบคุม Cumulative Layout Shift (CLS)
ลดข้อมูลที่ต้องโหลดครั้งแรกประมาณ 750KB

Core Web Vitals ที่ดีขึ้นมักช่วยให้อันดับการค้นหาดีขึ้นด้วย

ใช้ตัวโหลดนี้เพื่อลดภาระตอนเปิดหน้าเว็บครั้งแรก:

// ตัวอย่างสำหรับ Vite; หากใช้บันเดลอร์อื่น โปรดดูคู่มือการติดตั้ง
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';

let maplibrePromise = null;
let cssLoaded = false;

/**
 * โหลด MapLibre GL และ CSS เมื่อจำเป็น
 * @returns {Promise} โมดูล MapLibre GL
 */
async function loadMapLibre() {
    if (!maplibrePromise) {
        maplibrePromise = Promise.all([
            import('maplibre-gl'),
            loadMapLibreCSS()
        ]).then(([module]) => {
            module.setWorkerUrl(workerUrl);
            return module;
        });
    }
    return maplibrePromise;
}

/**
 * โหลด CSS ของ MapLibre GL แบบไดนามิก
 */
async function loadMapLibreCSS() {
    if (!cssLoaded) {
        await import('maplibre-gl/dist/maplibre-gl.css');
        cssLoaded = true;
    }
}

/**
 * คลาสสำหรับโหลด MapLibre GL เมื่อจำเป็น
 * มี API คล้าย maplibregl พร้อมการโหลดเมื่อจำเป็น
 */
export class MapLibreLoader {
    constructor() {
        this.maplibregl = null;
    }

    /**
     * สร้างแผนที่ใหม่ โดยโหลด MapLibre GL เมื่อจำเป็น
     * @param {Object} options - ตัวเลือกการตั้งค่าแผนที่
     * @returns {Promise} อินสแตนซ์ Map ของ MapLibre GL
     */
    async createMap(options) {
        this.maplibregl = await loadMapLibre();
        return new this.maplibregl.Map(options);
    }

    /**
     * เรียกใช้ไลบรารี MapLibre GL และโหลดเมื่อจำเป็น
     * @returns {Promise} ไลบรารี MapLibre GL
     */
    async getLibrary() {
        this.maplibregl = await loadMapLibre();
        return this.maplibregl;
    }
}

export default new MapLibreLoader();

ตัวอย่างการใช้งาน:

import MapLibreLoader from './maplibre-loader.js';

// สร้างแผนที่เมื่อจำเป็นเท่านั้น (เช่น เมื่อเลื่อนมาถึงหรือผู้ใช้โต้ตอบ)
async function initMap() {
    const map = await MapLibreLoader.createMap({
        style: 'https://data.lfmaps.fr/styles/bright',
        center: [6.1844, 48.6937],
        zoom: 12,
        container: 'map',
    });
    
    // เพิ่มปุ่มควบคุม หมุดแผนที่ และองค์ประกอบอื่น ๆ
    const maplibregl = await MapLibreLoader.getLibrary();
    map.addControl(new maplibregl.NavigationControl());
}

หากต้องการความสามารถขั้นสูงและ API ฉบับเต็ม โปรดดู เอกสาร MapLibre GL JS

ใช้ Leaflet อยู่หรือ? เพิ่มไทล์แผนที่ฟรีด้วยปลั๊กอินตัวเดียว

Leaflet อ่านไทล์เวกเตอร์เองไม่ได้ จึงต้องใช้ร่วมกับปลั๊กอิน 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>

ปลั๊กอินนี้รองรับ Leaflet 1.x คุณยังได้ใช้ไทล์ฟรีโดยไม่มีค่าบริการ

ไทล์แผนที่ฟรีใน 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"
    />
  )
}

ไม่ต้องใช้ mapbox-gl หรือ access token เพราะ react-map-gl เชื่อมต่อกับ MapLibre GL ได้โดยตรง

รูปแบบไทล์แผนที่ฟรี: bright, positron และ liberty

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

ส่งไทล์แผนที่ทั่วโลกได้รวดเร็ว

รวดเร็วทันใจ

ส่งไทล์ผ่าน CDN แผนที่จึงแสดงได้ในพริบตา

เชื่อถือได้

พร้อมให้บริการ 99.9% ของเวลา

ครอบคลุมทั่วโลก

ข้อมูล OpenStreetMap ครอบคลุมทั่วโลก

ผสานเข้ากับเว็บไซต์ได้ง่าย

เขียน MapLibre GL หรือ Leaflet เพียงไม่กี่บรรทัดก็แสดงแผนที่ได้

ทางเลือกฟรีแทน Google Maps และ Mapbox

แสดงแผนที่บนหน้าเว็บได้เหมือนกัน แต่ค่าใช้จ่ายปลายเดือนต่างกันมาก

ผู้ให้บริการไทล์แผนที่แบบคิดเงิน

  • เริ่มใช้ฟรี แล้วจ่ายตามจำนวนครั้งที่โหลดแผนที่เมื่อเกินสิทธิ์
  • ต้องสร้าง ปกป้อง และเปลี่ยน API Key
  • ต้องคอยดูแดชบอร์ดการใช้งาน โควตา และแจ้งเตือนค่าบริการ
  • เก็บข้อมูลการใช้งานของผู้เข้าชมแผนที่

LFMaps

  • ใช้ฟรีไม่ว่ามีผู้ชมมากแค่ไหน ไม่มีเพดานการใช้งาน
  • ไม่ต้องใช้ API Key เพราะไม่ต้องมีบัญชี
  • ไม่ต้องเฝ้าดูตัวเลข เพียงวาง URL ของรูปแบบแผนที่แล้วใช้งานต่อ
  • ไม่ติดตามคุณหรือผู้เข้าชมเว็บไซต์ของคุณ

ข้อจำกัดที่ควรรู้: LFMaps ให้บริการเฉพาะไทล์แผนที่ ไม่มีบริการค้นหาพิกัด วางเส้นทาง หรือบอกทางทีละขั้น

คำถามที่พบบ่อยเกี่ยวกับไทล์แผนที่ฟรี

LFMaps ฟรีจริงหรือ?

จริง ไม่มีแพ็กเกจเสียเงิน ไม่ต้องใช้บัตรเครดิต และไม่มีบิลตามปริมาณการใช้งาน ไม่ว่าคุณจะมีผู้ชมมากเพียงใด LFMaps เป็นโปรเจ็กต์เสริมที่ได้รับการสนับสนุนแบบเดียวกับเครื่องมือฟรีอื่น ๆ ในหน้านี้

ต้องใช้ API Key หรือบัญชีหรือไม่?

ไม่ต้อง ไม่ต้องสมัครสมาชิกหรือเปลี่ยน token เพียงตั้งค่ารูปแบบแผนที่ให้ชี้ไปที่ URL ของ LFMaps ก็ใช้งานได้

ไทล์แผนที่มีการจำกัดความเร็วหรือโควตาหรือไม่?

ไม่มีโควตาหรือข้อจำกัดความเร็วแบบตายตัว เราขอเพียงอย่าดึงไทล์ทั้งชุดไปเก็บจำนวนมาก การใช้แผนที่ตามปกติบนเว็บไซต์หรือแอปทำได้

LFMaps ใช้กับ Leaflet และ MapLibre GL ได้หรือไม่?

ได้ MapLibre GL แสดงไทล์เวกเตอร์ได้โดยตรงและเป็นตัวที่เราแนะนำ ส่วน Leaflet ก็ใช้ได้เมื่อเพิ่มปลั๊กอิน maplibre-gl-leaflet

ข้อมูลแผนที่มาจากไหน?

มาจาก OpenStreetMap และให้บริการผ่าน OpenFreeMap ข้อมูลนี้สร้างโดยชุมชน จึงเปิดให้ใช้ได้ฟรี

ใช้ LFMaps บนเว็บไซต์เชิงพาณิชย์ได้หรือไม่?

ได้ รวมถึงโปรเจ็กต์เชิงพาณิชย์ เพียงแสดงเครดิต OpenStreetMap ให้เห็นบนแผนที่ นั่นคือข้อกำหนดเดียว

คุณติดตามผู้เข้าชมเว็บไซต์ของฉันหรือไม่?

ไม่ เราไม่เก็บข้อมูลส่วนบุคคลและไม่ตั้งคุกกี้ในการขอไทล์ การเพิ่มแผนที่จึงไม่ทำให้ต้องเพิ่มข้อความในนโยบายความเป็นส่วนตัว

ต่างจาก Google Maps หรือ Mapbox อย่างไร?

บริการเหล่านั้นให้ใช้ฟรีในช่วงแรก แล้วคิดเงินตามจำนวนครั้งที่โหลดแผนที่เมื่อใช้งานมากขึ้น LFMaps ไม่คิดค่าบริการตามการใช้งาน: ดูแผนที่สิบครั้งหรือสิบล้านครั้งก็ฟรี

เครื่องมือฟรีอื่น ๆ ของเราสำหรับนักพัฒนา

LFColors

สร้างชุดสีที่เข้ากัน

LFMDP

เครื่องมือสร้างรหัสผ่านฟรี

LFNY

ย่อลิงก์ด้วย URL ที่กำหนดเองได้ฟรี

LFQR

สร้างคิวอาร์โค้ดที่แก้ไขภายหลังได้

LFSocial

เตรียมรูปภาพสำหรับโพสต์บนโซเชียล

LFUnminify

จัดรูปแบบโค้ดที่ย่อแล้วให้อ่านง่าย

LFGitignore

สร้างไฟล์ .gitignore ได้ง่าย ๆ

ViteUneTable

ระบบจองโต๊ะร้านอาหาร

ViteUneCoupe

ซอฟต์แวร์จองคิวสำหรับร้านทำผม

LFFavicon

เครื่องมือสร้าง favicon ฟรี

LFAllergenes

สร้างป้ายแสดงสารก่อภูมิแพ้สำหรับร้านอาหารฟรี

LFMarkdown

แชร์ Markdown ได้อย่างสวยงาม

LFMenu

นำเมนูร้านอาหารขึ้นออนไลน์ได้ฟรี