Merge pull request #511 from vsimakhin/feature/customizable-map

customizable map format

Author: vsimakhin

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [Unreleased]
+
+- New: New map options and map sources (satellite, terrain).
+
 ## [4.4.0] - 12.05.2026
 
 - Fix: Remarks were not displayed in the licensing table.

README.md

@@ -63,6 +63,10 @@ The application will automatically create a local SQLite database on the first s
 
 # Changelog
 
+## [Unreleased]
+
+- New: New map options and map sources (satellite, terrain).
+
 ## [4.4.0] - 12.05.2026
 
 - Fix: Remarks were not displayed in the licensing table.
@@ -428,6 +432,10 @@ Frontend:
 * file-type https://github.com/sindresorhus/file-type
 * mapbox/togeojson https://github.com/mapbox/togeojson
 
+Map Sources:
+* OpenStreetMap https://www.openstreetmap.org/
+* Esri/ArcGIS Online https://www.arcgis.com/
+
 ---
 
 # Star History

app/ui/src/assets/map-pin2.png

@@ -4,15 +4,9 @@ import 'ol/ol.css';
 // openlayers
 import Map from 'ol/Map';
 import View from 'ol/View';
-import TileLayer from 'ol/layer/Tile';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
-import OSM from 'ol/source/OSM';
 import FullScreen from 'ol/control/FullScreen';
-import Feature from 'ol/Feature';
-import Point from 'ol/geom/Point';
-import LineString from 'ol/geom/LineString';
-import { Style, Icon, Fill, Text } from 'ol/style';
 import Overlay from 'ol/Overlay';
 import { transform } from 'ol/proj';
 // MUI UI elements
@@ -25,14 +19,9 @@ import { queryClient } from '../../util/http/http';
 import { fetchAirport } from '../../util/http/airport';
 import { DownloadMapButton } from './DownloadMapButton';
 import useCustomFields from '../../hooks/useCustomFields';
-
-import icon1 from "../../assets/favicon.ico";
-import icon2 from "../../assets/map-pin.png";
-
-const icons = {
-  ico: { src: icon1, displacement: [0, 0] },
-  pin: { src: icon2, displacement: [0, 14] }
-};
+import { DEFAULT_MAP_OPTIONS, drawGreatCircleLine, drawTrackLog, addMarker, MAP_OPTIONS_NAME, getMapBase } from './helpers';
+import MapOptionsButton from './MapOptionsButton';
+import { CODEC_JSON, useLocalStorageState } from '../../hooks/useLocalStorageState';
 
 const getAirportData = async (id, airportsMap) => {
   if (airportsMap) {
@@ -62,95 +51,9 @@ const getAirportData = async (id, airportsMap) => {
   }
 }
 
-const addMarker = (features, airport, options) => {
-  /**
-   * Code string for an airport based on its IATA and ICAO codes.
-   * If the airport has both IATA and ICAO codes and they are different, 
-   * the code will be in the format "ICAO/IATA". Otherwise, it will just be the ICAO code.
-   */
-  const code = airport.iata && airport.iata !== airport.icao ? `${airport.icao}/${airport.iata}` : airport.icao;
-
-  // Check if marker already exists
-  const exists = features.find(f => f.get('code') === code);
-  if (exists) return;
-
-  const feature = new Feature({
-    geometry: new Point([airport.lon, airport.lat]).transform('EPSG:4326', 'EPSG:3857'),
-    code: code,
-    name: airport.name,
-    country: airport.country,
-    city: airport.city,
-    elevation: airport.elevation,
-    coordinates: `${airport.lat}, ${airport.lon}`,
-  });
-
-  feature.setStyle(
-    new Style({
-      image: new Icon({ ...icons[options.icon] }),
-      text: options.airport_ids ? new Text({
-        text: code,
-        offsetY: -12,
-        scale: 1.3,
-        fill: new Fill({
-          color: '#333',
-        }),
-      }) : null,
-    }),
-  );
-
-  features.push(feature);
-}
-
-const createGreatCircleLine = (start, end, segments = 64) => {
-  const lon1 = start.lon * Math.PI / 180
-  const lat1 = start.lat * Math.PI / 180
-  const lon2 = end.lon * Math.PI / 180
-  const lat2 = end.lat * Math.PI / 180
-
-  const coords = []
-
-  const d = 2 * Math.asin(Math.sqrt(Math.sin((lat1 - lat2) / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin((lon1 - lon2) / 2) ** 2))
-
-  for (let i = 0; i <= segments; i++) {
-    const f = i / segments
-    const A = Math.sin((1 - f) * d) / Math.sin(d)
-    const B = Math.sin(f * d) / Math.sin(d)
-    const x = A * Math.cos(lat1) * Math.cos(lon1) + B * Math.cos(lat2) * Math.cos(lon2)
-    const y = A * Math.cos(lat1) * Math.sin(lon1) + B * Math.cos(lat2) * Math.sin(lon2)
-    const z = A * Math.sin(lat1) + B * Math.sin(lat2)
-    const lat = Math.atan2(z, Math.sqrt(x * x + y * y))
-    const lon = Math.atan2(y, x)
-
-    coords.push(transform([lon * 180 / Math.PI, lat * 180 / Math.PI], 'EPSG:4326', 'EPSG:3857'))
-  }
+export const FlightMap = ({ data, title = "Flight Map", sx, airportsMap }) => {
+  const [options] = useLocalStorageState(MAP_OPTIONS_NAME, DEFAULT_MAP_OPTIONS, { codec: CODEC_JSON });
 
-  return new LineString(coords)
-}
-
-const drawGreatCircleLine = (departure, arrival, vectorSource) => {
-  const geometry = createGreatCircleLine(departure, arrival)
-  const routeFeature = new Feature({ geometry, type: 'route' })
-  vectorSource.addFeature(routeFeature)
-}
-
-const drawTrackLog = (flightTrack, vectorSource, flightId) => {
-  const track = JSON.parse(atob(flightTrack));
-
-  const coordinates = track.map((geometry) =>
-    transform([geometry[1], geometry[0]], 'EPSG:4326', 'EPSG:3857')
-  );
-
-  const lineFeature = new LineString(coordinates);
-  const feature = new Feature({
-    geometry: lineFeature,
-    lineKey: `track-${flightId}`,
-  });
-  vectorSource.addFeature(feature);
-}
-
-const DEFAULT_OPTIONS = { routes: true, tracks: false, airport_ids: true, icon: 'ico' };
-
-export const FlightMap = ({ data, options = DEFAULT_OPTIONS, title = "Flight Map", sx, airportsMap }) => {
   const mapRef = useRef(null);
   const containerRef = useRef(null);
 
@@ -171,9 +74,11 @@ export const FlightMap = ({ data, options = DEFAULT_OPTIONS, title = "Flight Map
     overlayRef.current = new Overlay({ element: containerRef.current });
     const vectorLayer = new VectorLayer({ source: vectorSourceRef.current });
 
+    const mapLayer = getMapBase(options.map_base);
+
     const mapInstance = new Map({
       target: mapRef.current,
-      layers: [new TileLayer({ source: new OSM() }), vectorLayer],
+      layers: [mapLayer, vectorLayer],
       view: new View({
         center: transform([10, 45], "EPSG:4326", "EPSG:3857"),
         zoom: 4,
@@ -211,7 +116,7 @@ export const FlightMap = ({ data, options = DEFAULT_OPTIONS, title = "Flight Map
       mapRefInstance.current = null;
       setMap(null);
     };
-  }, []);
+  }, [options.map_base]);
 
   useEffect(() => {
     if (!map || !data) return;
@@ -257,14 +162,14 @@ export const FlightMap = ({ data, options = DEFAULT_OPTIONS, title = "Flight Map
 
         fullRoute.push(arrival);
 
-        if (options.routes) {
+        if (options.routes.enabled) {
           for (let i = 0; i < fullRoute.length - 1; i++) {
-            drawGreatCircleLine(fullRoute[i], fullRoute[i + 1], vectorSourceRef.current);
+            drawGreatCircleLine(fullRoute[i], fullRoute[i + 1], vectorSourceRef.current, options.routes.color, options.routes.thickness);
           }
         }
 
-        if (options.tracks && flight.track) {
-          drawTrackLog(flight.track, vectorSourceRef.current, flight.uuid || flight.id);
+        if (options.tracks.enabled && flight.track) {
+          drawTrackLog(flight.track, vectorSourceRef.current, flight.uuid || flight.id, options.tracks.color, options.tracks.thickness);
         }
 
         totalDistance += flight.distance;
@@ -307,7 +212,13 @@ export const FlightMap = ({ data, options = DEFAULT_OPTIONS, title = "Flight Map
     <>
       <Card variant="outlined" sx={{ ...sx, height: "85vh", position: "relative" }}>
         <CardContent sx={{ height: "100%" }}>
-          <CardHeader title={title} action={map ? <DownloadMapButton map={map} /> : null} />
+          <CardHeader title={title}
+            action={
+              <>
+                <DownloadMapButton map={map} />
+                <MapOptionsButton />
+              </>
+            } />
           <div ref={mapRef} style={{ width: "100%", height: "calc(100% - 50px)", borderRadius: "4px", overflow: "hidden" }} />
           {distance > 0 && (
             <Typography sx={{ mt: 1 }}>

app/ui/src/components/FlightMap/FlightMap.jsx

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+// MUI
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+// MUI Icons
+import SettingsIcon from '@mui/icons-material/Settings';
+// Custom
+import { useDialogs } from '../../hooks/useDialogs/useDialogs';
+import MapOptionsModal from './MapOptionsModal';
+
+export const MapOptionsButton = () => {
+  const dialogs = useDialogs();
+
+  const handleOnClick = useCallback(async () => {
+    await dialogs.open(MapOptionsModal)
+  }, [dialogs]);
+
+  return (
+    <Tooltip title="More map options">
+      <IconButton size="small" onClick={handleOnClick} >
+        <SettingsIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default MapOptionsButton;