vgrid-maplibre

v1.1.13

Published

6 days ago

DGGS Visualization for MapLibre and Mapbox GL JS

downloads total

Basic usage (for H3 as an example)

<!DOCTYPE html>
<html>

<head>
    <title>vgrid-maplibre Demo</title>
    <script src="https://unpkg.com/maplibre-gl@lates/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@latest/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/opengeoshub/vstyles/main/vstyles/omt/fiord/fiord.json',
            center: [0, 0],
            zoom: 0
        });

        map.on('load', () => {
            const h3Grid = new H3Grid(map, {
                color: 'rgba(255, 0, 0, 1)',
                width: 1.5,
                redraw: 'moveend',
            });
        });
    </script>
</body>

</html>

DGGAL

// Initialize a DGGAL grid by specifying the desired DGGS type
// Available options include:
// 'GNOSISGlobalGrid', 'ISEA4R', 'ISEA9R', 'ISEA3H', 'ISEA7H', 'ISEA7H_Z7',
// 'IVEA4R', 'IVEA9R', 'IVEA3H', 'IVEA7H', 'IVEA7H_Z7',
// 'RTEA4R', 'RTEA9R', 'RTEA3H', 'RTEA7H', 'RTEA7H_Z7',
// 'HEALPix', 'rHEALPix'

const dggalGrid = new DGGALGrid(
    <dggs_type>,
    map,
    {
        color: 'rgba(255, 0, 0, 1)',
        width: 1.5,
        redraw: 'moveend',
    }
);

DGGAL IVEA7H_Z7 in MapLibre

QTM

QTM in MapLibre

OLC (OpenLocationCode/ Google Pluscode)

OLC in MapLibre

Geohash

Geohash in MapLibre

GEOREF

GEOREF in MapLibre

MGRS

MGRS in MapLibre

Vgrid Tilecode

Vgrid Tilecode in MapLibre

Maidenhead

Maidenhead in MapLibre

GARS

GARS in MapLibre

India DIGIPIN

India DIGIPIN Demo

DGGS Comparisions (contributed by akre54)

Grid System Name | Authors/Origin | Primary Cell Shape | Hierarchical Structure/Resolution | Equal Area vs. Uniform Perception/Distortion Characteristics | Key Intended Uses/Applications -- | -- | -- | -- | -- | -- H3 | Uber | Hexagon (with 12 pentagons at base) | 16 levels (0-15), Aperture 7 (approximate subdivision), 64-bit integer IDs | Prioritizes uniform perception, reduced subjective distortion, better adjacency properties; approximate area preservation | Large-scale geospatial analytics, ride-sharing, logistics, location-based services, nearest-neighbor search, clustering, spatial joins, data aggregation, gradient smoothing S2 | Google | Quadrilateral | 30 levels (0-30), Aperture 4 (exact subdivision), 64-bit integer IDs, Hilbert curve-based | Prioritizes exact containment; cells can appear distorted at higher latitudes on planar projections | Spherical geometry manipulation, spatial indexing, approximating regions, big data systems A5 | Felix Palmer | Pentagon | Hierarchical (details on levels/aperture not specified in snippets) | Targets "exactly equal areas" and "higher accuracy and lower distortion" | Representing points, lines, polygons in unified cell format; combining datasets, aggregating data, direct global data comparison QTM | Various researchers (e.g., Goodchild, Lee & Samet) | Triangle | Hierarchical, based on octahedron subdivision; various encoding schemes (e.g., Goodchild, LS, Quaternary) | Moderate geometric distortion, distortion larger than icosahedra-based systems | Global spatial data extraction, multi-resolution management, spatial hierarchical indexing, global navigation, global DEM generation, remote sensing data organization OLC (OpenLocationCode / Google Pluscode) | Google's Zürich engineering office (2014) | Rectangular | Hierarchical (longer codes = smaller areas), base 20 encoding, "+" delimiter after 8 digits, can be shortened | Cells are non-equal area; block width decreases with distance from equator | Concise, shareable address replacement, especially where formal street addresses are lacking; offline encoding/decoding Geohash | Gustavo Niemeyer (2008) | Rectangular | Hierarchical (precision by string length), Z-order curve, base 4 spatial index, truncation | Cells are non-equal area; physical size changes with latitude; lexicographical similarity does not guarantee spatial proximity | Unique identifier, representing point data in databases, quick-and-dirty proximity search GEOREF (World Geographic Reference System) | US military/aeronautical (post-WWII) | Rectangular | Hierarchical (15°, 1°, 1-minute, 0.1-minute, 0.01-minute quadrangles) | Based on latitude/longitude, thus non-equal area; simpler notation for air navigation | Aeronautical charts, air navigation, military/inter-service applications (rarely seen today) MGRS (Military Grid Reference System) | NATO militaries | Square | Hierarchical (Grid Zone Designator, 100,000-meter square ID, numerical location from 10km down to 1m) | Derived from UTM/UPS, thus non-equal area; defines square grid areas, truncation for precision changes | Geo-referencing, position reporting, situational awareness for land operations (US Armed Forces, NATO); area-centric counterpart to point-centric systems Tilecode | (Ambiguous - looks to be based on {Z, X, Y} tiles) | Rectangular | Hierarchical (quad tree) | Based on latitude/longitude, thus non-equal area; small error in distance calculation assuming spherical Earth especially at higher latitudes, where areas appear stretched. The physical size of a pixel or a tile changes with latitude | Most commonly used in Mapbox and other web-based maps Maidenhead Locator System | John Morris G4ANB (1980) | Rectangular | Hierarchical (fields, squares, subsquares, extended squares), alternating letters/digits, varying bases | Based on latitude/longitude, thus non-equal area; small error in distance calculation assuming spherical Earth | Amateur radio operators for succinct geographic coordinates, contests, communication over air (voice, Morse code) GARS (Global Area Reference System) | National Geospatial-Intelligence Agency (NGA) | Rectangular | Hierarchical (30-minute cells, 15-minute quadrants, 5-minute areas) | Based on latitude/longitude, thus non-equal area; cell size diminishes toward poles | US DoD and emergency services for joint force situational awareness, air-to-ground coordination, search and rescue (SAR), disaster relief, battle-space management

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vgrid-maplibre on NPM

Vgrid Home

vgrid-maplibre can be used with both MapLibre and Mapbox GL JS to interactively visualize a wide range of DGGS, including geodesic DGGS such as H3, S2, A5, DGGAL, and QTM, as well as graticule-based DGGS like OLC, Geohash, GEOREF, MGRS, Tilecode (by Vigrid), Maidenhead, GARS, and India DIGIPIN.