Bản đồ Việt Nam cho ứng dụng của bạn

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

Không cần build hay npm. Bản UMD đã gộp sẵn maplibre-gl và pmtiles.

npm install @mapslibvn/web maplibre-gl

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',
    center: [106.7, 10.776],
    zoom: 13,
  },
  { maplibre: maplibregl },
);

maplibre-gl là peer dependency, bạn tự cài và truyền vào. Khi build còn phải trỏ worker của MapLibre về thư mục tĩnh của bạn.

npm install @mapslibvn/react maplibre-gl

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

export default function BanDo() {
  return (
    <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>
  );
}

Gói tự import maplibre-gl nên không cần truyền deps, nhưng vẫn cần bước worker của MapLibre khi build.

npx expo install @maplibre/maplibre-react-native expo-application
npm install @mapslibvn/react-native

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

export default function ManBanDo() {
  return (
    <MapsLibVNMap
      apiKey="mlv_live_…"
      apiBase="https://api.ai-solutions.io.vn"
      center={[106.7, 10.776]}
      zoom={13}
    />
  );
}

Dùng khoá loại mobile. Cần New Architecture và không chạy trên Expo Go, phải build native.