vgrid-maplibre
DGGS Visualization in MapLibre and Mapbox GL JS

[](https://www.npmjs.com/package/vgrid-maplibre)   [](https://opensource.org/licenses/MIT) ### [vgrid-maplibre on NPM](https://www.npmjs.com/package/vgrid-maplibre) ### [Vgrid Home](https://vgridhome.gishub.vn) #### 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. ### Basic usage (for H3 as an example) ```html

``` ### H3 [H3 in MapLibre](https://gishub.vn/pages/dggs/h3/)  [H3 in Mapbox](https://gishub.vn/pages/dggs/h3/mapbox.html)  ### S2 [S2 in MapLibre](https://gishub.vn/pages/dggs/s2/)  ### A5 [A5 in MapLibre](https://gishub.vn/pages/dggs/a5/)  ### DGGRID Referencs: [DGGRID](https://github.com/sahrk/DGGRID), [webdggrid](https://github.com/am2222/webDggrid) (see [Getting Started](https://am2222.github.io/webDggrid/getting-started.html)). ```javascript import DGGRIDGrid from "https://unpkg.com/vgrid-maplibre/DGGRID/DGGRID.js"; const dggridGrid = new DGGRIDGrid(map, { color: 'rgba(255, 0, 0, 1)', width: 1.5, redraw: 'moveend', // minResolution / maxResolution: optional top-level (defaults 0 and 21). // dggsConfig: optional; passed to Webdggrid.setDggs (poleCoordinates, azimuth, // topology, projection, aperture or apertureSequence). dggsConfig: { poleCoordinates: { lat: 0, lng: 0 }, azimuth: 0, topology: 'HEXAGON', // HEXAGON, TRIANGLE, DIAMOND projection: 'ISEA', aperture: 4, }, }); ``` [DGGRID ISEA4H in MapLibre](https://gishub.vn/pages/dggs/dggrid/) ### DGGAL ```javascript // 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' import DGGALGrid from "https://unpkg.com/vgrid-maplibre/DGGAL/DGGALGrid.js"; const dggalGrid = new DGGALGrid( , map, { color: 'rgba(255, 0, 0, 1)', width: 1.5, redraw: 'moveend', } ); ``` [DGGAL IVEA7H_Z7 in MapLibre](https://gishub.vn/pages/dggs/dggal/)  ### QTM [QTM in MapLibre](https://gishub.vn/pages/dggs/qtm/)  ### OLC (OpenLocationCode/ Google Pluscode) [OLC in MapLibre](https://gishub.vn/pages/dggs/olc/)  ### Geohash [Geohash in MapLibre](https://gishub.vn/pages/dggs/geohash/)  ### GEOREF [GEOREF in MapLibre](https://gishub.vn/pages/dggs/georef/)  ### MGRS [MGRS in MapLibre](https://gishub.vn/pages/dggs/mgrs/)  ### Vgrid Tilecode [Vgrid Tilecode in MapLibre](https://gishub.vn/pages/dggs/tilecode/)  ### Maidenhead [Maidenhead in MapLibre](https://gishub.vn/pages/dggs/maidenhead/)  ### GARS [GARS in MapLibre](https://gishub.vn/pages/dggs/gars/)  ### India DIGIPIN [India DIGIPIN Demo](https://gishub.vn/pages/dggs/digipin/)  ### DGGS Comparisions (contributed by [akre54](https://github.com/akre54)) Grid System Name | Authors/Origin | Primary Cell Shape | Hierarchical Structure/Resolution | Equal Area vs. Uniform Perception/Distortion Characteristics | Key Intended Uses/Applications -- | -- | -- | -- | -- | -- [H3](https://h3geo.org/) | 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](http://s2geometry.io/) | 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](https://a5geo.org) | 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](https://ntrs.nasa.gov/citations/20190033822) | 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)](https://en.wikipedia.org/wiki/Open_Location_Code) | 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](https://en.wikipedia.org/wiki/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)](https://en.wikipedia.org/wiki/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)](https://en.wikipedia.org/wiki/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](https://en.wikipedia.org/wiki/Tiled_web_map)) | 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](https://en.wikipedia.org/wiki/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)](https://en.wikipedia.org/wiki/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