feat: Globe view mode WIP#3486
Open
igorDykhta wants to merge 3 commits into
Open
Conversation
Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces an experimental “Globe” view mode to kepler.gl, integrating deck.gl’s globe view/controller, adding globe-specific rendering layers (atmosphere/depth disk/basemap), and wiring new UI + state/actions to switch and configure globe rendering.
Changes:
- Add
MapViewMode(2D/3D/Globe) plus globe configuration into map state, actions, and updaters. - Add a new
@kepler.gl/deckgl-layers/globemodule (view + base/top layers, atmosphere, depth disk) and integrate it intoMapContainer. - Update UI to support view-mode selection and globe-layer configuration; adjust/selectively disable unsupported layers.
Reviewed changes
Copilot reviewed 37 out of 39 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Adds dependencies needed for globe layers (@deck.gl/mesh-layers, @math.gl/*). |
| src/utils/src/map-utils.ts | Uses deck.gl globe viewport when globe mode is enabled. |
| src/types/reducers.d.ts | Extends MapState typing with mapViewMode and globe config. |
| src/reducers/src/map-state.ts | Adds new map-state actions to reducer handler map. |
| src/reducers/src/map-state-updaters.ts | Adds initial globe state, view-mode updater, and globe config updater. |
| src/reducers/src/layer-utils.ts | Passes mapState into editor layer creation. |
| src/reducers/src/combined-updaters.ts | Updates globe config colors on basemap style changes when globe is enabled. |
| src/localization/src/translations/en.ts | Adds new i18n strings for globe UI controls. |
| src/layers/src/scenegraph-layer/scenegraph-layer.ts | Adjusts scenegraph orientation behavior in globe mode. |
| src/layers/src/line-layer/line-layer.ts | Adds globe-mode rendering path for lines using ArcLayer. |
| src/layers/src/heatmap-layer/heatmap-layer.ts | Disables heatmap rendering in globe mode. |
| src/layers/src/editor-layer/editor-layer.ts | Adds globe-related WebGL parameter tweaks for the editor overlay. |
| src/deckgl-layers/src/svg-icon-layer/scatterplot-icon-layer.ts | Injects shader uniform to adjust icon scaling for globe mode. |
| src/deckgl-layers/src/index.ts | Re-exports new globe module. |
| src/deckgl-layers/src/globe/index.ts | New: exports globe view/layers helpers. |
| src/deckgl-layers/src/globe/globe-view.ts | New: custom globe view/controller to restore zoom-to-cursor. |
| src/deckgl-layers/src/globe/globe-layers.ts | New: builds globe base/top layers and basemap color helpers. |
| src/deckgl-layers/src/globe/globe-depth-disk-layer.ts | New: depth-disk layer to prevent back-side rendering artifacts. |
| src/deckgl-layers/src/globe/atmosphere-layer.ts | New: atmosphere + terminator rendering layers. |
| src/deckgl-layers/src/column-layer/enhanced-column-layer.ts | Adds globe-specific scaling behavior via shader injection/uniform. |
| src/deckgl-layers/package.json | Adds globe-related deck.gl/math.gl dependencies. |
| src/constants/src/default-settings.ts | Adds MapViewMode, globe config defaults, and supported-layer flags. |
| src/components/src/types.ts | Threads mapState through side panel prop types. |
| src/components/src/side-panel/map-style-panel/globe-config-panel.tsx | New: globe configuration panel UI. |
| src/components/src/side-panel/map-manager.tsx | Shows globe config UI when globe mode is enabled; hides layer group selector. |
| src/components/src/side-panel/layer-panel/layer-panel.tsx | Adds globe-mode unsupported-layer warning tooltip. |
| src/components/src/side-panel/layer-panel/layer-panel-header.tsx | Allows warning to be a string for tooltip content. |
| src/components/src/side-panel/layer-panel/layer-list.tsx | Passes mapState through to layer panels. |
| src/components/src/side-panel/layer-panel/dataset-layer-section.tsx | Passes mapState down to layer list. |
| src/components/src/side-panel/layer-panel/dataset-layer-group.tsx | Passes mapState down to dataset layer section. |
| src/components/src/side-panel/layer-manager.tsx | Threads mapState to dataset/layer managers. |
| src/components/src/side-panel.tsx | Passes mapState into MapManager. |
| src/components/src/map/toggle-3d-button.tsx | Replaces 3D toggle with a view-mode toolbar (Top/3D/Globe). |
| src/components/src/map/map-control.tsx | Adds view-mode props passthrough to map controls. |
| src/components/src/map-container.tsx | Integrates globe view + globe base/top layers; adjusts DeckGL params for globe. |
| src/components/src/kepler-gl.tsx | Threads mapState into side panel selector output. |
| src/components/package.json | Adds @kepler.gl/deckgl-layers dependency for globe usage. |
| src/actions/src/map-state-actions.ts | Adds setMapViewMode and globeConfigChange actions. |
| src/actions/src/action-types.ts | Adds new action type constants for globe/view-mode. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+1109
to
+1111
| parameters: isGlobeMode | ||
| ? {cull: true, clearColor: [0.015, 0.035, 0.065, 1.0]} | ||
| : getLayerBlendingParameters(visState.layerBlending) |
Comment on lines
+1246
to
+1250
| // Defer state update to avoid React warning when deck.gl fires onViewStateChange | ||
| // synchronously during its render (e.g. when switching view types like MapView → GlobeView) | ||
| setTimeout(() => { | ||
| setInternalViewState(viewState, this.props.index); | ||
| }, 0); |
Comment on lines
+301
to
+307
| // Satellite tiles | ||
| config.basemap && | ||
| (isSatellite || isSatelliteStreet) && | ||
| new TileLayer({ | ||
| id: 'globe-satellite-tiles', | ||
| data: [ | ||
| `https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}@2x.png?access_token=${mapboxApiAccessToken}` |
Comment on lines
+292
to
+303
| new DeckArcLayer({ | ||
| ...defaultLayerProps, | ||
| ...this.getBrushingExtensionProps(interactionConfig, 'source_target'), | ||
| ...data, | ||
| ...layerProps, | ||
| id, | ||
| updateTriggers, | ||
| extensions: [...defaultLayerProps.extensions, brushingExtension], | ||
| parameters: {depthMask: false}, | ||
| getSourceColor: data.getColor, | ||
| widthUnits: 'pixels' as const | ||
| }), |
Comment on lines
+27
to
+31
| draw(opts) { | ||
| opts.uniforms = opts.uniforms || {}; | ||
| opts.uniforms.u_globeModeMod = (this.context.viewport as any).resolution ? -0.5 : 1; | ||
| super.draw(opts); | ||
| } |
Comment on lines
175
to
179
| getTentativeFillColor: LINE_STYLE.getTentativeFillColor, | ||
|
|
||
| parameters: {}, | ||
| parameters: {depthTest: mapState?.globe?.enabled ?? false}, | ||
| shadowEnabled: false, | ||
| _subLayerProps: { |
Comment on lines
+117
to
+143
| export type SetMapViewModeUpdaterAction = {payload: {mapViewMode: string}}; | ||
| /** | ||
| * Set map view mode (2D, 3D, or Globe) | ||
| * @memberof mapStateActions | ||
| * @param mapViewMode - One of MapViewMode values | ||
| * @public | ||
| */ | ||
| export const setMapViewMode: ( | ||
| mapViewMode: string | ||
| ) => Merge<SetMapViewModeUpdaterAction, {type: typeof ActionTypes.SET_MAP_VIEW_MODE}> = createAction( | ||
| ActionTypes.SET_MAP_VIEW_MODE, | ||
| (mapViewMode: string) => ({payload: {mapViewMode}}) | ||
| ); | ||
|
|
||
| export type GlobeConfigChangeUpdaterAction = {payload: Partial<Record<string, any>>}; | ||
| /** | ||
| * Update globe configuration | ||
| * @memberof mapStateActions | ||
| * @param config - Partial globe config to merge | ||
| * @public | ||
| */ | ||
| export const globeConfigChange: ( | ||
| config: Partial<Record<string, any>> | ||
| ) => Merge<GlobeConfigChangeUpdaterAction, {type: typeof ActionTypes.GLOBE_CONFIG_CHANGE}> = | ||
| createAction(ActionTypes.GLOBE_CONFIG_CHANGE, (config: Partial<Record<string, any>>) => ({ | ||
| payload: config | ||
| })); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.