Repository: geojupyter/jupytergis (language: python)

Issue:
[ENH] Add Scale to the Map
This feature request proposes adding a scale to the map in JupyterGIS to enhance the user's ability to measure distances and understand the scale of the map. 

The scale can be easily added to the map using the `MapLibre.ScaleControl` class. Which would look like this: 

![ScreenRecording2024-08-18213013-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/1200decb-4e5e-41f6-9528-921b81e6e41a)

[ENH] Add Scale to the Map
This feature request proposes adding a scale to the map in JupyterGIS to enhance the user's ability to measure distances and understand the scale of the map. 

The scale can be easily added to the map using the `MapLibre.ScaleControl` class. Which would look like this: 

![ScreenRecording2024-08-18213013-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/1200decb-4e5e-41f6-9528-921b81e6e41a)



Discussion / hints:
I'd be happy to open a PR for the same if permitted.
> I'd be happy to open a PR for the same if permitted.

That would be very welcome :)
I'd be happy to open a PR for the same if permitted.
> I'd be happy to open a PR for the same if permitted.

That would be very welcome :)

Fix patch:
diff --git a/packages/base/src/mainview/mainview.tsx b/packages/base/src/mainview/mainview.tsx
index c630a485..ae30a28a 100644
--- a/packages/base/src/mainview/mainview.tsx
+++ b/packages/base/src/mainview/mainview.tsx
@@ -112,6 +112,11 @@ export class MainView extends React.Component<IProps, IStates> {
           showZoom: true,
           showCompass: true
         })
+      ).addControl(
+        new MapLibre.ScaleControl({
+          maxWidth: 80,
+          unit: 'metric'
+        })
       );
 
       this._Map.on('zoomend', () => {


Test patch:
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-linux.png
index aec00fb5..5d83249c 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-linux.png
index c31d0f79..d8d6fa6a 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-linux.png
index 94c44d23..75cde0cb 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-linux.png
index c7c3a042..0a130adf 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-linux.png
index d9e6f385..3d30d6a6 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-linux.png differ
diff --git a/ui-tests/tests/ui.spec.ts-snapshots/Render-test-jGIS-linux.png b/ui-tests/tests/ui.spec.ts-snapshots/Render-test-jGIS-linux.png
index 257894aa..19a28bca 100644
Binary files a/ui-tests/tests/ui.spec.ts-snapshots/Render-test-jGIS-linux.png and b/ui-tests/tests/ui.spec.ts-snapshots/Render-test-jGIS-linux.png differ