Allow restricting world map to visited region

client/components/WorldMap.tsx

@@ -5,6 +5,19 @@ import API from '../api';
 import ConfigStorage from '../storage/configStorage';
 import { Coord, Trajectory } from '../models';
 
+interface BoundsInterface {
+    south: number;
+    north: number;
+    west: number;
+    east: number;
+}
+const defaultBounds: BoundsInterface = {
+    south: -90,
+    north: 90,
+    west: -180,
+    east: 180
+}
+
 interface MapGeographiesProps {
     lines: Trajectory[];
     markers: Coord[];
@@ -83,13 +96,45 @@ function MapFeatures({ lines, markers, zoom }: MapGeographiesProps) {
 export default function WorldMap() {
     const [lines, setLines] = useState<Trajectory[]>([]);
     const [markers, setMarkers] = useState<Coord[]>([]);
+    const [initialZoom, setInitialZoom] = useState<number>(1);
     const [zoom, setZoom] = useState<number>(1);
+    const [center, setCenter] = useState<[number, number]>([0, 0])
 
     useEffect(() => {
         API.get("/geography/decorations")
         .then((data: [Trajectory[], Coord[]]) => {
             setLines(data[0]);
             setMarkers(data[1]);
+
+            if (data[1] && data[1].length > 1 && ConfigStorage.getSetting("restrictWorldMap") === "true") {
+                // find bounding box defined by visited airports
+                // i.e. get southernmost, eastmost, northmost, westmost
+                // visited airports
+                const latitudes = data[1].map(coord => coord.latitude);
+                const longitudes = data[1].map(coord => coord.longitude);
+
+                const south = Math.min(...latitudes);
+                const north = Math.max(...latitudes);
+                const west = Math.min(...longitudes);
+                const east = Math.max(...longitudes);
+
+                // compute center
+                const centerLon = (west + east) / 2;
+                const centerLat = (south + north) / 2;
+                setCenter([centerLon, centerLat]);
+
+                // compute zoom
+                const lonSpan = east - west;
+                const latSpan = north - south;
+                const maxSpan = Math.max(lonSpan, latSpan);
+                const computedZoom = Math.min(150 / maxSpan, 3);
+                setInitialZoom(computedZoom);
+
+                if (computedZoom < 1) {
+                   setInitialZoom(1);
+                   setCenter([0, 0]);
+                }
+            }
         });
     }, []);
 
@@ -98,6 +143,8 @@ export default function WorldMap() {
             <ComposableMap width={1000} height={470}>
                 <ZoomableGroup maxZoom={10}
                                translateExtent={[[0, 0], [1000, 470]]}
+                               zoom={initialZoom}
+                               center={center}
                                onMove={({zoom: newZoom}) => {
                                    if (newZoom != zoom) setZoom(newZoom)
                                }}>

client/pages/New.tsx

@@ -143,7 +143,7 @@ export default function New() {
 
         if (payload.length == 1) {
             API.post(`/flights?timezones=${localAirportTime}`, payload[0])
-            .then(flightID => navigate(`/flights?id=${flightID})`));
+            .then(flightID => navigate(`/flights?id=${flightID}`));
         } else {
             API.post(`/flights/many?timezones=${localAirportTime}`, payload)
             .then(creatorFlightID => navigate(`/flights?id=${creatorFlightID}`));

client/pages/Settings.tsx

@@ -246,6 +246,14 @@ export default function Settings() {
                                 onChange={changeOption} />
                 </div>
 
+                <div className="flex justify-between">
+                    <Label text="Restrict world map to visited areas" />
+                    <Checkbox name="restrictWorldMap"
+                                checked={options.restrictWorldMap === "true"}
+                                onChange={changeOption} />
+
+                </div>
+
                 <hr />
 
                 <Subheading text="Utilities" />

client/storage/configStorage.ts

@@ -5,20 +5,23 @@ export interface ConfigInterface {
     showVisitedCountries: string;
     metricUnits: string;
     localAirportTime: string;
+    restrictWorldMap: string;
 }
 const ConfigKeys = ["frequencyBasedMarker",
                     "frequencyBasedLine",
                     "showVisitedCountries",
                     "metricUnits",
-                    "localAirportTime"];
+                    "localAirportTime",
+                    "restrictWorldMap"];
 type Config = typeof ConfigKeys[number];
 
 const defaultConfig: ConfigInterface = {
     frequencyBasedMarker: "false",
     frequencyBasedLine: "false",
     showVisitedCountries: "false",
     metricUnits: "true",
-    localAirportTime: "true"
+    localAirportTime: "true",
+    restrictWorldMap: "false",
 }
 
 class ConfigStorageClass {