Update frequencies to communications, fixed control icons

api/migrations/20250513_initial.sql

@@ -39,20 +39,19 @@ CREATE TABLE IF NOT EXISTS runways (
 
 CREATE INDEX ON runways (icao);
 CREATE INDEX ON runways (runway_id);
-CREATE INDEX ON runways (surface);
 
-CREATE TABLE IF NOT EXISTS frequencies (
+CREATE TABLE IF NOT EXISTS communications (
     id UUID PRIMARY KEY NOT NULL,
     icao TEXT NOT NULL,
     frequency_id TEXT NOT NULL,
-    frequency_name TEXT,
-    frequency_mhz REAL NOT NULL
+    name TEXT,
+    frequencies_mhz REAL[] NOT NULL,
+    phone TEXT
 );
 
-CREATE INDEX ON frequencies (icao);
-CREATE INDEX ON frequencies (frequency_id);
-CREATE INDEX ON frequencies (frequency_name);
-CREATE INDEX ON frequencies (frequency_mhz);
+CREATE INDEX ON communications (icao);
+CREATE INDEX ON communications (frequency_id);
+CREATE INDEX ON communications (name);
 
 CREATE TABLE IF NOT EXISTS metars (
     icao TEXT NOT NULL,

api/src/account/session.rs

@@ -120,7 +120,7 @@ impl Session {
     if let Ok(environment) = std::env::var("ENVIRONMENT") {
       if environment == "development" || environment == "dev" {
         log::trace!(
-          "Development cookie [ID: {}]: {}",
+          "Session cookie [ID: {}]: {}",
           self.id,
           self.session_id
         );
@@ -147,6 +147,11 @@ impl Session {
 
     if let Ok(environment) = std::env::var("ENVIRONMENT") {
       if environment == "development" || environment == "dev" {
+        log::trace!(
+          "Session expiration cookie [ID: {}]: {}",
+          self.id,
+          self.session_id
+        );
         cookie.set_secure(false);
       }
     }

api/src/airports/model/airport.rs

@@ -6,7 +6,7 @@ use reqwest::Client;
 use serde::{Deserialize, Serialize};
 use sqlx::{Postgres, QueryBuilder};
 use crate::airports::{
-  AirportCategory, Frequency, FrequencyRow, Runway, RunwayRow, UpdateFrequency, UpdateRunway,
+  AirportCategory, Communication, CommunicationRow, Runway, RunwayRow, UpdateCommunication, UpdateRunway,
 };
 use crate::db;
 use crate::error::{ApiResult, Error};
@@ -34,7 +34,7 @@ pub struct Airport {
   #[serde(skip_serializing_if = "Option::is_none")]
   pub has_beacon: Option<bool>,
   pub runways: Vec<Runway>,
-  pub frequencies: Vec<Frequency>,
+  pub communications: Vec<Communication>,
   pub public: bool,
   #[serde(skip_serializing_if = "Option::is_none")]
   pub latest_metar: Option<Metar>,
@@ -141,7 +141,7 @@ pub struct UpdateAirport {
   pub has_tower: Option<bool>,
   pub has_beacon: Option<bool>,
   pub runways: Option<Vec<UpdateRunway>>,
-  pub frequencies: Option<Vec<UpdateFrequency>>,
+  pub communications: Option<Vec<UpdateCommunication>>,
   pub public: Option<bool>,
   pub latest_metar_observation: Option<DateTime<Utc>>,
 }
@@ -194,7 +194,7 @@ impl From<AirportRow> for Airport {
       has_tower: airport.has_tower,
       has_beacon: airport.has_beacon,
       runways: vec![],
-      frequencies: vec![],
+      communications: vec![],
       public: airport.public,
       latest_metar: None,
     }
@@ -227,10 +227,10 @@ impl Airport {
     };
 
     let runways_fut = Runway::select_all(icao);
-    let frequencies_fut = Frequency::select_all(icao);
+    let communications_fut = Communication::select_all(icao);
 
-    let (airport_result, runways_result, frequencies_result, metar_result) =
-      tokio::join!(airport_fut, runways_fut, frequencies_fut, metar_fut);
+    let (airport_result, runways_result, communications_result, metar_result) =
+      tokio::join!(airport_fut, runways_fut, communications_fut, metar_fut);
 
     let airport_row: Option<AirportRow> = match airport_result {
       Ok(opt) => opt,
@@ -248,11 +248,11 @@ impl Airport {
       }
     };
 
-    let frequencies: Vec<Frequency> = match frequencies_result {
+    let communications: Vec<Communication> = match communications_result {
       Ok(f) => f,
       Err(err) => {
         log::error!(
-          "Error retrieving frequencies for airport '{}': {}",
+          "Error retrieving communications for airport '{}': {}",
           icao,
           err
         );
@@ -271,7 +271,7 @@ impl Airport {
     airport_row.map(|row| {
       let mut airport: Airport = row.into();
       airport.runways = runways;
-      airport.frequencies = frequencies;
+      airport.communications = communications;
       airport.latest_metar = metar;
       airport
     })
@@ -343,7 +343,7 @@ impl Airport {
     let icaos: Vec<String> = airports.iter().map(|a| a.icao.clone()).collect();
 
     let runway_future = Runway::select_all_map(icaos.clone());
-    let frequency_future = Frequency::select_all_map(icaos.clone());
+    let frequency_future = Communication::select_all_map(icaos.clone());
     let metar_future = if query.metars.unwrap_or(false) {
       Some(Metar::find_all_distinct(client, &icaos))
     } else {
@@ -373,7 +373,7 @@ impl Airport {
 
     for airport in airports.iter_mut() {
       airport.runways = runway_map.get(&airport.icao).cloned().unwrap_or_default();
-      airport.frequencies = frequency_map
+      airport.communications = frequency_map
         .get(&airport.icao)
         .cloned()
         .unwrap_or_default();
@@ -428,15 +428,15 @@ impl Airport {
     let pool = db::pool();
 
     let mut all_runway_rows: Vec<RunwayRow> = Vec::new();
-    let mut all_frequency_rows: Vec<FrequencyRow> = Vec::new();
+    let mut all_frequency_rows: Vec<CommunicationRow> = Vec::new();
     for runway in &self.runways {
       all_runway_rows.push(Runway::into(runway, &self.icao));
     }
-    for frequency in &self.frequencies {
-      all_frequency_rows.push(Frequency::into(frequency, &self.icao));
+    for frequency in &self.communications {
+      all_frequency_rows.push(Communication::into(frequency, &self.icao));
     }
     Runway::insert_all(&all_runway_rows).await?;
-    Frequency::insert_all(&all_frequency_rows).await?;
+    Communication::insert_all(&all_frequency_rows).await?;
 
     let airport: AirportRow = sqlx::query_as(&format!(
       r#"
@@ -476,15 +476,15 @@ impl Airport {
     let pool = db::pool();
     let chunk_size = 1000;
     let mut all_runway_rows: Vec<RunwayRow> = Vec::new();
-    let mut all_frequency_rows: Vec<FrequencyRow> = Vec::new();
+    let mut all_frequency_rows: Vec<CommunicationRow> = Vec::new();
     let airport_rows: Vec<AirportRow> = airports
       .into_iter()
       .map(|airport| {
         for runway in &airport.runways {
           all_runway_rows.push(Runway::into(runway, &airport.icao));
         }
-        for frequency in &airport.frequencies {
-          all_frequency_rows.push(Frequency::into(frequency, &airport.icao));
+        for frequency in &airport.communications {
+          all_frequency_rows.push(Communication::into(frequency, &airport.icao));
         }
         airport.into()
       })
@@ -518,7 +518,7 @@ impl Airport {
     }
 
     Runway::insert_all(&all_runway_rows).await?;
-    Frequency::insert_all(&all_frequency_rows).await?;
+    Communication::insert_all(&all_frequency_rows).await?;
 
     Ok(())
   }

api/src/airports/model/communication.rs

@@ -5,63 +5,69 @@ use uuid::Uuid;
 use crate::db;
 use crate::error::ApiResult;
 
-const TABLE_NAME: &str = "frequencies";
+const TABLE_NAME: &str = "communications";
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
-pub struct Frequency {
-  #[serde(rename = "id")]
-  pub frequency_id: String,
-  #[serde(rename = "name")]
-  pub frequency_name: Option<String>,
-  pub frequency_mhz: f32,
+pub struct Communication {
+  pub id: String,
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub name: Option<String>,
+  pub frequencies_mhz: Vec<f32>,
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub phone: Option<String>,
 }
 
 #[derive(Debug, Deserialize, sqlx::FromRow)]
-pub struct FrequencyRow {
+pub struct CommunicationRow {
   pub id: Uuid,
   pub icao: String,
   pub frequency_id: String,
-  pub frequency_name: Option<String>,
-  pub frequency_mhz: f32,
+  pub name: Option<String>,
+  pub frequencies_mhz: Vec<f32>,
+  pub phone: Option<String>,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
-pub struct UpdateFrequency {
+pub struct UpdateCommunication {
   #[serde(skip_serializing_if = "Option::is_none")]
   pub icao: Option<String>,
-  #[serde(rename = "id", skip_serializing_if = "Option::is_none")]
-  pub frequency_id: Option<String>,
-  #[serde(rename = "name", skip_serializing_if = "Option::is_none")]
-  pub frequency_name: Option<String>,
   #[serde(skip_serializing_if = "Option::is_none")]
-  pub frequency_mhz: Option<f32>,
+  pub id: Option<String>,
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub name: Option<String>,
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub frequencies_mhz: Option<Vec<f32>>,
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub phone: Option<String>,
 }
 
-impl From<FrequencyRow> for Frequency {
-  fn from(frequency: FrequencyRow) -> Self {
+impl From<CommunicationRow> for Communication {
+  fn from(frequency: CommunicationRow) -> Self {
     Self {
-      frequency_id: frequency.frequency_id.clone(),
-      frequency_name: frequency.frequency_name.clone(),
-      frequency_mhz: frequency.frequency_mhz,
+      id: frequency.frequency_id.clone(),
+      name: frequency.name.clone(),
+      frequencies_mhz: frequency.frequencies_mhz,
+      phone: frequency.phone.clone(),
     }
   }
 }
 
-impl Frequency {
-  pub fn into(frequency: &Frequency, icao: &str) -> FrequencyRow {
-    FrequencyRow {
+impl Communication {
+  pub fn into(frequency: &Communication, icao: &str) -> CommunicationRow {
+    CommunicationRow {
       id: Uuid::new_v4(),
       icao: icao.to_string(),
-      frequency_id: frequency.frequency_id.clone(),
-      frequency_name: frequency.frequency_name.clone(),
-      frequency_mhz: frequency.frequency_mhz.clone(),
+      frequency_id: frequency.id.clone(),
+      name: frequency.name.clone(),
+      frequencies_mhz: frequency.frequencies_mhz.clone(),
+      phone: frequency.phone.clone(),
     }
   }
 
   pub async fn select_all_map(icaos: Vec<String>) -> ApiResult<HashMap<String, Vec<Self>>> {
     let pool = db::pool();
 
-    let frequency_rows: Vec<FrequencyRow> = sqlx::query_as(&format!(
+    let frequency_rows: Vec<CommunicationRow> = sqlx::query_as(&format!(
       r#"SELECT * FROM {} WHERE icao = ANY($1)"#,
       TABLE_NAME
     ))
@@ -85,7 +91,7 @@ impl Frequency {
   pub async fn select_all(icao: &str) -> ApiResult<Vec<Self>> {
     let pool = db::pool();
 
-    let frequency_row: Vec<FrequencyRow> = sqlx::query_as(&format!(
+    let frequency_row: Vec<CommunicationRow> = sqlx::query_as(&format!(
       r#"
       SELECT * FROM {} WHERE icao = $1
       "#,
@@ -97,21 +103,22 @@ impl Frequency {
     Ok(frequency_row.into_iter().map(From::from).collect())
   }
 
-  pub async fn insert_all(frequencies: &Vec<FrequencyRow>) -> ApiResult<()> {
+  pub async fn insert_all(communications: &Vec<CommunicationRow>) -> ApiResult<()> {
     let pool = db::pool();
     let chunk_size = 1000;
 
-    for chunk in frequencies.chunks(chunk_size) {
+    for chunk in communications.chunks(chunk_size) {
       let mut query_builder: QueryBuilder<Postgres> = QueryBuilder::new(&format!(
-        "INSERT INTO {} (id, icao, frequency_id, frequency_name, frequency_mhz) ",
+        "INSERT INTO {} (id, icao, frequency_id, name, frequencies_mhz, phone) ",
         TABLE_NAME
       ));
       query_builder.push_values(chunk, |mut b, row| {
         b.push_bind(&row.id)
           .push_bind(&row.icao)
           .push_bind(&row.frequency_id)
-          .push_bind(&row.frequency_name)
-          .push_bind(&row.frequency_mhz);
+          .push_bind(&row.name)
+          .push_bind(&row.frequencies_mhz)
+          .push_bind(&row.phone);
       });
 
       let query = query_builder.build();

api/src/airports/model/mod.rs

@@ -1,9 +1,9 @@
 mod airport;
 mod airport_category;
-mod frequency;
+mod communication;
 mod runway;
 
 pub use airport::*;
 pub use airport_category::*;
-pub use frequency::*;
+pub use communication::*;
 pub use runway::*;

api/src/metars/model.rs

@@ -855,7 +855,7 @@ impl Metar {
           has_tower: None,
           has_beacon: None,
           runways: None,
-          frequencies: None,
+          communications: None,
           public: None,
           latest_metar_observation: Some(observation_time),
         },

bruno/Airports/Get All Airports.bru

@@ -5,7 +5,7 @@ meta {
 }
 
 get {
-  url: {{API_URL}}/airports?page=1&limit=1000&metars=true
+  url: {{API_URL}}/airports?page=1&limit=1000
   body: none
   auth: none
 }
@@ -13,7 +13,7 @@ get {
 params:query {
   page: 1
   limit: 1000
-  metars: true
+  ~metars: true
   ~icaos: 00AA
   ~icaos: KHEF,KJYO,KMRB,KOKV
 }

bruno/Airports/Insert Airport.bru

@@ -22,7 +22,7 @@ body:json {
     "latitude": 0,
     "longitude": 0,
     "runways": [],
-    "frequencies": [],
+    "communications": [],
     "public": true
   }
 }

ui/src/App.tsx

@@ -10,11 +10,12 @@ import { Header } from '@components/Header';
 import AirportLayer from '@components/AirportLayer.tsx';
 import { useEffect, useState } from 'react';
 import { Airport } from '@lib/airport.types.ts';
-import Index from '@components/AirportDrawer';
 import { getWeatherMapUrl } from '@lib/rainViewer.ts';
 import Cookies from 'js-cookie';
 import { IconBuildingAirport, IconRadar } from '@tabler/icons-react';
 import { GroupControl } from '@components/GroupControl.tsx';
+import { AirportDrawer } from '@components/AirportDrawer';
+import { LocateControl } from '@components/LocateControl.tsx';
 // Fix Leaflet's default icon path issues with Webpack
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
@@ -92,7 +93,6 @@ function App() {
     <div className='App'>
       <Header />
       <div className='map-wrapper'>
-        <Index airport={airport} setAirport={setAirport} />
         <MapContainer
           className='leaflet-container'
           attributionControl={false}
@@ -107,6 +107,7 @@ function App() {
           scrollWheelZoom={true}
           zoomControl={false}
         >
+          <AirportDrawer airport={airport} setAirport={setAirport} />
           <LayersControl>
             {layerMap.map((layer, index) => (
               <LayersControl.BaseLayer key={index} checked={selectedLayerIndex === `${index}`} name={layer.name}>
@@ -119,6 +120,7 @@ function App() {
           <ZoomControl position={'bottomright'} />
           <AirportLayer setAirport={setAirport} selectedLayer={selectedLayer} showNoMetar={showNoMetar} />
           <BaseLayerChangeHandler />
+          <LocateControl />
           <GroupControl
             buttons={[
               {

ui/src/components/AirportDrawer/CommunicationTable.tsx

@@ -0,0 +1,27 @@
+import { Table } from '@mantine/core';
+import { Communication } from '@lib/airport.types.ts';
+
+export function CommunicationTable({ communications }: { communications: Communication[] }) {
+  const rows = communications.map((communication) => (
+    <Table.Tr key={communication.id}>
+      <Table.Td>{communication.id}</Table.Td>
+      <Table.Td>{communication.name}</Table.Td>
+      <Table.Td>{communication.frequencies_mhz}</Table.Td>
+      <Table.Td>{communication.phone}</Table.Td>
+    </Table.Tr>
+  ));
+
+  return (
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>ID</Table.Th>
+          <Table.Th>Name</Table.Th>
+          <Table.Th>Frequencies (MHz)</Table.Th>
+          <Table.Th>Phone</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>{rows}</Table.Tbody>
+    </Table>
+  );
+}

ui/src/components/AirportDrawer/FrequencyTable.tsx

@@ -1,25 +0,0 @@
-import { Table } from '@mantine/core';
-import { Frequency } from '@lib/airport.types.ts';
-
-export default function FrequencyTable({ frequencies }: { frequencies: Frequency[] }) {
-  const rows = frequencies.map((frequency) => (
-    <Table.Tr key={frequency.id}>
-      <Table.Td>{frequency.id}</Table.Td>
-      <Table.Td>{frequency.name}</Table.Td>
-      <Table.Td>{frequency.frequency_mhz}</Table.Td>
-    </Table.Tr>
-  ));
-
-  return (
-    <Table>
-      <Table.Thead>
-        <Table.Tr>
-          <Table.Th>ID</Table.Th>
-          <Table.Th>Name</Table.Th>
-          <Table.Th>MHz</Table.Th>
-        </Table.Tr>
-      </Table.Thead>
-      <Table.Tbody>{rows}</Table.Tbody>
-    </Table>
-  );
-}

ui/src/components/AirportDrawer/RunwayTable.tsx

@@ -1,7 +1,7 @@
 import { Table } from '@mantine/core';
 import { Runway } from '@lib/airport.types.ts';
 
-export default function RunwayTable({ runways }: { runways: Runway[] }) {
+export function RunwayTable({ runways }: { runways: Runway[] }) {
   const rows = runways.map((runway) => (
     <Table.Tr key={runway.id}>
       <Table.Td>{runway.id}</Table.Td>

ui/src/components/AirportDrawer/index.tsx

@@ -17,10 +17,12 @@ import { CSSProperties, forwardRef, ReactNode, useEffect, useState } from 'react
 import { getMetars } from '@lib/metar.ts';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconViewfinder } from '@tabler/icons-react';
-import RunwayTable from '@components/AirportDrawer/RunwayTable.tsx';
-import FrequencyTable from '@components/AirportDrawer/FrequencyTable.tsx';
+import { RunwayTable } from '@components/AirportDrawer/RunwayTable.tsx';
+import { CommunicationTable } from '@components/AirportDrawer/CommunicationTable.tsx';
+import { useMap } from 'react-leaflet';
+import type { Map as LeafletMap } from 'leaflet';
 
-export default function Index({
+export function AirportDrawer({
   airport,
   setAirport
 }: {
@@ -29,12 +31,12 @@ export default function Index({
 }) {
   const [metar, setMetar] = useState<Metar | undefined>(undefined);
   const isMobile = useMediaQuery('(max-width: 768px)');
+  const map = useMap();
 
   useEffect(() => {
     if (!airport) return;
     function updateMetar() {
       if (!airport) return;
-      console.log(airport.icao);
       getMetars({ icaos: [airport.icao] }).then((m) => {
         if (m.length > 0) {
           setMetar(m[0]);
@@ -104,7 +106,7 @@ export default function Index({
                 <Tabs.Tab value={'weather'}>Weather</Tabs.Tab>
               </TabsList>
               <Tabs.Panel value={'info'}>
-                <AirportInfo airport={airport} />
+                <AirportInfo map={map} airport={airport} />
               </Tabs.Panel>
               <Tabs.Panel value={'weather'}>
                 <WeatherInfo metar={airport.latest_metar} />
@@ -149,7 +151,12 @@ function AirportInfoRow({ style, children }: { style?: CSSProperties; children:
   );
 }
 
-function AirportInfo({ airport }: { airport: Airport }) {
+function AirportInfo({ map, airport }: { map: LeafletMap, airport: Airport }) {
+  function goToLocation(map: LeafletMap, latitude: number, longitude: number) {
+    if (!map) return
+    map.setView([latitude, longitude], map.getZoom())
+  }
+
   return (
     <div>
       <AirportInfoRow>
@@ -164,7 +171,9 @@ function AirportInfo({ airport }: { airport: Airport }) {
         </AirportInfoSlot>
         <AirportInfoSlot title={'Elevation'} style={{ paddingLeft: '1rem' }} children={`${airport.elevation_ft} ft`} />
         <AirportInfoSlot style={{ marginLeft: 'auto', paddingLeft: '1rem', paddingTop: '0.5rem' }}>
-          <UnstyledButton>
+          <UnstyledButton onClick={() => {
+            goToLocation(map, airport.latitude, airport.longitude)
+          }}>
             <IconViewfinder />
           </UnstyledButton>
         </AirportInfoSlot>
@@ -180,13 +189,13 @@ function AirportInfo({ airport }: { airport: Airport }) {
             </Accordion.Panel>
           </Accordion.Item>
         )}
-        {airport.frequencies != null && airport.frequencies.length > 0 && (
-          <Accordion.Item value={'frequencies'}>
+        {airport.communications != null && airport.communications.length > 0 && (
+          <Accordion.Item value={'communication'}>
             <Accordion.Control>
-              Frequencies
+              Communication
             </Accordion.Control>
             <Accordion.Panel>
-              <FrequencyTable frequencies={airport.frequencies} />
+              <CommunicationTable communications={airport.communications} />
             </Accordion.Panel>
           </Accordion.Item>
         )}

ui/src/components/CustomControl.tsx

@@ -13,63 +13,55 @@ interface Props {
 
 export function CustomControl({ position = 'bottomright', onClick, active = false, title = '', children }: Props) {
   const map = useMap();
-
-  // Create references
-  const buttonRef = useRef<HTMLAnchorElement | null>(null);
-  const reactRootRef = useRef<Root | null>(null);
+  const controlRef = useRef<L.Control>(null);
+  const rootRef = useRef<Root>(null);
 
   useEffect(() => {
     const ctrl = new L.Control({ position });
-
     ctrl.onAdd = () => {
-      const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control custom-control');
-      const button = L.DomUtil.create('a', '', container) as HTMLAnchorElement;
-      button.href = '#';
-      button.title = title;
+      return L.DomUtil.create('div', 'leaflet-bar leaflet-control custom-control');
+    }
 
-      // Prevent clicks/scrolls on the control from hitting the map
-      L.DomEvent.disableClickPropagation(container);
-      L.DomEvent.disableScrollPropagation(container);
-
-      // Wire up the handler
-      L.DomEvent.on(button, 'click', L.DomEvent.stop);
-      L.DomEvent.on(button, 'click', L.DomEvent.preventDefault);
-      L.DomEvent.on(button, 'click', () => onClick());
-
-      buttonRef.current = button;
-
-      // Initial active status
-      if (active) {
-        button.classList.add('active');
-      }
-
-      // Render children
-      if (children) {
-        reactRootRef.current = createRoot(button);
-        reactRootRef.current.render(children);
-      }
-      return container;
-    };
-
-    // Add component to the map
     ctrl.addTo(map);
+    controlRef.current = ctrl;
+
+    // @ts-expect-error ctrl is a L.Control
+    const container = (ctrl as unknown)._container as HTMLElement;
+    rootRef.current = createRoot(container);
 
-    // On unmount, remove component
     return () => {
-      ctrl.remove();
-      if (reactRootRef.current) {
-        reactRootRef.current.unmount();
-        reactRootRef.current = null;
+      if (rootRef.current) {
+        rootRef.current!.unmount();
+        rootRef.current = null;
       }
+      ctrl.remove();
     };
-  }, [map, position, onClick, children, active, title]);
+  }, [map, position]);
 
   useEffect(() => {
-    const btn = buttonRef.current;
-    if (!btn) return;
-    if (active) btn.classList.add('active');
-    else btn.classList.remove('active');
-  }, [active]);
+    if (rootRef.current) {
+      rootRef.current.render(
+        <a
+          href={'#'}
+          title={title}
+          className={active ? 'active' : ''}
+          onClick={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onClick();
+          }}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '4px'
+          }}
+        >
+          {children}
+        </a>
+      )
+    }
+  }, [onClick, active, title, children]);
 
   return null;
 }

ui/src/components/GroupControl.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useRef } from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useRef } from 'react';
 import * as L from 'leaflet';
 import { useMap } from 'react-leaflet';
 import { createRoot, Root } from 'react-dom/client';
@@ -19,56 +18,57 @@ interface GroupControlProps {
 export function GroupControl({ position = 'bottomright', buttons }: GroupControlProps) {
   const map = useMap();
   // References
-  const buttonRefs = useRef<HTMLAnchorElement[]>([]);
-  const reactRootRefs = useRef<Root[]>([]);
+  const controlRef = useRef<L.Control>(null);
+  const rootRef = useRef<Root>(null);
 
   useEffect(() => {
     const ctrl = new L.Control({ position });
-    const current = reactRootRefs.current;
+    controlRef.current = ctrl;
 
     ctrl.onAdd = () => {
-      const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control custom-control');
-      buttons.forEach((btnDef, i) => {
-        const btn = L.DomUtil.create('a', '', container) as HTMLAnchorElement;
-        btn.href = '#';
-        btn.title = btnDef.title;
-
-        // standard leaflet click‐blocking magic
-        L.DomEvent.disableClickPropagation(btn);
-        L.DomEvent.disableScrollPropagation(btn);
-        L.DomEvent.on(btn, 'click', L.DomEvent.stop)
-          .on(btn, 'click', L.DomEvent.preventDefault)
-          .on(btn, 'click', btnDef.onClick);
-
-        // Initial active status
-        if (btnDef.active) btn.classList.add('active');
-
-        // Render root
-        const rootRef = createRoot(btn);
-        rootRef.render(btnDef.icon);
-        reactRootRefs.current[i] = rootRef;
-        buttonRefs.current[i] = btn;
-      });
-      return container;
+      return L.DomUtil.create('div', 'leaflet-bar leaflet-control custom-control');
     };
 
     ctrl.addTo(map);
 
+    // @ts-expect-error ctrl is a L.Control
+    const container = (ctrl as unknown)._container as HTMLElement;
+    rootRef.current = createRoot(container);
+
     return () => {
       ctrl.remove();
-      // unmount React roots
-      current.forEach((r) => r.unmount());
+      rootRef.current!.unmount();
     };
-  }, [map, buttons, position]);
+  }, [map, position]);
 
-  // if you want to toggle “.active” live when props change
   useEffect(() => {
-    buttons.forEach((b, i) => {
-      const btn = buttonRefs.current[i];
-      if (!btn) return;
-      if (b.active) btn.classList.add('active');
-      else btn.classList.remove('active');
-    });
+    if (rootRef.current) {
+      rootRef.current.render(
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          {buttons.map((b, i) => (
+            <a
+              key={i}
+              href="#"
+              title={b.title}
+              className={b.active ? 'active' : ''}
+              onClick={e => {
+                e.preventDefault();
+                e.stopPropagation();
+                b.onClick();
+              }}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '4px'
+              }}
+            >
+              {b.icon}
+            </a>
+          ))}
+        </div>
+      );
+    }
   }, [buttons]);
 
   return null;

ui/src/components/LocateControl.tsx

@@ -0,0 +1,31 @@
+import { useMap } from 'react-leaflet';
+import { CustomControl } from '@components/CustomControl.tsx';
+import { IconCurrentLocation } from '@tabler/icons-react';
+
+export function LocateControl() {
+  const map = useMap();
+
+  function handleClick() {
+    if (!navigator.geolocation) {
+      alert('Geolocation is not supported by your browser');
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        const { latitude, longitude } = pos.coords;
+        // you can use setView or flyTo
+        map.setView([latitude, longitude], map.getZoom());
+      },
+      (err) => {
+        console.error(err);
+        alert('Unable to retrieve your location');
+      }
+    );
+  }
+
+  return (
+    <CustomControl onClick={handleClick} title="Go to my location">
+      <IconCurrentLocation />
+    </CustomControl>
+  );
+}

ui/src/lib/airport.types.ts

@@ -36,7 +36,7 @@ export interface Airport {
   has_tower: boolean;
   has_beacon: boolean;
   runways: Runway[];
-  frequencies: Frequency[];
+  communications: Communication[];
   public: boolean;
   latest_metar?: Metar;
 }
@@ -48,10 +48,11 @@ export interface Runway {
   surface: string;
 }
 
-export interface Frequency {
+export interface Communication {
   id: string;
   name: string;
-  frequency_mhz: number;
+  frequencies_mhz: number[];
+  phone: string;
 }
 
 export interface GetAirportsResponse {