feat: map center button (#1111)

## JIRA Ticket

[BSS-289](https://jira.csiro.au/browse/BSS-289)

## Description

Added button to map component to move the map back to the initial
location.

## Proposed Changes

- Created centre icon HTML element
- Created centre control button HTML element
- Added centre control to map component
- Added styling for map centre button in global App.css file

## How to Test

1. Activate "Campus Survey Demo" if it is not already activated
2. Open the survey "Campus Survey Demo"
3. Click the "+ Survey Area" button to add a new survey area
4. Click the "DRAW BOUNDING BOX AROUND SURVEY AREA"
5. Move the map
6. Test the centre button on the bottom left of the map screen

## Additional Information

HTML elements were used instead of React components as these are what
OpenLayers expects for map components. See [OpenLayers v10.0.0 API -
Class:
Control](https://openlayers.org/en/latest/apidoc/module-ol_control_Control-Control.html)

## 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/App.css

@@ -25,3 +25,24 @@
     background-color: #e0e0e0;
     font-weight:700
 }
+
+.ol-center-button {
+    padding: 1px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(23 23 23);
+    border-radius: 6px;
+}
+
+.ol-center-box {
+    position: absolute;
+    right: 12px;
+    bottom: 128px;
+    background-color: white;
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+}

app/src/gui/components/map/center-control.tsx

@@ -0,0 +1,43 @@
+import {Control} from 'ol/control';
+import {Coordinate} from 'ol/coordinate';
+import {View} from 'ol';
+import {CreateDomIcon} from './dom-icon';
+import src from '../../../target.svg';
+
+/**
+ * Creates a custom control button that centers the map view to a specified coordinate.
+ *
+ * @param {View} view - The map view instance to be controlled.
+ * @param {Coordinate} center - The coordinate to which the map view should be centered.
+ * @returns {Control} - The custom control instance.
+ */
+export const createCenterControl = (
+  view: View,
+  center: Coordinate
+): Control => {
+  const button = document.createElement('button');
+  button.className = 'ol-center-button';
+
+  button.appendChild(
+    CreateDomIcon({
+      src,
+      width: 24,
+      height: 24,
+      alt: 'Center map',
+    })
+  );
+
+  const handleClick = () => {
+    view.setCenter(center);
+  };
+
+  button.addEventListener('click', handleClick);
+
+  const element = document.createElement('div');
+  element.className = 'ol-center-box';
+  element.appendChild(button);
+
+  return new Control({
+    element: element,
+  });
+};

app/src/gui/components/map/dom-icon.tsx

@@ -0,0 +1,32 @@
+interface CenterControlIconProps {
+  src: string;
+  width: number;
+  height: number;
+  alt: string;
+}
+
+/**
+ * Creates a DOM image element with the specified properties.
+ *
+ * @param {CenterControlIconProps} props - The properties for the image element.
+ * @param {string} props.src - The source URL of the image.
+ * @param {number} props.width - The width of the image in pixels.
+ * @param {number} props.height - The height of the image in pixels.
+ * @param {string} props.alt - The alternative text for the image.
+ * @returns {HTMLImageElement} - The created image element.
+ */
+export const CreateDomIcon = ({
+  src,
+  width,
+  height,
+  alt,
+}: CenterControlIconProps) => {
+  const img = document.createElement('img');
+
+  img.width = width;
+  img.height = height;
+  img.src = src;
+  img.alt = alt;
+
+  return img;
+};

app/src/gui/fields/maps/MapWrapper.tsx

@@ -65,6 +65,7 @@ interface MapProps extends ButtonProps {
 import {AppBar, Dialog, IconButton, Toolbar, Typography} from '@mui/material';
 import Feature from 'ol/Feature';
 import {Geometry} from 'ol/geom';
+import {createCenterControl} from '../../components/map/center-control';
 
 const styles = {
   mapContainer: {
@@ -135,6 +136,8 @@ function MapWrapper(props: MapProps) {
         controls: [new Zoom()],
       });
 
+      theMap.addControl(createCenterControl(theMap.getView(), center));
+
       theMap.getView().setCenter(center);
 
       return theMap;