Skip to content

New toolbar button: Center on user's geolocation #626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gjmooney merged 15 commits into from
Apr 16, 2025
Merged

New toolbar button: Center on user's geolocation #626

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
1ecdc03
Add logics for geolocation including :
HaudinFlorence Apr 9, 2025
1db3fab
Change the label of getGeolocation command.
HaudinFlorence Apr 11, 2025
c5378e8
Remove zooming around relocation in _handleGeolocationChanged function.
HaudinFlorence Apr 14, 2025
d8f3158
Update target.svg fill and class properties to adapt to both themes.
HaudinFlorence Apr 14, 2025
a63d123
Update getGeolocation command label.
HaudinFlorence Apr 14, 2025
5cffe10
Add a targetWithCenterIcon and replace targetIcon with this one in ge…
HaudinFlorence Apr 14, 2025
a0e39b7
Fix lint issues.
HaudinFlorence Apr 14, 2025
1b18439
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Apr 14, 2025
7bb4606
Update packages/base/src/mainview/mainView.tsx
HaudinFlorence Apr 14, 2025
6779cfd
Fix icon path issues
arjxn-py Apr 14, 2025
15ff70c
Add test ids to the various command toolbar buttons.
HaudinFlorence Apr 15, 2025
e9d7179
Update ui-tests/tests/geojson-layers.spec.ts
HaudinFlorence Apr 16, 2025
e32336f
Update packages/base/src/toolbar/widget.tsx
HaudinFlorence Apr 16, 2025
ff14ad1
Take review comments into account.
HaudinFlorence Apr 16, 2025
efd9830
Fix failing lint test.
HaudinFlorence Apr 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions packages/base/src/commands.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
IJGISLayerGroup,
IJGISLayerItem,
IJupyterGISModel,
JgisCoordinates,
LayerType,
SelectionType,
SourceType
Expand All @@ -30,6 +31,9 @@ import {
selectedLayerIsOfType,
processSelectedLayer
} from './processing';
import { fromLonLat } from 'ol/proj';
import { Coordinate } from 'ol/coordinate';
import { targetWithCenterIcon } from './icons';

interface ICreateEntry {
tracker: JupyterGISTracker;
Expand Down Expand Up @@ -1140,6 +1144,36 @@ export function addCommands(
}
});

commands.addCommand(CommandIDs.getGeolocation, {
Copy link
Member

@arjxn-py arjxn-py Apr 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you think of a scenario where we'd want to disable this button? In those cases we'd want to handle those in isEnabled

Copy link
Contributor Author

@HaudinFlorence HaudinFlorence Apr 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are rising an interesting point. In a version where the geolocation would be materialized by a marker on the map, we can imagine that the command is enabled only when there is no marker on the map yet. Or we could imagine a version with a toggle command toolbar button or a toggable custom layer. In any case, this PR addresses a first simple geolocation feature that will be improved in a future PR.

label: trans.__('Center on Geolocation'),
execute: async () => {
const viewModel = tracker.currentWidget?.model;
const options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
const success = (pos: any) => {
const location: Coordinate = fromLonLat([
pos.coords.longitude,
pos.coords.latitude
]);
const Jgislocation: JgisCoordinates = {
x: location[0],
y: location[1]
};
if (viewModel) {
viewModel.geolocationChanged.emit(Jgislocation);
}
};
const error = (err: any) => {
console.warn(`ERROR(${err.code}): ${err.message}`);
};
navigator.geolocation.getCurrentPosition(success, error, options);
},
icon: targetWithCenterIcon
});

loadKeybindings(commands, keybindings);
}

Expand Down
3 changes: 3 additions & 0 deletions packages/base/src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ export namespace CommandIDs {
export const identify = 'jupytergis:identify';
export const temporalController = 'jupytergis:temporalController';

// geolocation
export const getGeolocation = 'jupytergis:getGeolocation';

// Layers and sources creation commands
export const openLayerBrowser = 'jupytergis:openLayerBrowser';

Expand Down
18 changes: 18 additions & 0 deletions packages/base/src/icons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ import vectorSquareSvgStr from '../style/icons/vector_square.svg';
import infoSvgStr from '../style/icons/info-solid.svg';
import clockSvgStr from '../style/icons/clock-solid.svg';
import terminalToolbarSvgStr from '../style/icons/terminal_toolbar.svg';
import geolocationSvgStr from '../style/icons/geolocation.svg';
import targetWithoutCenterSvgStr from '../style/icons/target_without_center.svg';
import targetWithCenterSvgStr from '../style/icons/target_with_center.svg';

export const logoIcon = new LabIcon({
name: 'jupytergis::logo',
Expand Down Expand Up @@ -90,3 +93,18 @@ export const terminalToolbarIcon = new LabIcon({
name: 'jupytergis::terminalToolbar',
svgstr: terminalToolbarSvgStr
});

export const geolocationIcon = new LabIcon({
name: 'jupytergis::geolocation',
svgstr: geolocationSvgStr
});

export const targetWithoutCenterIcon = new LabIcon({
name: 'jupytergis::targetWithCenter',
svgstr: targetWithCenterSvgStr
});

export const targetWithCenterIcon = new LabIcon({
name: 'jupytergis::targetWithoutCenter',
svgstr: targetWithoutCenterSvgStr
});
20 changes: 20 additions & 0 deletions packages/base/src/mainview/mainView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
IVectorTileLayer,
IVectorTileSource,
IWebGlLayer,
JgisCoordinates,
JupyterGISModel
} from '@jupytergis/schema';
import { showErrorMessage } from '@jupyterlab/apputils';
Expand Down Expand Up @@ -136,6 +137,10 @@ export class MainView extends React.Component<IProps, IStates> {
this._model.zoomToPositionSignal.connect(this._onZoomToPosition, this);
this._model.updateLayerSignal.connect(this._triggerLayerUpdate, this);
this._model.addFeatureAsMsSignal.connect(this._convertFeatureToMs, this);
this._model.geolocationChanged.connect(
this._handleGeolocationChanged,
this
);

this.state = {
id: this._mainViewModel.id,
Expand Down Expand Up @@ -1839,6 +1844,21 @@ export class MainView extends React.Component<IProps, IStates> {
});
}

private _handleGeolocationChanged(
sender: any,
newPosition: JgisCoordinates
): void {
const view = this._Map.getView();
const zoom = view.getZoom();
if (zoom) {
this._moveToPosition(newPosition, zoom);
} else {
throw new Error(
'Could not move to geolocation, because current zoom is not defined.'
);
}
}

private _handleThemeChange = (): void => {
const lightTheme = isLightTheme();

Expand Down
1 change: 0 additions & 1 deletion packages/base/src/mainview/mainviewmodel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ export class MainViewModel implements IDisposable {
private _jGISModel: IJupyterGISModel;
private _viewSetting: ObservableMap<JSONValue>;
private _commands: CommandRegistry;

private _id: string;
private _isDisposed = false;
}
Expand Down
138 changes: 71 additions & 67 deletions packages/base/src/toolbar/widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,66 +38,69 @@ export class ToolbarWidget extends ReactiveToolbar {
this.addClass('jGIS-toolbar-widget');

if (options.commands) {
this.addItem(
'undo',
new CommandToolbarButton({
id: CommandIDs.undo,
label: '',
icon: undoIcon,
commands: options.commands
})
);
const undoButton = new CommandToolbarButton({
id: CommandIDs.undo,
label: '',
icon: undoIcon,
commands: options.commands
});

this.addItem(
'redo',
new CommandToolbarButton({
id: CommandIDs.redo,
label: '',
icon: redoIcon,
commands: options.commands
})
);
this.addItem('undo', undoButton);
undoButton.node.dataset.testid = 'undo-button-test-id';

const redoButton = new CommandToolbarButton({
id: CommandIDs.redo,
label: '',
icon: redoIcon,
commands: options.commands
});
this.addItem('redo', redoButton);

this.addItem('separator0', new Separator());

this.addItem(
'Toggle console',
new CommandToolbarButton({
id: CommandIDs.toggleConsole,
commands: options.commands,
label: '',
icon: terminalToolbarIcon
})
);
const toggleConsoleButton = new CommandToolbarButton({
id: CommandIDs.toggleConsole,
commands: options.commands,
label: '',
icon: terminalToolbarIcon
});
this.addItem('Toggle console', toggleConsoleButton);
toggleConsoleButton.node.dataset.testid = 'toggle-console-button-test-id';

this.addItem('separator1', new Separator());

this.addItem(
'openLayerBrowser',
new CommandToolbarButton({
id: CommandIDs.openLayerBrowser,
label: '',
commands: options.commands
})
);
const openLayersBrowserButton = new CommandToolbarButton({
id: CommandIDs.openLayerBrowser,
label: '',
commands: options.commands
});
this.addItem('openLayerBrowser', openLayersBrowserButton);
openLayersBrowserButton.node.dataset.testid =
'open-layers-browser-test-id';

const newRasterEntryButton = new CommandToolbarButton({
id: CommandIDs.newRasterEntry,
label: '',
commands: options.commands
});
this.addItem('newRasterEntry', newRasterEntryButton);

this.addItem(
'newRasterEntry',
new CommandToolbarButton({
id: CommandIDs.newRasterEntry,
label: '',
commands: options.commands
})
);
const newVectorTileEntryButton = new CommandToolbarButton({
id: CommandIDs.newVectorTileEntry,
label: '',
commands: options.commands
});
this.addItem('newVectorTileEntry', newVectorTileEntryButton);
newRasterEntryButton.node.dataset.testid = 'new-raster-entry-test-id';

this.addItem(
'newVectorTileEntry',
new CommandToolbarButton({
id: CommandIDs.newVectorTileEntry,
label: '',
commands: options.commands
})
);
const geolocationButton = new CommandToolbarButton({
id: CommandIDs.getGeolocation,
commands: options.commands,
label: ''
});
this.addItem('Geolocation', geolocationButton);

geolocationButton.node.dataset.testid = 'geolocation-button-test-id';

// vector sub menu
const vectorSubMenu = new Menu({ commands: options.commands });
Expand Down Expand Up @@ -157,28 +160,29 @@ export class ToolbarWidget extends ReactiveToolbar {
NewSubMenu.open(bbox.x, bbox.bottom);
}
});
NewEntryButton.node.dataset.testid = 'new-entry-button-test-id';

this.addItem('New', NewEntryButton);

this.addItem('separator2', new Separator());

this.addItem(
'identify',
new CommandToolbarButton({
id: CommandIDs.identify,
label: '',
commands: options.commands
})
);
const identifyButton = new CommandToolbarButton({
id: CommandIDs.identify,
label: '',
commands: options.commands
});

this.addItem(
'temporalController',
new CommandToolbarButton({
id: CommandIDs.temporalController,
label: '',
commands: options.commands
})
);
this.addItem('identify', identifyButton);
identifyButton.node.dataset.testid = 'identify-button-test-id';

const temporalControllerButton = new CommandToolbarButton({
id: CommandIDs.temporalController,
label: '',
commands: options.commands
});
this.addItem('temporalController', temporalControllerButton);
temporalControllerButton.node.dataset.testid =
'temporal-controller-button-test-id';

this.addItem('spacer', ReactiveToolbar.createSpacerItem());

Expand Down
Binary file added packages/base/style/icons/.xdp-.goutputstream-MB8R42-pRzf61
View file
Open in desktop
Copy link
Collaborator

@gjmooney gjmooney Apr 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should probably delete this

Binary file not shown.
Binary file added packages/base/style/icons/.xdp-target-pEiw8f
View file
Open in desktop
Copy link
Collaborator

@gjmooney gjmooney Apr 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and this

Binary file not shown.
15 changes: 15 additions & 0 deletions packages/base/style/icons/geolocation.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions packages/base/style/icons/target_with_center.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions packages/base/style/icons/target_without_center.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions packages/schema/src/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export interface IJupyterGISDocChange extends DocumentChange {
export interface IJupyterGISModel extends DocumentRegistry.IModel {
isDisposed: boolean;
sharedModel: IJupyterGISDoc;
geolocation: JgisCoordinates;
localState: IJupyterGISClientState | null;
annotationModel?: IAnnotationModel;

Expand All @@ -175,6 +176,7 @@ export interface IJupyterGISModel extends DocumentRegistry.IModel {
zoomToPositionSignal: ISignal<IJupyterGISModel, string>;
addFeatureAsMsSignal: ISignal<IJupyterGISModel, string>;
updateLayerSignal: ISignal<IJupyterGISModel, string>;
geolocationChanged: Signal<IJupyterGISModel, JgisCoordinates>;

contentsManager: Contents.IManager | undefined;
filePath: string;
Expand Down
Loading
Loading