vgrid-maplibre
DGGS Visualization in MapLibre and Mapbox GL JS
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.
<!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>
// 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',
}
);
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 | 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 |