Apertures layer

src/components/BoxMenu.tsx

@@ -6,7 +6,7 @@ import {
   SubmapFileExtensions,
 } from '../configs/submapConfigs';
 import { downloadSubmap } from '../utils/fetchUtils';
-import { transformBoxes } from '../utils/layerUtils';
+import { transformBoxCoords } from '../utils/layerUtils';
 import { Map } from 'ol';
 
 type BoxMenuProps = {
@@ -42,7 +42,7 @@ export function BoxMenu({
   const onDownloadClick = useCallback(
     (ext: SubmapFileExtensions) => {
       if (submapData) {
-        const boxPosition = transformBoxes(boxData, flipped);
+        const boxPosition = transformBoxCoords(boxData, flipped);
         downloadSubmap(
           {
             ...submapData,

src/components/OpenLayersMap.tsx

@@ -56,6 +56,7 @@ import {
 import { ToggleSwitch } from './ToggleSwitch';
 import { CenterMapFeature } from './CenterMapFeature';
 import { getHistogramData } from '../utils/fetchUtils';
+import { AperturesLayer } from './layers/AperturesLayer';
 
 export type MapProps = {
   mapGroups: MapGroupResponse[];
@@ -534,6 +535,11 @@ export function OpenLayersMap({
         externalSearchMarkerRef={externalSearchMarkerRef}
         flipped={flipTiles}
       />
+      <AperturesLayer
+        mapRef={mapRef}
+        activeBaselayerId={activeBaselayer?.layer_id}
+        flipped={flipTiles}
+      />
       <SourcesLayer
         sourceGroups={sourceGroups}
         activeSourceGroupIds={activeSourceGroupIds}

src/components/icons/ApertureIcon.tsx

@@ -0,0 +1,28 @@
+import { CSSProperties } from 'react';
+
+type Props = {
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+};
+
+export function ApertureIcon({ width = 18, height = 18 }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-radius-icon lucide-radius"
+    >
+      <path d="M20.34 17.52a10 10 0 1 0-2.82 2.82" />
+      <circle cx="19" cy="19" r="2" />
+      <path d="m13.41 13.41 4.18 4.18" />
+      <circle cx="12" cy="12" r="2" />
+    </svg>
+  );
+}