vgrid-maplibre

<p align="center"> <strong >vgrid-maplibre </strong> <br> <b><i>DGGS Visualization on MapLibre GL JS</i><b> </p> <p align="center"> <img src="https://raw.githubusercontent.com/opengeoshub/vgridtools/main/images/readme/dggs.png"> </p> [![npm package](https://img.shields.io/npm/v/vgrid-maplibre)](https://www.npmjs.com/package/vgrid-maplibre) ![downloads](https://img.shields.io/npm/dm/vgrid-maplibre) ![total](https://img.shields.io/npm/dt/vgrid-maplibre) [![image](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ### [vgrid-maplibre on NPM](https://www.npmjs.com/package/vgrid-maplibre) ### [Vgrid Home](https://vgrid.vn) ### Basic usage (for H3 as an example) ```html <!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> ``` ### H3 [H3 Demo](https://gishub.vn/pages/dggs/h3/) ![image](https://github.com/user-attachments/assets/00d27bea-523b-4d89-abf2-a1809dcffd12) ### S2 [S2 Demo](https://gishub.vn/pages/dggs/s2/) ![image](https://github.com/user-attachments/assets/eeff51bf-16f0-4f45-ba2e-6b2fa6ddcb45) ### A5 [A5 Demo](https://gishub.vn/pages/dggs/a5/) ![image](https://github.com/user-attachments/assets/c744df93-4374-4903-a47a-0ff752c744f6) ### QTM [QTM Demo](https://gishub.vn/pages/dggs/qtm/) ![image](https://github.com/user-attachments/assets/dd1fe259-d7f4-4bc7-8641-72ed433e65cf) ### OLC (OpenLocationCode/ Google Pluscode) [OLC Demo](https://gishub.vn/pages/dggs/olc/) ![image](https://github.com/user-attachments/assets/6f7e6da5-519f-4071-bacf-a4f328a0da86) ### Geohash [Geohash Demo](https://gishub.vn/pages/dggs/geohash/) ![image](https://github.com/user-attachments/assets/7d3b320b-e650-407d-9605-e162dae1a6ca) ### GEOREF [GEOREF Demo](https://gishub.vn/pages/dggs/georef/) ![image](https://github.com/user-attachments/assets/c4ee4c02-e531-48f3-b618-5c3d7b4c9d00) ### MGRS [MGRS Demo](https://gishub.vn/pages/dggs/mgrs/) ![image](https://github.com/user-attachments/assets/e9b9cd46-4690-4f33-8bff-7dc32d154f78) ### Tilecode [Tilecode Demo](https://gishub.vn/pages/dggs/tilecode/) ![image](https://github.com/user-attachments/assets/31aa45c1-df0f-4463-a3a1-5990c309aadd) ### Maidenhead [Maidenhead Demo](https://gishub.vn/pages/dggs/maidenhead/) ![image](https://github.com/user-attachments/assets/0015c444-17ca-4a4f-81bf-bd67197506d5) ### GARS [GARS Demo](https://gishub.vn/pages/dggs/gars/)