Skip to main content

Simple-map

Initialize the map in the HTML element using @openmapvn/openmapvn-gl.

Description​

@openmapvn/openmapvn-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 Openmap.vn 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 @openmapvn/openmapvn-gl library and also add a layer with Openmap.vn map tiles.

<!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
      });
    </script>
  </body>
</html>
info

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