techniq · techniq · Apr 7, 2026
diff --git a/.changeset/add-georaster-component.md b/.changeset/add-georaster-component.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat: New `GeoRaster` component for reprojecting raster imagery (e.g. NASA Blue Marble) onto any d3-geo projection via per-pixel inverse sampling on Canvas
diff --git a/docs/src/content/components/GeoRaster.md b/docs/src/content/components/GeoRaster.md
@@ -0,0 +1,18 @@
+---
+description: Geographic component which reprojects a raster image (such as NASA Blue Marble) onto any d3-geo projection using per-pixel inverse sampling.
+category: geo
+layers: [canvas]
+related: []
+---
+
+:::tip
+See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps.
+:::
+
+`GeoRaster` reprojects a source image onto the current chart's projection by inverse-sampling each destination pixel. It is intended for full-globe imagery distributed in the equirectangular (plate carrée) layout — such as [NASA Blue Marble](https://visibleearth.nasa.gov/collection/1484/blue-marble) or [Black Marble](https://blackmarble.gsfc.nasa.gov/) — but supports arbitrary source projections via the `sourceProjection` prop.
+
+Rendering is pure Canvas 2D (no WebGL). The image must be CORS-readable so its pixels can be sampled via `getImageData`.
+
+## Usage
+
+:example{ name="globe" showCode }
diff --git a/docs/src/examples/catalog/Chart.json b/docs/src/examples/catalog/Chart.json
@@ -2287,6 +2287,41 @@
       "lineNumber": 269,
       "line": "<Chart"
     },
+    {
+      "example": "globe",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/globe",
+      "lineNumber": 19,
+      "line": "<Chart"
+    },
+    {
+      "example": "planets",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/planets",
+      "lineNumber": 35,
+      "line": "<Chart"
+    },
+    {
+      "example": "projections",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/projections",
+      "lineNumber": 46,
+      "line": "<Chart"
+    },
+    {
+      "example": "textures",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/textures",
+      "lineNumber": 147,
+      "line": "<Chart"
+    },
+    {
+      "example": "tiles-globe",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/tiles-globe",
+      "lineNumber": 85,
+      "line": "<Chart"
+    },
     {
       "example": "draggable-globe",
       "component": "GeoSpline",
@@ -4031,5 +4066,5 @@
       "line": "<Chart {data} x=\"x\" y=\"y\" height={400}>"
     }
   ],
-  "updatedAt": "2026-04-03T20:08:34.621Z"
+  "updatedAt": "2026-04-07T04:17:10.420Z"
 }
diff --git a/docs/src/examples/catalog/GeoPath.json b/docs/src/examples/catalog/GeoPath.json
@@ -1289,6 +1289,62 @@
       "lineNumber": 301,
       "line": "<GeoPath"
     },
+    {
+      "example": "globe",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/globe",
+      "lineNumber": 41,
+      "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
+    },
+    {
+      "example": "globe",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/globe",
+      "lineNumber": 44,
+      "line": "<GeoPath geojson={feature} class=\"fill-none stroke-surface-content/40\" />"
+    },
+    {
+      "example": "planets",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/planets",
+      "lineNumber": 57,
+      "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/30\" />"
+    },
+    {
+      "example": "projections",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/projections",
+      "lineNumber": 58,
+      "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
+    },
+    {
+      "example": "projections",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/projections",
+      "lineNumber": 61,
+      "line": "<GeoPath geojson={feature} class=\"fill-none stroke-surface-content/40\" />"
+    },
+    {
+      "example": "textures",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/textures",
+      "lineNumber": 171,
+      "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
+    },
+    {
+      "example": "tiles-globe",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/tiles-globe",
+      "lineNumber": 109,
+      "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
+    },
+    {
+      "example": "tiles-globe",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/tiles-globe",
+      "lineNumber": 112,
+      "line": "<GeoPath geojson={feature} class=\"fill-none stroke-surface-content/30\" />"
+    },
     {
       "example": "draggable-globe",
       "component": "GeoSpline",
@@ -1423,5 +1479,5 @@
       "line": "<GeoPath"
     }
   ],
-  "updatedAt": "2026-04-03T15:31:24.682Z"
+  "updatedAt": "2026-04-07T04:17:10.907Z"
 }
diff --git a/docs/src/examples/catalog/GeoRaster.json b/docs/src/examples/catalog/GeoRaster.json
@@ -0,0 +1,203 @@
+{
+  "component": "GeoRaster",
+  "examples": [
+    {
+      "name": "globe",
+      "title": "globe",
+      "path": "/docs/components/GeoRaster/globe",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 19,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 37,
+          "line": "<Layer type=\"canvas\">"
+        },
+        {
+          "component": "GeoRaster",
+          "lineNumber": 38,
+          "line": "<GeoRaster image={imageUrl} interpolate=\"bilinear\" />"
+        },
+        {
+          "component": "GeoPath",
+          "lineNumber": 41,
+          "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
+        },
+        {
+          "component": "Graticule",
+          "lineNumber": 42,
+          "line": "<Graticule class=\"stroke-surface-content/15\" />"
+        }
+      ]
+    },
+    {
+      "name": "planets",
+      "title": "planets",
+      "path": "/docs/components/GeoRaster/planets",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 35,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 53,
+          "line": "<Layer type=\"canvas\">"
+        },
+        {
+          "component": "GeoRaster",
+          "lineNumber": 54,
+          "line": "<GeoRaster image={planet} interpolate=\"bilinear\" />"
+        },
+        {
+          "component": "GeoPath",
+          "lineNumber": 57,
+          "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/30\" />"
+        },
+        {
+          "component": "Graticule",
+          "lineNumber": 58,
+          "line": "<Graticule class=\"stroke-surface-content/10\" />"
+        }
+      ]
+    },
+    {
+      "name": "projections",
+      "title": "projections",
+      "path": "/docs/components/GeoRaster/projections",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 46,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 54,
+          "line": "<Layer type=\"canvas\">"
+        },
+        {
+          "component": "GeoRaster",
+          "lineNumber": 55,
+          "line": "<GeoRaster image=\"/images/blue-marble.jpg\" interpolate=\"bilinear\" />"
+        },
+        {
+          "component": "GeoPath",
+          "lineNumber": 58,
+          "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
+        },
+        {
+          "component": "Graticule",
+          "lineNumber": 59,
+          "line": "<Graticule class=\"stroke-surface-content/15\" />"
+        }
+      ]
+    },
+    {
+      "name": "textures",
+      "title": "textures",
+      "path": "/docs/components/GeoRaster/textures",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 147,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 165,
+          "line": "<Layer type=\"canvas\">"
+        },
+        {
+          "component": "GeoRaster",
+          "lineNumber": 167,
+          "line": "<GeoRaster image={texture} interpolate=\"bilinear\" />"
+        },
+        {
+          "component": "GeoPath",
+          "lineNumber": 171,
+          "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
+        },
+        {
+          "component": "Graticule",
+          "lineNumber": 172,
+          "line": "<Graticule class=\"stroke-surface-content/10\" />"
+        }
+      ]
+    },
+    {
+      "name": "tiles-globe",
+      "title": "tiles globe",
+      "path": "/docs/components/GeoRaster/tiles-globe",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 85,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 103,
+          "line": "<Layer type=\"canvas\">"
+        },
+        {
+          "component": "GeoRaster",
+          "lineNumber": 105,
+          "line": "<GeoRaster image={mosaic} {sourceProjection} interpolate=\"bilinear\" />"
+        },
+        {
+          "component": "GeoPath",
+          "lineNumber": 109,
+          "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
+        },
+        {
+          "component": "Graticule",
+          "lineNumber": 110,
+          "line": "<Graticule class=\"stroke-surface-content/15\" />"
+        }
+      ]
+    }
+  ],
+  "usage": [
+    {
+      "example": "globe",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/globe",
+      "lineNumber": 38,
+      "line": "<GeoRaster image={imageUrl} interpolate=\"bilinear\" />"
+    },
+    {
+      "example": "planets",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/planets",
+      "lineNumber": 54,
+      "line": "<GeoRaster image={planet} interpolate=\"bilinear\" />"
+    },
+    {
+      "example": "projections",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/projections",
+      "lineNumber": 55,
+      "line": "<GeoRaster image=\"/images/blue-marble.jpg\" interpolate=\"bilinear\" />"
+    },
+    {
+      "example": "textures",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/textures",
+      "lineNumber": 167,
+      "line": "<GeoRaster image={texture} interpolate=\"bilinear\" />"
+    },
+    {
+      "example": "tiles-globe",
+      "component": "GeoRaster",
+      "path": "/docs/components/GeoRaster/tiles-globe",
+      "lineNumber": 105,
+      "line": "<GeoRaster image={mosaic} {sourceProjection} interpolate=\"bilinear\" />"
+    }
+  ],
+  "updatedAt": "2026-04-07T04:17:10.973Z"
+}