MapsLibVN

Bấm vào biểu tượng POI để xem tên · Mở playground đầy đủ →

Tính năng chính

Bản đồ nền Việt Nam

Tiles PMTiles đọc thẳng từ CDN, hai theme light/dark, nhãn vi/en, nhãn chủ quyền Hoàng Sa – Trường Sa luôn tiếng Việt. Bản đồ web →

Lớp POI 182 loại

182 mã loại địa điểm gom trong 14 nhóm, gộp từ OpenStreetMap và Foursquare OS. Tính năng →

Tìm kiếm & autocomplete

Web component <mapslibvn-autocomplete> gõ tới đâu gợi ý tới đó, cùng search và nearby trong SDK. Tìm kiếm & autocomplete →

Geocode trung thực

Mỗi kết quả kèm precision và confidence, nói rõ đang ở mức mái nhà, hẻm hay phường. Độ chính xác geocode →

Đóng góp cộng đồng

POST /v1/edits cho người dùng báo sai, sửa vị trí, thêm địa điểm mới, có luật duyệt. Đóng góp & sửa POI →

Web, React, React Native

Bốn gói @mapslibvn/* cùng một API, cùng một nguồn tiles, dùng được cả trên iOS và Android. Cài đặt →

Bốn cách nhúng

Script tag

<link rel="stylesheet" href="https://mapslibvn-docs.pages.dev/sdk/mapslibvn.css" />
<script src="https://mapslibvn-docs.pages.dev/sdk/mapslibvn.umd.js"></script>
<div id="map" style="height:400px"></div>
<script>
  const map = MapsLibVN.createMap({
    container: 'map',
    apiKey: 'mlv_live_…',
    apiBase: 'https://api.ai-solutions.io.vn',
    center: [106.7, 10.776],
    zoom: 13,
  });
</script>

npm ESM

import 'maplibre-gl/dist/maplibre-gl.css';
import * as maplibregl from 'maplibre-gl';
import { createMap } from '@mapslibvn/web';

const map = createMap(
  {
    container: 'map',
    apiKey: 'mlv_live_…',
    apiBase: 'https://api.ai-solutions.io.vn',
  },
  { maplibre: maplibregl },
);

React

import 'maplibre-gl/dist/maplibre-gl.css';
import { MapsLibVNMap, Marker } from '@mapslibvn/react';

<MapsLibVNMap
  apiKey="mlv_live_…"
  apiBase="https://api.ai-solutions.io.vn"
  center={[106.7, 10.776]}
  zoom={13}
  containerStyle={{ height: 400 }}
>
  <Marker lng={106.6981} lat={10.7725} popupHtml="<b>Chợ Bến Thành</b>" />
</MapsLibVNMap>;

React Native

import { MapsLibVNMap, Marker } from '@mapslibvn/react-native';

<MapsLibVNMap
  apiKey="mlv_live_…"
  apiBase="https://api.ai-solutions.io.vn"
  center={[106.7, 10.776]}
  zoom={13}
>
  <Marker lng={106.6981} lat={10.7725} color="#e53935" />
</MapsLibVNMap>;

Khoá phải là kind mobile; app cần New Architecture và không chạy trên Expo Go — React Native.

Yêu cầu từng môi trường, bước worker MapLibre cho bundler và bảng lỗi hay gặp nằm ở Cài đặt.

Giấy phép

Giấy phép & ghi nguồnĐiều kiện dùng lại dữ liệu và mã nguồn, chuỗi ghi nguồn bắt buộc hiện trên bản đồ.