Skip to main content

Marker

Add markers to the map.

Description​

@openmapvn/openmap-gl allows us to mark a point on the map.

Usage​

To mark a point on the map you need to add the code snippet below in your HTML file. This code snippet will create a point marked with a marker icon 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
      });

      const marker = new maplibregl.Marker()
        .setLngLat([21.03024, 105.85237])
        .addTo(map);
    </script>
  </body>
</html>
info

More information about the @openmapvn/openmapvn-gl library can be found in the Openmap.vn GL JS documentation.