map: add vertical boundaries to sector

atciss-frontend/src/components/map/NavaidMarker.tsx

@@ -176,7 +176,7 @@ export const NavaidMarker = ({ designator }: { designator: string }) => {
       >
         {icons[navaid.type.toLowerCase()] ?? icons["rnav"]}
       </svg>
-      <div className="navaid-label">{navaid.designator}</div>
+      <div className="marker-label navaid-label">{navaid.designator}</div>
     </>
   )
 

atciss-frontend/src/components/map/SectorPolygon.tsx

@@ -16,6 +16,9 @@ import createCachedSelector from "re-reselect"
 import { selectLevel } from "../../services/mapSlice"
 import { selectAllAtis } from "../../services/atisApi"
 import { RootState } from "../../app/store"
+import { useEffect, useRef, useState } from "react"
+import { VerticalBoundary } from "./VerticalBoundary"
+import { LatLng } from "leaflet"
 
 const selectSectorBounds = createCachedSelector(
   [
@@ -69,6 +72,14 @@ export const SectorPolygon = ({
   const owner = useAppSelector((store) => selectOwner(store, id))
   const sector = useAppSelector((store) => selectSector(store, id))
   const selectedPosition = useAppSelector(selectSelectedPosition)
+  const polygon = useRef<L.Polygon>(null)
+  const [center, setCenter] = useState<LatLng | null>(null)
+
+  useEffect(() => {
+    if (polygon.current) {
+      setCenter(polygon.current.getCenter())
+    }
+  }, [polygon.current])
 
   return (
     owner && (
@@ -80,7 +91,14 @@ export const SectorPolygon = ({
           fillOpacity: owner?.id === selectedPosition ? 0.5 : 0.3,
         }}
         positions={points}
+        ref={polygon}
       >
+        <VerticalBoundary
+          color={owner?.colours[0]?.hex}
+          center={center}
+          min={min}
+          max={max}
+        />
         <Tooltip>
           <Box sx={{ fontSize: "1" }}>
             <Text variant="label">{sector.id}</Text>

atciss-frontend/src/components/map/VerticalBoundary.tsx

@@ -0,0 +1,51 @@
+/** @jsxImportSource theme-ui */
+
+import { useState } from "react"
+import { Marker, useMap, useMapEvent } from "react-leaflet"
+import { z3 } from "../../app/utils"
+import { createPortal } from "react-dom"
+import L, { LatLngExpression } from "leaflet"
+
+export const VerticalBoundary = ({
+  min,
+  max,
+  center,
+  color,
+}: {
+  min: number | null
+  max: number | null
+  center: LatLngExpression | null
+  color: string
+}) => {
+  const [zoom, setZoom] = useState(0)
+
+  const icon = color && (
+    <div className="marker-label" sx={{ filter: "brightness(.5)", color }}>
+      <div sx={{ borderBottom: `1px solid ${color}` }}>{!!max && z3(max)}</div>
+      <div>{!!min && z3(min)}</div>
+    </div>
+  )
+
+  const element = L.DomUtil.create("div")
+
+  const divIcon = L.divIcon({
+    html: element,
+    className: "",
+    iconSize: [22, 14],
+  })
+
+  const map = useMap()
+  useMapEvent("zoomend", () => setZoom(map.getZoom()))
+
+  return (
+    center &&
+    zoom > 8 && (
+      <>
+        {createPortal(icon, element)}
+        <Marker position={center as LatLngExpression} icon={divIcon}>
+          <>Test</>
+        </Marker>
+      </>
+    )
+  )
+}

atciss-frontend/src/index.css

@@ -120,9 +120,12 @@ pre {
   margin: 0;
 }
 
-.navaid-label {
+.marker-label {
   font-family: "Source Code Pro", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
   font-weight: bold;
+}
+
+.navaid-label {
   margin-left: 0.7rem;
   margin-top: -0.3rem;
   text-shadow: