New toolbar button: Center on user's geolocation by HaudinFlorence · Pull Request #626 · geojupyter/jupytergis

HaudinFlorence · 2025-04-11T16:06:45Z

Description

This PR adds logics for getting the geolocation and centering the map on it. Changes includes adding:

a new command button in the toolbar with a target icon
a new command getGeolocation for getting the geolocation of the user using the geolocation API from Chrome
a geolocation attribute and a geolocationChanged signal to the JupyterGISModel

Screencast.From.2025-04-16.12-22-07.mp4

📚 Documentation preview: https://jupytergis--626.org.readthedocs.build/en/626/
💡 JupyterLite preview: https://jupytergis--626.org.readthedocs.build/en/626/lite

github-actions · 2025-04-11T16:06:55Z

👈 Launch a Binder on branch HaudinFlorence/jupytergis/get_geolocation_and_recenter_the_map

SylvainCorlay · 2025-04-12T07:30:01Z

This looks fine with me.

Small nitpick: it seems that when we reach the maximum zoom level after clicking multiple times, it circles back to the minimum zoom level.

github-actions · 2025-04-12T07:40:17Z

Integration tests report: appsharing.space

HaudinFlorence · 2025-04-12T07:46:43Z

This looks fine with me.

Small nitpick: it seems that when we reach the maximum zoom level after clicking multiple times, it circles back to the minimum zoom level.

Yes. That a choice I made but I can change this. And do nothing instead of centering and setting the zoom to 0. Here is the current implementation:

private _handleGeolocationChanged(
    sender: any,
    newPosition: JgisCoordinates
  ): void {
    const view = this._Map.getView();
    const zoom = view.getZoom();
    if (zoom !== undefined && zoom + 2 < 20) {
      this._moveToPosition(newPosition, zoom + 2);
    } else {
      this._moveToPosition(newPosition, 0);
    }
  }

SylvainCorlay · 2025-04-14T11:51:22Z

Yes. That a choice I made but I can change this. And do nothing instead of centering and setting the zoom to 0. Here is the current implementation:

Maybe we should just center the map at the current location and not change the zoom level.

HaudinFlorence · 2025-04-14T12:26:05Z

Yes. That a choice I made but I can change this. And do nothing instead of centering and setting the zoom to 0. Here is the current implementation:

Maybe we should just center the map at the current location and not change the zoom level.

Thanks for your suggestion @SylvainCorlay . It has been taken into account

packages/base/src/mainview/mainView.tsx

arjxn-py · 2025-04-14T13:25:21Z

Ahh there are more failures, the above import error was just one of them
I'm quickly looking at them.

HaudinFlorence · 2025-04-14T14:14:01Z

Bot please update snapshots

arjxn-py · 2025-04-14T14:18:54Z

Bot please update snapshots

arjxn-py · 2025-04-14T15:43:45Z

Bot please update snapshots

- a new command button in the toolbar - a command for getting the geolocation of the user - a geolocation attribute and a geolocationChanged signal to the JupyterGISModel - centering and zooming around the geolocation

Add missing import of Feature in mainView.tsx.

…tGeolocation command. Rename previous svg file and related targetIcon to targetWithoutCenterIcon.

for more information, see https://pre-commit.ci

Co-authored-by: Arjun Verma <arjunverma.oc@gmail.com>

Use getByTestId in geojson-layers.spec.ts.

arjxn-py

Thanks @HaudinFlorence, this is super awesome 🚀
Just a couple of questions and a suggestion :)

arjxn-py · 2025-04-16T10:18:49Z

ui-tests/tests/layer-browser.spec.ts

    const content = galata.newContentsHelper(request);
    await content.deleteDirectory('/testDir');
-    await content.uploadDirectory(
+    const uploaded = await content.uploadDirectory(


Is this required?

No, this is not. This is a left-over of some tests. I will remove it.

arjxn-py · 2025-04-16T10:19:19Z

ui-tests/tests/layer-browser.spec.ts


  test.beforeEach(async ({ page }) => {
-    await page.filebrowser.open('testDir/test.jGIS');
+    const opened = await page.filebrowser.open('testDir/test.jGIS');


Just curious if this is required?

As previously explained. This is not. I will remove it.

ui-tests/tests/geojson-layers.spec.ts

arjxn-py · 2025-04-16T10:24:38Z

packages/base/src/commands.ts

    }
  });

+  commands.addCommand(CommandIDs.getGeolocation, {


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

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.

Co-authored-by: Arjun Verma <arjunverma.oc@gmail.com>

HaudinFlorence · 2025-04-16T10:28:30Z

@arjxn-py Thanks for the review

gjmooney

Thanks!

packages/base/src/toolbar/widget.tsx

gjmooney · 2025-04-16T10:36:59Z

packages/base/style/icons/.xdp-.goutputstream-MB8R42-pRzf61

Should probably delete this

gjmooney · 2025-04-16T10:37:06Z

packages/base/style/icons/.xdp-target-pEiw8f

Co-authored-by: Greg Mooney <gregory.mooney@quantstack.net>

HaudinFlorence · 2025-04-16T11:02:46Z

@gjmooney Thanks for the review. I have taken all your comments into account.

* Add logics for geolocation including : - a new command button in the toolbar - a command for getting the geolocation of the user - a geolocation attribute and a geolocationChanged signal to the JupyterGISModel - centering and zooming around the geolocation * Change the label of getGeolocation command. Add missing import of Feature in mainView.tsx. * Remove zooming around relocation in _handleGeolocationChanged function. * Update target.svg fill and class properties to adapt to both themes. * Update getGeolocation command label. * Add a targetWithCenterIcon and replace targetIcon with this one in getGeolocation command. Rename previous svg file and related targetIcon to targetWithoutCenterIcon. * Fix lint issues. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Update packages/base/src/mainview/mainView.tsx Co-authored-by: Arjun Verma <arjunverma.oc@gmail.com> * Fix icon path issues * Add test ids to the various command toolbar buttons. Use getByTestId in geojson-layers.spec.ts. * Update ui-tests/tests/geojson-layers.spec.ts Co-authored-by: Arjun Verma <arjunverma.oc@gmail.com> * Update packages/base/src/toolbar/widget.tsx Co-authored-by: Greg Mooney <gregory.mooney@quantstack.net> * Take review comments into account. * Fix failing lint test. --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Arjun Verma <arjunverma.oc@gmail.com> Co-authored-by: arjxn-py <arjxn.py@gmail.com> Co-authored-by: Greg Mooney <gregory.mooney@quantstack.net>

HaudinFlorence force-pushed the get_geolocation_and_recenter_the_map branch 3 times, most recently from 2e6c34b to d2ed785 Compare April 11, 2025 16:28

HaudinFlorence marked this pull request as draft April 11, 2025 16:30

mfisher87 changed the title ~~Get geolocation and recenter the map~~ Get user's geolocation and recenter the map Apr 12, 2025

mfisher87 changed the title ~~Get user's geolocation and recenter the map~~ New toolbar button: Get user's geolocation and recenter the map Apr 12, 2025

mfisher87 changed the title ~~New toolbar button: Get user's geolocation and recenter the map~~ New toolbar button: Zoom to user's geolocation Apr 12, 2025

gjmooney added the enhancement New feature or request label Apr 14, 2025

HaudinFlorence force-pushed the get_geolocation_and_recenter_the_map branch from 6b8a6d0 to 5aed8da Compare April 14, 2025 12:58

HaudinFlorence marked this pull request as ready for review April 14, 2025 12:59

HaudinFlorence force-pushed the get_geolocation_and_recenter_the_map branch from 1771158 to a498331 Compare April 14, 2025 13:02

arjxn-py reviewed Apr 14, 2025

View reviewed changes

packages/base/src/mainview/mainView.tsx Outdated Show resolved Hide resolved

HaudinFlorence force-pushed the get_geolocation_and_recenter_the_map branch from 018731e to ab3ab6d Compare April 14, 2025 15:12

HaudinFlorence force-pushed the get_geolocation_and_recenter_the_map branch 5 times, most recently from c00d2f3 to c36736a Compare April 15, 2025 16:39

HaudinFlorence added 2 commits April 16, 2025 11:07

Add logics for geolocation including :

1ecdc03

- a new command button in the toolbar - a command for getting the geolocation of the user - a geolocation attribute and a geolocationChanged signal to the JupyterGISModel - centering and zooming around the geolocation

Change the label of getGeolocation command.

1db3fab

Add missing import of Feature in mainView.tsx.

HaudinFlorence and others added 9 commits April 16, 2025 11:07

Remove zooming around relocation in _handleGeolocationChanged function.

c5378e8

Update target.svg fill and class properties to adapt to both themes.

d8f3158

Update getGeolocation command label.

a63d123

Add a targetWithCenterIcon and replace targetIcon with this one in ge…

5cffe10

…tGeolocation command. Rename previous svg file and related targetIcon to targetWithoutCenterIcon.

Fix lint issues.

a0e39b7

[pre-commit.ci] auto fixes from pre-commit.com hooks

1b18439

for more information, see https://pre-commit.ci

Update packages/base/src/mainview/mainView.tsx

7bb4606

Co-authored-by: Arjun Verma <arjunverma.oc@gmail.com>

Fix icon path issues

6779cfd

Add test ids to the various command toolbar buttons.

15ff70c

Use getByTestId in geojson-layers.spec.ts.

HaudinFlorence force-pushed the get_geolocation_and_recenter_the_map branch from c36736a to 15ff70c Compare April 16, 2025 10:00

HaudinFlorence changed the title ~~New toolbar button: Zoom to user's geolocation~~ New toolbar button: Center on user's geolocation Apr 16, 2025

arjxn-py approved these changes Apr 16, 2025

View reviewed changes

Update ui-tests/tests/geojson-layers.spec.ts

e9d7179

Co-authored-by: Arjun Verma <arjunverma.oc@gmail.com>

arjxn-py requested a review from gjmooney April 16, 2025 10:28

gjmooney reviewed Apr 16, 2025

View reviewed changes

HaudinFlorence and others added 2 commits April 16, 2025 12:44

Update packages/base/src/toolbar/widget.tsx

e32336f

Co-authored-by: Greg Mooney <gregory.mooney@quantstack.net>

Take review comments into account.

ff14ad1

Fix failing lint test.

efd9830

HaudinFlorence force-pushed the get_geolocation_and_recenter_the_map branch from 131f16b to efd9830 Compare April 16, 2025 11:05

gjmooney merged commit aa22dd6 into geojupyter:main Apr 16, 2025
14 checks passed

Conversation

HaudinFlorence commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

github-actions bot commented Apr 11, 2025

Uh oh!

SylvainCorlay commented Apr 12, 2025

Uh oh!

github-actions bot commented Apr 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

HaudinFlorence commented Apr 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SylvainCorlay commented Apr 14, 2025

Uh oh!

HaudinFlorence commented Apr 14, 2025

Uh oh!

Uh oh!

arjxn-py commented Apr 14, 2025

Uh oh!

HaudinFlorence commented Apr 14, 2025

Uh oh!

arjxn-py commented Apr 14, 2025

Uh oh!

arjxn-py commented Apr 14, 2025

Uh oh!

arjxn-py left a comment

Choose a reason for hiding this comment

Uh oh!

arjxn-py Apr 16, 2025

Choose a reason for hiding this comment

Uh oh!

HaudinFlorence Apr 16, 2025

Choose a reason for hiding this comment

Uh oh!

arjxn-py Apr 16, 2025

Choose a reason for hiding this comment

Uh oh!

HaudinFlorence Apr 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

arjxn-py Apr 16, 2025

Choose a reason for hiding this comment

Uh oh!

HaudinFlorence Apr 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HaudinFlorence commented Apr 16, 2025

Uh oh!

gjmooney left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gjmooney Apr 16, 2025

Choose a reason for hiding this comment

Uh oh!

gjmooney Apr 16, 2025

Choose a reason for hiding this comment

Uh oh!

HaudinFlorence commented Apr 16, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

HaudinFlorence commented Apr 11, 2025 •

edited

Loading

github-actions bot commented Apr 12, 2025 •

edited

Loading

HaudinFlorence commented Apr 12, 2025 •

edited

Loading

HaudinFlorence Apr 16, 2025 •

edited

Loading