Merge branch 'main' into chore/add-build-outputs-to-turbo

.github/pull_request_template.md

@@ -0,0 +1,27 @@
+# feat/fix/chore: pr title
+
+## JIRA Ticket
+
+[<JIRA_TICKET>](https://jira.csiro.com/browse/<JIRA_TICKET>)
+
+## Description
+
+Briefly describe the purpose of this pull request.
+
+## Proposed Changes
+
+List the changes made in this PR.
+
+## How to Test
+
+Explain how to test the changes.
+
+## Additional Information
+
+Add any additional information or context about the pull request here.
+
+## Checklist
+
+- [ ] I have confirmed all commits have been signed.
+- [ ] I have added JSDoc style comments to any new functions or classes.
+- [ ] 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

@@ -36,6 +36,7 @@ import {register} from 'ol/proj/proj4';
 import Button, {ButtonProps} from '@mui/material/Button';
 import CloseIcon from '@mui/icons-material/Close';
 import GeoJSON from 'ol/format/GeoJSON';
+import Zoom from 'ol/control/Zoom';
 
 // define some EPSG codes - these are for two sample images
 // TODO: we need to have a better way to include a useful set or allow
@@ -64,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: {
@@ -131,9 +133,11 @@ function MapWrapper(props: MapProps) {
         target: element,
         layers: [tileLayer],
         view: view,
-        controls: [],
+        controls: [new Zoom()],
       });
 
+      theMap.addControl(createCenterControl(theMap.getView(), center));
+
       theMap.getView().setCenter(center);
 
       return theMap;

app/src/index.css

@@ -11,3 +11,31 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.ol-zoom {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  background-color: white;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+}
+
+.ol-zoom-in {
+  font-size: 24px;
+  background-color: rgb(23 23 23);
+  color: white;
+  font-weight: bold;
+  border-radius: 6px;
+}
+
+.ol-zoom-out {
+  font-size: 24px;
+  background-color: rgb(23 23 23);
+  color: white;
+  font-weight: bold;
+  border-radius: 6px;
+}