Skip to main content

GeoJSON polygon

Style a polygon with the fill layer type.

Description​

@openmapvn/openmapvn-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>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/[email protected]/dist/maplibre-gl.css"
    />
    <script src="https://unpkg.com/@openmapvn/[email protected]/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
      });

      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 @openmapvn/openmapvn-gl library can be found in the Openmap.vn GL JS documentation.