Skip to content

opengeoshub/vgridJS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

65 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

VgridJS
DGGS Visualization on MapLibre GL JS

npm package downloads total image

Basic Usage (for H3 as an example)

<!DOCTYPE html>
<html>

<head>
    <title>VgridJS Demo</title>
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/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/vgridjs/H3/H3Grid.js";
        const map = new maplibregl.Map({
            container: 'map',
            style: 'https://raw.githubusercontent.com/thangqd/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>

H3

View H3 Demo

image

S2

View S2 Demo

image

A5

View A5 Demo

image

QTM

View QTM Demo

image

OLC (OpenLocationCode/ Google Pluscode)

View OLC Demo

image

Geohash

View Geohash Demo

image

GEOREF

View GEOREF Demo

image

MGRS

View MGRS Demo

image

Tilecode

View Tilecode Demo

image

Maidenhead

View Maidenhead Demo

image

GARS

View GARS Demo

image