Tile bản đồ vector không giới hạn từ dữ liệu OpenStreetMap, sẵn sàng dùng với MapLibre GL hoặc Leaflet. Không cần khóa API, không hạn mức, không hóa đơn bất ngờ.
Phần lớn nhà cung cấp tile bản đồ tặng bạn một khoản dùng thử. Khi lượng truy cập tăng, phí tính theo mức sử dụng biến một thử nghiệm nhỏ thành hóa đơn thật: số liệu khó hiểu, phí tăng theo mỗi lần tải bản đồ và bảng giá phải dùng đến bảng tính mới đọc nổi. Google Maps và Mapbox đều hoạt động như vậy. Thứ từng có vẻ miễn phí giờ có thể trở thành khoản chi mà dự án của bạn không muốn gánh.
LFMaps thì khác. Miễn phí nghĩa là miễn phí: không phí bất ngờ, không giới hạn, không hóa đơn.
Đủ mọi thứ để đưa bản đồ lên mạng. Không có gì thừa.
Chỉ cần nhập URL tile là dùng được. Không đăng ký, không mã truy cập, không bảng điều khiển.
Không hạn mức, không giới hạn ngầm, không tính phí theo lượt tải bản đồ. Dùng bao nhiêu tùy bạn.
Không tốn phí dù có mười hay mười triệu lượt xem bản đồ.
Chúng tôi không theo dõi khách truy cập và không đặt cookie. Chính sách quyền riêng tư của bạn vẫn gọn như trước.
Hoạt động tốt nhất với MapLibre GL, đồng thời hỗ trợ Leaflet và 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 chỉ cung cấp mô-đun ES, vì vậy các ví dụ này tải thư viện bằng import map và thẻ script dạng mô-đun.
npm i maplibre-gl@^6Sau đó nhập thư viện vào 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)Khi được đóng gói, MapLibre không thể tự tìm thấy worker. Đây là cách dùng với Vite; với webpack và các công cụ khác, hãy xem hướng dẫn cài đặt 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 tốt hơn thường giúp cải thiện thứ hạng tìm kiếm
Dùng bộ tải này để trang hiển thị ban đầu nhanh hơn:
// Cách dùng với Vite; xem hướng dẫn cài đặt cho các công cụ đóng gói khác
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* Chỉ tải MapLibre GL và CSS của thư viện khi cần
* @returns {Promise} Mô-đun MapLibre GL
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* Tải CSS của MapLibre GL theo yêu cầu
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* Lớp tải MapLibre GL khi cần
* Cung cấp API tương tự maplibregl nhưng chỉ tải thư viện khi cần
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Tạo bản đồ mới và chỉ tải MapLibre GL khi cần
* @param {Object} options - Các tùy chọn cấu hình bản đồ
* @returns {Promise} Một đối tượng Map của MapLibre GL
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Lấy thư viện MapLibre GL và chỉ tải khi cần
* @returns {Promise} Thư viện MapLibre GL
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Ví dụ sử dụng:
import MapLibreLoader from './maplibre-loader.js';
// Chỉ tạo bản đồ khi cần (ví dụ: khi cuộn trang hoặc người dùng tương tác)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Thêm nút điều khiển, điểm đánh dấu, v.v.
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Để dùng các tính năng nâng cao và toàn bộ API, hãy xem tài liệu MapLibre GL JS
Leaflet không tự đọc được tile vector, nên hãy kết hợp với 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 hỗ trợ Leaflet 1.x — vẫn là tile miễn phí và không có hóa đơn.
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"
/>
)
}Không cần mapbox-gl hay mã truy cập — react-map-gl kết nối trực tiếp với MapLibre GL.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Tile được phân phối qua CDN nên bản đồ hiện ra rất nhanh
Thời gian hoạt động 99.9%
Dữ liệu OpenStreetMap bao phủ toàn thế giới
Chỉ vài dòng MapLibre GL hoặc Leaflet là bản đồ hoạt động
Cùng mục đích: hiển thị bản đồ trên trang. Nhưng hóa đơn cuối tháng rất khác.
Điều cần biết: LFMaps chỉ cung cấp tile bản đồ. Dịch vụ không bao gồm tìm địa chỉ theo tọa độ, tìm tuyến đường hay chỉ đường từng chặng.
Có. Không có gói trả phí, không cần thẻ tín dụng và không có hóa đơn theo mức sử dụng, dù trang của bạn có bao nhiêu lượt truy cập. LFMaps được duy trì như một dự án cá nhân, giống các công cụ miễn phí khác trên trang này.
Không. Bạn không cần đăng ký hay thay đổi mã truy cập định kỳ. Chỉ cần trỏ kiểu bản đồ tới URL của LFMaps là dùng được.
Không có hạn mức hay giới hạn tốc độ cố định. Chúng tôi chỉ đề nghị bạn đừng thu thập hàng loạt toàn bộ bộ tile; sử dụng bản đồ bình thường trên website hoặc ứng dụng hoàn toàn được.
Có. MapLibre GL hiển thị tile vector trực tiếp và là lựa chọn chúng tôi khuyên dùng, nhưng Leaflet cũng hoạt động với plugin maplibre-gl-leaflet.
Từ OpenStreetMap, được cung cấp qua OpenFreeMap. Dữ liệu do cộng đồng đóng góp, nhờ vậy dịch vụ có thể duy trì miễn phí.
Có, kể cả cho dự án thương mại. Chỉ cần giữ thông tin ghi công OpenStreetMap hiển thị trên bản đồ.
Không. Chúng tôi không thu thập dữ liệu cá nhân hay đặt cookie cho các yêu cầu tile, nên việc thêm bản đồ không làm phát sinh nội dung mới trong chính sách quyền riêng tư của bạn.
Các dịch vụ đó có mức dùng miễn phí, rồi tính phí theo lượt tải bản đồ khi bạn phát triển. LFMaps hoàn toàn không tính theo lượt: giá vẫn bằng không với mười hay mười triệu lượt xem bản đồ.
Tạo bảng màu hài hòa
Công cụ tạo mật khẩu miễn phí
Rút gọn URL tùy chỉnh, miễn phí
Mã QR có thể chỉnh sửa sau
Hình ảnh sẵn sàng đăng mạng xã hội
Làm mã nguồn dễ đọc trở lại
Tạo tệp .gitignore dễ dàng
Hệ thống đặt bàn nhà hàng
Phần mềm đặt lịch cho tiệm làm tóc
Công cụ tạo favicon miễn phí
Tạo bảng thông tin chất gây dị ứng miễn phí cho nhà hàng
Chia sẻ Markdown thật đẹp
Đưa thực đơn nhà hàng lên mạng miễn phí