Nhảy tới nội dung

Simple map

Khởi tạo bản đồ trong phần tử HTML bằng @openmapvn/openmapvn-gl.

Mô tả​

@openmapvn/openmapvn-gl cung cấp một bộ các ô bản đồ cho phép bạn hiển thị bản đồ trên các ứng dụng web. Các ô này được tạo ra từ các ô bản đồ với nhiều kiểu dáng, định dạng khác nhau có trong dữ liệu của chúng tôi. Ứng dụng xoay quanh dịch vụ vị trí của bạn giờ đây đã có thể trực quan hơn cùng các kiểu bản đồ tương tác giúp trực quan hóa các dữ liệu về địa lý.

Cách sử dụng​

Để hiển thị các ô bản đồ của Openmap.vn trên ứng dụng web của bạn, bạn cần phải thêm code snippet dưới đây trong tệp HTML của bạn. Code snippet này sẽ tạo một bản đồ thông qua thư viện @openmapvn/openmapvn-gl và đồng thời thêm một lớp (layer) bằng các ô bản đồ của Openmap.vn.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Openmap.vn Demo Map</title>
    <meta
      property="og:description"
      content="Initialize a map in an HTML element with OpenmapVN GL."
    />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/@openmapvn/openmapvn-gl@latest/dist/maplibre-gl.css"
    />
    <script src="https://unpkg.com/@openmapvn/openmapvn-gl@latest/dist/maplibre-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = new maplibregl.Map({
        container: "map",
        style:
          "https://maptiles.openmap.vn/styles/day-v1/style.json?apikey=YOUR_API_KEY",
        center: [105.85237, 21.03024],
        zoom: 15,
        maplibreLogo: true
      });
    </script>
  </body>
</html>
thông tin

Để biết thêm thông tin của thư viện @openmapvn/openmapvn-gl bạn có thể tham khảo tại Openmap.vn GL JS documentation.