Skip to content

Commit c33b74c

Browse files
techniqtechniq
authored
GeoRaster component (#815)
* 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 * fix: Default geo projection `translate` to container center when `translate` and `fitGeojson` are not specified, instead of using d3-geo's fixed default (`[480, 250]`) * Update catalog and screenshots. Add GeoRaster examples to frontpage. * Add spinning to planet example
1 parent 9bef7ac commit c33b74c

57 files changed

Lines changed: 1285 additions & 7 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/add-georaster-component.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'layerchart': minor
3+
---
4+
5+
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

‎.changeset/geo-default-translate-center.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'layerchart': patch
3+
---
4+
5+
fix: Default geo projection `translate` to container center when `translate` and `fitGeojson` are not specified, instead of using d3-geo's fixed default (`[480, 250]`)

‎docs/src/content/components/GeoRaster.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
description: Geographic component which reprojects a raster image (such as NASA Blue Marble) onto any d3-geo projection using per-pixel inverse sampling.
3+
category: geo
4+
layers: [canvas]
5+
related: []
6+
---
7+
8+
:::tip
9+
See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps.
10+
:::
11+
12+
`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.
13+
14+
Rendering is pure Canvas 2D (no WebGL). The image must be CORS-readable so its pixels can be sampled via `getImageData`.
15+
16+
## Usage
17+
18+
:example{ name="globe" showCode }

‎docs/src/examples/catalog/Chart.json‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2287,6 +2287,41 @@
22872287
"lineNumber": 269,
22882288
"line": "<Chart"
22892289
},
2290+
{
2291+
"example": "globe",
2292+
"component": "GeoRaster",
2293+
"path": "/docs/components/GeoRaster/globe",
2294+
"lineNumber": 19,
2295+
"line": "<Chart"
2296+
},
2297+
{
2298+
"example": "planets",
2299+
"component": "GeoRaster",
2300+
"path": "/docs/components/GeoRaster/planets",
2301+
"lineNumber": 70,
2302+
"line": "<Chart"
2303+
},
2304+
{
2305+
"example": "projections",
2306+
"component": "GeoRaster",
2307+
"path": "/docs/components/GeoRaster/projections",
2308+
"lineNumber": 46,
2309+
"line": "<Chart"
2310+
},
2311+
{
2312+
"example": "textures",
2313+
"component": "GeoRaster",
2314+
"path": "/docs/components/GeoRaster/textures",
2315+
"lineNumber": 147,
2316+
"line": "<Chart"
2317+
},
2318+
{
2319+
"example": "tiles-globe",
2320+
"component": "GeoRaster",
2321+
"path": "/docs/components/GeoRaster/tiles-globe",
2322+
"lineNumber": 85,
2323+
"line": "<Chart"
2324+
},
22902325
{
22912326
"example": "draggable-globe",
22922327
"component": "GeoSpline",
@@ -4031,5 +4066,5 @@
40314066
"line": "<Chart {data} x=\"x\" y=\"y\" height={400}>"
40324067
}
40334068
],
4034-
"updatedAt": "2026-04-03T20:08:34.621Z"
4069+
"updatedAt": "2026-04-07T16:36:35.950Z"
40354070
}

‎docs/src/examples/catalog/GeoPath.json‎

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1289,6 +1289,62 @@
12891289
"lineNumber": 301,
12901290
"line": "<GeoPath"
12911291
},
1292+
{
1293+
"example": "globe",
1294+
"component": "GeoRaster",
1295+
"path": "/docs/components/GeoRaster/globe",
1296+
"lineNumber": 41,
1297+
"line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
1298+
},
1299+
{
1300+
"example": "globe",
1301+
"component": "GeoRaster",
1302+
"path": "/docs/components/GeoRaster/globe",
1303+
"lineNumber": 44,
1304+
"line": "<GeoPath geojson={feature} class=\"fill-none stroke-surface-content/40\" />"
1305+
},
1306+
{
1307+
"example": "planets",
1308+
"component": "GeoRaster",
1309+
"path": "/docs/components/GeoRaster/planets",
1310+
"lineNumber": 94,
1311+
"line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/30\" />"
1312+
},
1313+
{
1314+
"example": "projections",
1315+
"component": "GeoRaster",
1316+
"path": "/docs/components/GeoRaster/projections",
1317+
"lineNumber": 58,
1318+
"line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
1319+
},
1320+
{
1321+
"example": "projections",
1322+
"component": "GeoRaster",
1323+
"path": "/docs/components/GeoRaster/projections",
1324+
"lineNumber": 61,
1325+
"line": "<GeoPath geojson={feature} class=\"fill-none stroke-surface-content/40\" />"
1326+
},
1327+
{
1328+
"example": "textures",
1329+
"component": "GeoRaster",
1330+
"path": "/docs/components/GeoRaster/textures",
1331+
"lineNumber": 171,
1332+
"line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
1333+
},
1334+
{
1335+
"example": "tiles-globe",
1336+
"component": "GeoRaster",
1337+
"path": "/docs/components/GeoRaster/tiles-globe",
1338+
"lineNumber": 109,
1339+
"line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
1340+
},
1341+
{
1342+
"example": "tiles-globe",
1343+
"component": "GeoRaster",
1344+
"path": "/docs/components/GeoRaster/tiles-globe",
1345+
"lineNumber": 112,
1346+
"line": "<GeoPath geojson={feature} class=\"fill-none stroke-surface-content/30\" />"
1347+
},
12921348
{
12931349
"example": "draggable-globe",
12941350
"component": "GeoSpline",
@@ -1423,5 +1479,5 @@
14231479
"line": "<GeoPath"
14241480
}
14251481
],
1426-
"updatedAt": "2026-04-03T15:31:24.682Z"
1482+
"updatedAt": "2026-04-07T16:36:36.526Z"
14271483
}

‎docs/src/examples/catalog/GeoRaster.json‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
{
2+
"component": "GeoRaster",
3+
"examples": [
4+
{
5+
"name": "globe",
6+
"title": "globe",
7+
"path": "/docs/components/GeoRaster/globe",
8+
"components": [
9+
{
10+
"component": "Chart",
11+
"lineNumber": 19,
12+
"line": "<Chart"
13+
},
14+
{
15+
"component": "Layer",
16+
"lineNumber": 37,
17+
"line": "<Layer type=\"canvas\">"
18+
},
19+
{
20+
"component": "GeoRaster",
21+
"lineNumber": 38,
22+
"line": "<GeoRaster image={imageUrl} interpolate=\"bilinear\" />"
23+
},
24+
{
25+
"component": "GeoPath",
26+
"lineNumber": 41,
27+
"line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
28+
},
29+
{
30+
"component": "Graticule",
31+
"lineNumber": 42,
32+
"line": "<Graticule class=\"stroke-surface-content/15\" />"
33+
}
34+
]
35+
},
36+
{
37+
"name": "planets",
38+
"title": "planets",
39+
"path": "/docs/components/GeoRaster/planets",
40+
"components": [
41+
{
42+
"component": "Chart",
43+
"lineNumber": 70,
44+
"line": "<Chart"
45+
},
46+
{
47+
"component": "Layer",
48+
"lineNumber": 90,
49+
"line": "<Layer type=\"canvas\">"
50+
},
51+
{
52+
"component": "GeoRaster",
53+
"lineNumber": 91,
54+
"line": "<GeoRaster image={planet} interpolate=\"bilinear\" />"
55+
},
56+
{
57+
"component": "GeoPath",
58+
"lineNumber": 94,
59+
"line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/30\" />"
60+
},
61+
{
62+
"component": "Graticule",
63+
"lineNumber": 95,
64+
"line": "<Graticule class=\"stroke-surface-content/10\" />"
65+
}
66+
]
67+
},
68+
{
69+
"name": "projections",
70+
"title": "projections",
71+
"path": "/docs/components/GeoRaster/projections",
72+
"components": [
73+
{
74+
"component": "Chart",
75+
"lineNumber": 46,
76+
"line": "<Chart"
77+
},
78+
{
79+
"component": "Layer",
80+
"lineNumber": 54,
81+
"line": "<Layer type=\"canvas\">"
82+
},
83+
{
84+
"component": "GeoRaster",
85+
"lineNumber": 55,
86+
"line": "<GeoRaster image=\"/images/blue-marble.jpg\" interpolate=\"bilinear\" />"
87+
},
88+
{
89+
"component": "GeoPath",
90+
"lineNumber": 58,
91+
"line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
92+
},
93+
{
94+
"component": "Graticule",
95+
"lineNumber": 59,
96+
"line": "<Graticule class=\"stroke-surface-content/15\" />"
97+
}
98+
]
99+
},
100+
{
101+
"name": "textures",
102+
"title": "textures",
103+
"path": "/docs/components/GeoRaster/textures",
104+
"components": [
105+
{
106+
"component": "Chart",
107+
"lineNumber": 147,
108+
"line": "<Chart"
109+
},
110+
{
111+
"component": "Layer",
112+
"lineNumber": 165,
113+
"line": "<Layer type=\"canvas\">"
114+
},
115+
{
116+
"component": "GeoRaster",
117+
"lineNumber": 167,
118+
"line": "<GeoRaster image={texture} interpolate=\"bilinear\" />"
119+
},
120+
{
121+
"component": "GeoPath",
122+
"lineNumber": 171,
123+
"line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
124+
},
125+
{
126+
"component": "Graticule",
127+
"lineNumber": 172,
128+
"line": "<Graticule class=\"stroke-surface-content/10\" />"
129+
}
130+
]
131+
},
132+
{
133+
"name": "tiles-globe",
134+
"title": "tiles globe",
135+
"path": "/docs/components/GeoRaster/tiles-globe",
136+
"components": [
137+
{
138+
"component": "Chart",
139+
"lineNumber": 85,
140+
"line": "<Chart"
141+
},
142+
{
143+
"component": "Layer",
144+
"lineNumber": 103,
145+
"line": "<Layer type=\"canvas\">"
146+
},
147+
{
148+
"component": "GeoRaster",
149+
"lineNumber": 105,
150+
"line": "<GeoRaster image={mosaic} {sourceProjection} interpolate=\"bilinear\" />"
151+
},
152+
{
153+
"component": "GeoPath",
154+
"lineNumber": 109,
155+
"line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-none stroke-surface-content/40\" />"
156+
},
157+
{
158+
"component": "Graticule",
159+
"lineNumber": 110,
160+
"line": "<Graticule class=\"stroke-surface-content/15\" />"
161+
}
162+
]
163+
}
164+
],
165+
"usage": [
166+
{
167+
"example": "globe",
168+
"component": "GeoRaster",
169+
"path": "/docs/components/GeoRaster/globe",
170+
"lineNumber": 38,
171+
"line": "<GeoRaster image={imageUrl} interpolate=\"bilinear\" />"
172+
},
173+
{
174+
"example": "planets",
175+
"component": "GeoRaster",
176+
"path": "/docs/components/GeoRaster/planets",
177+
"lineNumber": 91,
178+
"line": "<GeoRaster image={planet} interpolate=\"bilinear\" />"
179+
},
180+
{
181+
"example": "projections",
182+
"component": "GeoRaster",
183+
"path": "/docs/components/GeoRaster/projections",
184+
"lineNumber": 55,
185+
"line": "<GeoRaster image=\"/images/blue-marble.jpg\" interpolate=\"bilinear\" />"
186+
},
187+
{
188+
"example": "textures",
189+
"component": "GeoRaster",
190+
"path": "/docs/components/GeoRaster/textures",
191+
"lineNumber": 167,
192+
"line": "<GeoRaster image={texture} interpolate=\"bilinear\" />"
193+
},
194+
{
195+
"example": "tiles-globe",
196+
"component": "GeoRaster",
197+
"path": "/docs/components/GeoRaster/tiles-globe",
198+
"lineNumber": 105,
199+
"line": "<GeoRaster image={mosaic} {sourceProjection} interpolate=\"bilinear\" />"
200+
}
201+
],
202+
"updatedAt": "2026-04-07T16:36:36.642Z"
203+
}

0 commit comments

Comments
 (0)