Nhảy tới nội dung

Javascript

Hiển thị các ô bản đồ của NDAMaps bằng Javascript.

Mô tả​

Nền tảng NDAMaps 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 NDAMaps 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 ndamap-gl và đồng thời thêm một lớp (layer) bằng các ô bản đồ của NDAMaps.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>NDAMaps 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/ndamap-gl@latest/dist/ndamap-gl.css"
    />
    <script src="https://unpkg.com/ndamap-gl@latest/dist/ndamap-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 ndamapgl.Map({
        container: "map",
        style:
          "https://nda-tiles.openmap.vn/styles/ndamap/style.json",
        center: [21.03024, 105.85237],
        zoom: 15,
        maplibreLogo: true,
      });
    </script>
  </body>
</html>
thông tin

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