public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update geomap panel

Browse Source
This commit is contained in:
Drew Slobodnjak
2026-01-13 08:21:53 -08:00
parent e4b59d96df
commit e9227885ae
1 changed files with 44 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/panel/geomap/GeomapPanel.tsx
+44 -33
View File
@@ -128,8 +128,11 @@ export class GeomapPanel extends Component<Props, State> {
// Check for resize
if (this.props.height !== nextProps.height || this.props.width !== nextProps.width) {
this.map.updateSize();
if (this.props.options?.view?.dashboardVariable) {
this.updateGeoVariables(this.map.getView());
// update dashboard variable if enabled
const options = this.props.options;
if (options.view.dashboardVariable) {
const view = this.map.getView();
this.updateGeoVariables(view, options);
}
}
@@ -233,6 +236,28 @@ export class GeomapPanel extends Component<Props, State> {
this.setState({ legends: this.getLegends() });
}
// view listerner handler, used to unregister when view changes
private viewListernerKey: EventsKey | null = null;
// updateGeoVariables debounce timeout
private timeoutId: NodeJS.Timeout | null = null; // for debounce
// Updates the dashboard variable `mapViewData` with the view extent value.
// Use a debounce strategy to wait the user stop dragging or zooming the map.
updateGeoVariables = (view: View, options: Options) => {
const bounds = view.calculateExtent();
const bounds4326 = transformExtent(bounds, 'EPSG:3857', 'EPSG:4326');
if (this.timeoutId) {
clearTimeout(this.timeoutId);
}
this.timeoutId = setTimeout(() => {
if (options.controls.showDebug) {
console.log('GeomapPanel.updateGeoVariables', bounds4326);
}
locationService.partial({ 'var-mapViewData': `${bounds4326}` }, true);
}, 500);
};
initMapAsync = async (div: HTMLDivElement | null) => {
if (!div) {
// Do not initialize new map or dispose old map
@@ -274,7 +299,9 @@ export class GeomapPanel extends Component<Props, State> {
}
this.layers = layers;
this.map = map; // redundant
this.initViewExtent(map.getView(), options.view);
const view = map.getView();
const viewConfig = options.view;
this.initViewExtent(view, viewConfig);
this.mouseWheelZoom = new MouseWheelZoom();
this.map?.addInteraction(this.mouseWheelZoom);
@@ -284,6 +311,20 @@ export class GeomapPanel extends Component<Props, State> {
notifyPanelEditor(this, layers, layers.length - 1);
this.setState({ legends: this.getLegends() });
// register view listener to update dashboard variable if enabled
if (viewConfig.dashboardVariable) {
if (options.controls.showDebug) {
console.log('Geomap.initMapAsync: register view listener', view);
}
if (this.viewListernerKey != null) {
view.un('change', this.viewListernerKey.listener);
}
this.viewListernerKey = view.on('change', () => {
this.updateGeoVariables(view, options);
});
this.updateGeoVariables(view, options);
}
};
clearTooltip = () => {
@@ -337,37 +378,7 @@ export class GeomapPanel extends Component<Props, State> {
return view;
};
/**
* Updates the dashboard variable `mapViewData` with the view extent value.
* Use a debounce strategy to wait the user stop dragging or zooming the map.
*/
private timeoutId: NodeJS.Timeout | null = null; // for debounce
updateGeoVariables = (view: View) => {
const bounds = view.calculateExtent();
const bounds4326 = transformExtent(bounds, 'EPSG:3857', 'EPSG:4326');
console.log('GeomapPanel.updateGeoVariables', bounds4326);
if (this.timeoutId) {
clearTimeout(this.timeoutId);
}
this.timeoutId = setTimeout(() => {
locationService.partial({ 'var-mapViewData': `${bounds4326}` }, true);
}, 500);
};
private viewListernerKey: EventsKey | null = null;
initViewExtent(view: View, config: MapViewConfig) {
if (config.dashboardVariable) {
if (this.viewListernerKey != null) {
view.un('change', this.viewListernerKey.listener);
}
this.viewListernerKey = view.on('change', () => {
this.updateGeoVariables(view);
});
this.updateGeoVariables(view);
}
const v = centerPointRegistry.getIfExists(config.id);
if (v) {
let coord: Coordinate | undefined = undefined;