Skip to main content

Simple-map

Initialize the map in the HTML element using ndamap-gl.

Description​

ndamap-gl provides a set of map tiles that allow you to display maps in web applications. These tiles are created from map tiles of various styles and formats that are available in our data. Your location-based applications can now be more intuitive with interactive map styles that help visualize geographic data.

Usage​

To display NDAMaps map tiles on your web application, you need to add the code snippet below in your HTML file. This code snippet will create a map using the ndamap-gl library and also add a layer with NDAMaps map tiles.

<!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>
      var map = new ndamapgl.Map({
        container: "map",
        style: "https://nda-tiles.openmap.vn/styles/ndamap/style.json",
        center: [105.85237, 21.03024],
        zoom: 15,
        maplibreLogo: true
      });
    </script>
  </body>
</html>
info

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