Javascript
Display openmap.vn map tiles using Javascript.
Description
The Openmap.vn 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.
When using that, just use our Enterprise Dashboard or guild API Key to create your API Key try for free!
Usage
To display Openmap.vn 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 @openmapvn/openmapvn-gl library and adds a tile layer using the 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: [21.03024, 105.85237],
zoom: 15,
maplibreLogo: true
});
</script>
</body>
</html>
More information about the @openmapvn/openmapvn-gl library can be found in the Openmap.vn GL JS documentation.