vgrid-maplibre
DGGS Visualization on MapLibre GL JS
<!DOCTYPE html>
<html>
<head>
<title>vgrid-maplibre Demo</title>
<script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import H3Grid from "https://unpkg.com/vgrid-maplibre/H3/H3Grid.js";
const map = new maplibregl.Map({
container: 'map',
style: 'https://raw.githubusercontent.com/opengeohubs/vstyles/main/vstyles/sbr/eclipse/eclipse.json',
center: [0, 0],
zoom: 0
});
map.on('load', () => {
const h3Grid = new H3Grid(map, {
color: 'rgba(255, 0, 0, 1)',
width: 1.5,
redraw: 'move',
});
});
</script>
</body>
</html>
