CDD-2363: Added in the UKHSA image overlay onto map

src/app/components/ui/ukhsa/Map/Map.tsx

@@ -18,6 +18,7 @@ import { AttributionControl } from './shared/controls/AttributionControl'
 import { KeyControl } from './shared/controls/KeyControl'
 import { ZoomControl } from './shared/controls/ZoomControl'
 import { useMapRef } from './shared/hooks/useMapRef'
+import { UKHSALogoLayer } from './shared/layers/UKHSALogoLayer'
 
 interface DefaultOptions extends ComponentProps<typeof MapContainer> {
   zoomControlPosition: ControlPosition
@@ -55,6 +56,7 @@ const Map = ({
       className={clsx('relative h-screen overflow-hidden ukhsa-focus', className)}
       zoomControl={false}
     >
+      <UKHSALogoLayer position="topright" />
       <KeyControl position="bottomleft" keyItems={['Green', 'Yellow', 'Amber', 'Red']} />
       <AttributionControl position={attributionControlPosition} />
       <ZoomControl position={zoomControlPosition} />

src/app/components/ui/ukhsa/Map/shared/layers/UKHSALogoLayer.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { ControlPosition } from 'leaflet'
+import Image from 'next/image'
+import logo from 'public/assets/images/UKHSA_Lesser_Arms_Stacked_RGB.png'
+import Control from 'react-leaflet-custom-control'
+
+interface LogoLayerProps {
+  position: ControlPosition
+}
+
+export function UKHSALogoLayer({ position }: LogoLayerProps) {
+  return (
+    <Control position={position}>
+      <div>
+        <Image src={logo} height="125" alt="Logo for the UK Health Security Agency" />
+      </div>
+    </Control>
+  )
+}
+;``