Skip to main content

Javascript

Display NDAMaps map tiles using Javascript.

Description​

The NDAMaps platform provides a set of map tiles that can be used to display maps on web applications. These map tiles are generated from our tiles data and are available in different styles and formats. You can use these map tiles to create interactive maps, visualize geographic data, and build location-based applications.

Usage​

To display NDAMaps map tiles on your web application, you need to include the following code snippet in your HTML file. This code snippet creates a map using the ndamap-gl library and adds a tile layer using the 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: [21.03024, 105.85237],
        zoom: 15,
        maplibreLogo: true
      });
    </script>
  </body>
</html>
info

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