get current location for overview map center, put a marker there (#1242)

# Get current location for overview map center

## JIRA Ticket

None

## Description

The overview map had a fixed center point somewhere in Africa. More
useful to move it
to the current location.

## Proposed Changes

- get the current location when displaying the overview map, use it as
the center point
- add a marker (+) at the current location on the map

## How to Test

Open a notebook with geo-locations (BSS) and view the Map. See the cross
at your current location.
Move the map, click the circle 'center map' button and see it center the
map on your location.

## Checklist

- [x] I have confirmed all commits have been signed.
- [x] I have added JSDoc style comments to any new functions or classes.
- [x] Relevant documentation such as READMEs, guides, and class comments
are updated.

app/src/gui/components/notebook/overview_map.tsx

@@ -34,12 +34,13 @@ import Map from 'ol/Map';
 import {transform} from 'ol/proj';
 import {OSM} from 'ol/source';
 import VectorSource from 'ol/source/Vector';
-import {Fill, Stroke, Style} from 'ol/style';
+import {Fill, RegularShape, Stroke, Style} from 'ol/style';
 import CircleStyle from 'ol/style/Circle';
 import {useCallback, useMemo, useRef, useState} from 'react';
 import {Link} from 'react-router-dom';
 import * as ROUTES from '../../../constants/routes';
 import {createCenterControl} from '../map/center-control';
+import {Geolocation} from '@capacitor/geolocation';
 
 interface OverviewMapProps {
   uiSpec: ProjectUIModel;
@@ -139,19 +140,21 @@ export const OverviewMap = (props: OverviewMapProps) => {
   const mapRef = useRef<Map | undefined>();
   mapRef.current = map;
 
-  const map_center = [30, -10];
+  const {data: map_center, isLoading: loadingLocation} = useQuery({
+    queryKey: ['current_location'],
+    queryFn: async (): Promise<[number, number]> => {
+      const position = await Geolocation.getCurrentPosition();
+      return [position.coords.longitude, position.coords.latitude];
+    },
+  });
 
   /**
    * Create the OpenLayers map element
    */
   const createMap = useCallback(async (element: HTMLElement): Promise<Map> => {
-    const center = transform(map_center, 'EPSG:4326', defaultMapProjection);
-
     const tileLayer = new TileLayer({source: new OSM()});
     const view = new View({
       projection: defaultMapProjection,
-      center: center,
-      zoom: 12,
     });
 
     const theMap = new Map({
@@ -161,10 +164,6 @@ export const OverviewMap = (props: OverviewMapProps) => {
       controls: [new Zoom()],
     });
 
-    theMap.addControl(createCenterControl(theMap.getView(), center));
-
-    theMap.getView().setCenter(center);
-
     theMap.on('click', evt => {
       const feature = theMap.forEachFeatureAtPixel(evt.pixel, feature => {
         return feature.getProperties();
@@ -178,6 +177,49 @@ export const OverviewMap = (props: OverviewMapProps) => {
     return theMap;
   }, []);
 
+  /**
+   * Add a marker to the map at the current location
+   *
+   * @param map the map element
+   */
+  const addCurrentLocationMarker = (map: Map) => {
+    const source = new VectorSource();
+    const geoJson = new GeoJSON();
+
+    const stroke = new Stroke({color: 'black', width: 2});
+    const layer = new VectorLayer({
+      source: source,
+      style: new Style({
+        image: new RegularShape({
+          stroke: stroke,
+          points: 4,
+          radius: 10,
+          radius2: 0,
+          angle: 0,
+        }),
+      }),
+    });
+
+    // only do this if we have a real map_center
+    if (map_center) {
+      const centerFeature = {
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: map_center,
+        },
+      };
+
+      source.addFeature(
+        geoJson.readFeature(centerFeature, {
+          dataProjection: 'EPSG:4326',
+          featureProjection: map.getView().getProjection(),
+        })
+      );
+      map.addLayer(layer);
+    }
+  };
+
   /**
    * Add the features to the map and set the map view to
    * encompass the features.
@@ -221,13 +263,27 @@ export const OverviewMap = (props: OverviewMapProps) => {
     map.addLayer(layer);
   };
 
+  // when we have a location and a map, add the 'here' marker to the map
+  if (!loadingLocation && map) {
+    addCurrentLocationMarker(map);
+    if (map_center) {
+      const center = transform(map_center, 'EPSG:4326', defaultMapProjection);
+      // add the 'here' button to go to the current location
+      map.addControl(createCenterControl(map.getView(), center));
+    }
+  }
+
+  // when we have features, add them to the map
+  if (!loadingFeatures && map) {
+    addFeaturesToMap(map);
+  }
+
   // callback to add the map to the DOM
   const refCallback = (element: HTMLElement | null) => {
     if (element) {
       if (!map) {
         // create map
         createMap(element).then((theMap: Map) => {
-          addFeaturesToMap(theMap);
           setMap(theMap);
         });
       } else {