GeoJSON polygon

Style a polygon with the fill layer type.

Description

ndamap-gl allows you to display a polygon on the map

Usage

Để hiển thị vùng đa giác (polygon) 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 vùng được đánh dấu trên bản đồ của bạn

To display a polygon you need to add the following code snippet in your HTML file. This code snippet will create a highlighted area on your map.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>NDAMaps Demo Map</title>
    <meta
      property="og:description"
      content="Initialize a map in an HTML element with NDAMaps 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://maptiles.ndamaps.vn/styles/day-v2/style.json?apikey=YOUR_API_KEY",
        center: [105.85237, 21.03024],
        zoom: 15,
        ndamapLogo: true,
        attributionControl: {
          compact: true,
          customAttribution: 'Dữ liệu bản đồ 2026 <a href="https://ndamaps.vn/" target="_blank">© NDAMAPS</a> <a href="https://44plus.vn/" target="_blank">© 44+ Technologies</a>'
        }
      });

      map.on("load", () => {
        map.addSource("polygon-source", {
          type: "geojson",
          data: {
            type: "Feature",
            geometry: {
              type: "Polygon",
              coordinates: [
                [
                  [105.852, 21.031],
                  [105.853, 21.032],
                  [105.854, 21.031],
                  [105.853, 21.03],
                  [105.852, 21.031]
                ]
              ]
            },
            properties: {}
          }
        });

        map.addLayer({
          id: "polygon-layer",
          type: "fill",
          source: "polygon-source",
          layout: {},
          paint: {
            "fill-color": "#088",
            "fill-opacity": 0.8
          }
        });
      });
    </script>
  </body>
</html>

info

More information about the ndamap-gl library can be found in the NDAMaps GL JS documentation.