feat(plugins): add an H3 hexagonal grid plugin (#1511)

* feat(plugins): add an H3 hexagonal grid plugin

Renders the H3 grid over the current viewport at a chosen resolution and
lets users identify a cell to inspect its ID, parent, children, neighbors
and center, then export the grid or selection as GeoJSON or CSV.

* Address CodeRabbit review feedback

- Split paint/layout updates out of refresh() so style-only setting changes
  no longer rebuild the whole viewport grid; only a resolution change
  regenerates geometry.
- Drop empty clipped rings when splitting a boundary at the antimeridian and
  fall back to a Polygon when one side clips to nothing, so the export never
  emits a MultiPolygon containing an empty linear ring.
- Switch the color pickers from `input` to `change` so dragging does not
  destroy the picker via the panel re-render.
- Coalesce moveend-driven refreshes through requestAnimationFrame so inertial
  pans do not queue back-to-back grid rebuilds.
- Assert each split ring is non-empty and closed in the dateline test.

Author: giswqs

apps/geolibre-desktop/src/components/layout/TopToolbar.tsx

@@ -22,6 +22,7 @@ import {
   setAnnotationLabels,
   setBasemapControlLabels,
   setGraticuleLabels,
+  setH3Labels,
   setMapillaryLabels,
   setEarthdataGisLabels,
   setOpenAerialMapLabels,
@@ -522,6 +523,37 @@ export function TopToolbar({
       labelColor: t("graticule.labelColor"),
       labelSize: t("graticule.labelSize"),
     });
+    setH3Labels({
+      title: t("h3Plugin.title"),
+      getTitle: () => i18n.t("h3Plugin.title"),
+      controlTitle: t("h3Plugin.controlTitle"),
+      resolution: t("h3Plugin.resolution"),
+      cellCount: (count) => t("h3Plugin.cellCount", { count }),
+      tooManyCells: (limit) => t("h3Plugin.tooManyCells", { limit }),
+      fillColor: t("h3Plugin.fillColor"),
+      fillOpacity: t("h3Plugin.fillOpacity"),
+      lineColor: t("h3Plugin.lineColor"),
+      lineWidth: t("h3Plugin.lineWidth"),
+      showLabels: t("h3Plugin.showLabels"),
+      identifyHint: t("h3Plugin.identifyHint"),
+      selectedCell: t("h3Plugin.selectedCell"),
+      noSelection: t("h3Plugin.noSelection"),
+      copyId: t("h3Plugin.copyId"),
+      copied: t("h3Plugin.copied"),
+      parent: t("h3Plugin.parent"),
+      children: t("h3Plugin.children"),
+      neighbors: t("h3Plugin.neighbors"),
+      baseCell: t("h3Plugin.baseCell"),
+      center: t("h3Plugin.center"),
+      pentagon: t("h3Plugin.pentagon"),
+      yes: t("h3Plugin.yes"),
+      no: t("h3Plugin.no"),
+      zoomToCell: t("h3Plugin.zoomToCell"),
+      addAsLayer: t("h3Plugin.addAsLayer"),
+      exportGeoJson: t("h3Plugin.exportGeoJson"),
+      exportCsv: t("h3Plugin.exportCsv"),
+      includeNeighbors: t("h3Plugin.includeNeighbors"),
+    });
     setTimelapseLabels({
       title: t("timelapse.title"),
       provider: t("timelapse.provider"),

apps/geolibre-desktop/src/hooks/usePlugins.ts

@@ -41,6 +41,7 @@ import {
   maplibreOvertureMapsPlugin,
   queryOvertureFeatures,
   maplibreGraticulePlugin,
+  maplibreH3Plugin,
   maplibreCloudsPlugin,
   maplibrePrecipitationPlugin,
   maplibreMapillaryPlugin,
@@ -180,6 +181,7 @@ manager.registerAll([
   maplibreElevationProfilePlugin,
   maplibreSwipePlugin,
   maplibreGraticulePlugin,
+  maplibreH3Plugin,
   maplibreCloudsPlugin,
   maplibrePrecipitationPlugin,
   maplibreEffectsPlugin,

apps/geolibre-desktop/src/i18n/locales/en.json

@@ -2651,6 +2651,36 @@
     "labelColor": "Label color",
     "labelSize": "Label size"
   },
+  "h3Plugin": {
+    "title": "H3 Grid",
+    "controlTitle": "H3 grid settings",
+    "resolution": "Resolution",
+    "cellCount": "{{count}} cells in view",
+    "tooManyCells": "This view exceeds the {{limit}} cell limit. Zoom in or lower the resolution.",
+    "fillColor": "Fill color",
+    "fillOpacity": "Fill opacity",
+    "lineColor": "Outline color",
+    "lineWidth": "Outline width",
+    "showLabels": "Show cell IDs",
+    "identifyHint": "Click the map to identify an H3 cell.",
+    "selectedCell": "Selected cell",
+    "noSelection": "No cell selected",
+    "copyId": "Copy ID",
+    "copied": "Copied",
+    "parent": "Parent",
+    "children": "Children",
+    "neighbors": "Neighbors",
+    "baseCell": "Base cell",
+    "center": "Center",
+    "pentagon": "Pentagon",
+    "yes": "Yes",
+    "no": "No",
+    "zoomToCell": "Zoom to cell",
+    "addAsLayer": "Add grid as layer",
+    "exportGeoJson": "Export GeoJSON",
+    "exportCsv": "Export CSV",
+    "includeNeighbors": "Include selected cell neighbors"
+  },
   "timelapse": {
     "title": "Timelapse",
     "provider": "Imagery source",

package-lock.json

@@ -33,6 +33,7 @@
     "cog-tiler-wasm": "^0.3.1",
     "geotiff": "^3.0.5",
     "geotiff-geokeys-to-proj4": "^2024.4.13",
+    "h3-js": "^4.5.0",
     "h5wasm": "^0.10.3",
     "jspdf": "^4.2.1",
     "mapillary-js": "^4.1.2",

packages/plugins/package.json

@@ -473,6 +473,24 @@ export {
   type GraticuleLabelFormat,
   type GraticuleLabelEdges,
 } from "./plugins/maplibre-graticule";
+export {
+  maplibreH3Plugin,
+  H3_PLUGIN_ID,
+  H3_VIEWPORT_CELL_LIMIT,
+  DEFAULT_H3_GRID_SETTINGS,
+  DEFAULT_H3_LABELS,
+  getH3GridSettings,
+  setH3GridSettings,
+  setH3Labels,
+  normalizeH3GridSettings,
+  h3LabelMinZoom,
+  h3CellFeature,
+  h3GridForBounds,
+  h3BoundaryGeometry,
+  unwrapH3Boundary,
+  type H3GridSettings,
+  type H3Labels,
+} from "./plugins/maplibre-h3";
 export type { WeatherAnimationState, WeatherLayerController } from "./plugins/weather-layer";
 export {
   maplibreCloudsPlugin,