@flybywiresim/map - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

dist/FlightsLayer.js

 import React, { useEffect, useState } from "react";
-import { FeatureGroup, Marker, Popup, Tooltip, useMapEvents } from "react-leaflet";
-import L from "leaflet";
-import { Telex, Airport } from "@flybywiresim/api-client";
+import { FeatureGroup, useMapEvents } from "react-leaflet";
+import { Telex } from "@flybywiresim/api-client";
+import AirportsLayer from "./AirportsLayer";
+import FlightMarker from "./FlightMarker";
 
@@ -18,4 +19,4 @@ const FlightsLayer = props => {
   const [data, setData] = useState([]);
-  const [selectedAirports, setSelectedAirports] = useState([]);
   const [bounds, setBounds] = useState(map.getBounds());
+  const [selectedConnection, setSelectedConnection] = useState(null);
   useEffect(() => {
@@ -32,7 +33,3 @@ if (props.refreshInterval && props.refreshInterval > 0) {
   async function getLocationData(staged = false, bounds) {
-    console.log("Starting update");
     setIsUpdating(true);
-    let flights = [];
-    let skip = 0;
-    let total = 0;
     let apiBounds = {
@@ -54,17 +51,10 @@ north: 90,
 
-    do {
-      try {
-        const data = await Telex.fetchConnections(skip, 100, apiBounds);
-        total = data.total;
-        skip += data.count;
-        flights = flights.concat(data.results);
+    let flights = [];
 
-        if (staged) {
-          setData(flights);
-        }
-      } catch (err) {
-        console.error(err);
-        break;
-      }
-    } while (total > skip);
+    if (props.hideOthers) {
+      const flt = await Telex.findConnection(props.currentFlight);
+      flights.push(flt);
+    } else {
+      flights = await Telex.fetchAllConnections(apiBounds, staged ? setData : undefined);
+    }
 
@@ -74,75 +64,19 @@ setIsUpdating(false);
     props.updateFlightData(flights);
-    console.log("Update finished");
   }
 
-  async function getAirports(origin, destination) {
-    const airports = []; // Two individual try/catch: If one fails the other should still show
-
-    if (origin) {
-      try {
-        const originArpt = await Airport.get(origin);
-        airports.push({
-          airport: originArpt,
-          tag: 'origin'
-        });
-      } catch (e) {
-        console.error(e);
-      }
-    }
-
-    if (destination) {
-      try {
-        const destinationArpt = await Airport.get(destination);
-        airports.push({
-          airport: destinationArpt,
-          tag: 'destination'
-        });
-      } catch (e) {
-        console.error(e);
-      }
-    }
-
-    setSelectedAirports(airports);
-  }
-
-  function clearAirports() {
-    setSelectedAirports([]);
-  }
-
-  return /*#__PURE__*/React.createElement(FeatureGroup, null, data.map(flight => /*#__PURE__*/React.createElement(Marker, {
-    key: flight.id,
-    position: [flight.location.y, flight.location.x],
-    icon: L.divIcon({
-      iconSize: [20, 23],
-      iconAnchor: [10, 6.5],
-      className: 'mapIcon',
-      html: `<img alt="${flight.flight}" src="${flight.flight === props.currentFlight ? props.planeIconHighlight : props.searchedFlight === flight.flight ? props.planeIconHighlight : props.planeIcon}"
-                                        style="transform-origin: center; transform: rotate(${flight.heading}deg);"/>`
-    })
-  }, /*#__PURE__*/React.createElement(Popup, {
-    onOpen: () => getAirports(flight.origin, flight.destination),
-    onClose: () => clearAirports()
-  }, /*#__PURE__*/React.createElement("h1", null, "Flight ", flight.flight), flight.origin && flight.destination ? /*#__PURE__*/React.createElement("h2", null, flight.origin, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "18",
-    height: "18",
-    viewBox: "0 0 24 24"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M16 10h4a2 2 0 0 1 0 4h-4l-4 7h-3l2 -7h-4l-2 2h-3l2 -4l-2 -4h3l2 2h4l-2 -7h3z"
-  })), " ", flight.destination) : "", /*#__PURE__*/React.createElement("p", null, "Aircraft: ", flight.aircraftType), /*#__PURE__*/React.createElement("p", null, "Altitude: ", flight.trueAltitude, "ft")))), selectedAirports.map(airport => /*#__PURE__*/React.createElement(Marker, {
-    key: airport.airport.icao + '-' + airport.tag,
-    position: [airport.airport.lat, airport.airport.lon],
-    icon: L.divIcon({
-      iconSize: [20, 17],
-      iconAnchor: [10, 8.5],
-      className: "mapIcon",
-      html: `<img alt="${airport.airport.name}"
-                                        src="${airport.tag === "destination" ? props.arrivalIcon : props.departureIcon}" />`
-    })
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    direction: "top",
-    permanent: true
-  }, /*#__PURE__*/React.createElement("p", null, airport.airport.icao, " - ", airport.airport.name)))));
+  return /*#__PURE__*/React.createElement(FeatureGroup, null, data.map(connection => /*#__PURE__*/React.createElement(FlightMarker, {
+    key: connection.id,
+    connection: connection,
+    icon: props.planeIcon,
+    highlightIcon: props.planeIconHighlight,
+    isHighlighted: props.searchedFlight === connection.flight || props.currentFlight === connection.flight,
+    onPopupOpen: () => setSelectedConnection(connection),
+    onPopupClose: () => setSelectedConnection(null)
+  })), selectedConnection !== null ? /*#__PURE__*/React.createElement(AirportsLayer, {
+    connection: selectedConnection,
+    departureIcon: props.departureIcon,
+    arrivalIcon: props.arrivalIcon
+  }) : "");
 };
 
 export default FlightsLayer;

dist/Map.js

@@ -96,7 +96,7 @@ import React, { useState, useEffect } from "react";
 
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MapContainer, {
+  return /*#__PURE__*/React.createElement(MapContainer, {
     id: "mapid",
     key: keyMap,
-    center: [51.505, -0.09],
-    zoom: 5,
+    center: props.center || [50, 8],
+    zoom: props.zoom || 5,
     scrollWheelZoom: !props.disableScroll,
@@ -107,6 +107,3 @@ worldCopyJump: true
     url: selectedTile.url
-  }), !props.disableSearch ? /*#__PURE__*/React.createElement(SearchBar, {
-    flightData: flightData,
-    updateSearchedFlight: updateSearchedFlight
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null), !props.disableFlights ? /*#__PURE__*/React.createElement(FlightsLayer, {
+  }), !props.disableFlights ? /*#__PURE__*/React.createElement(FlightsLayer, {
     planeIcon: selectedTile.planeIcon,
@@ -119,3 +116,4 @@ planeIconHighlight: selectedTile.planeIconHighlight,
     searchedFlight: searchedFlight,
-    refreshInterval: props.refreshInterval || 10000
+    refreshInterval: props.refreshInterval || 10000,
+    hideOthers: props.hideOthers
   }) : /*#__PURE__*/React.createElement(React.Fragment, null), !props.disableInfo ? /*#__PURE__*/React.createElement(InfoPanel, {
@@ -125,5 +123,8 @@ refreshInterval: props.refreshInterval || 10000,
     changeTiles: selectTile
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null)));
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null), !props.disableSearch ? /*#__PURE__*/React.createElement(SearchBar, {
+    flightData: flightData,
+    updateSearchedFlight: updateSearchedFlight
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null));
 };
 
 export default Map;

package.json

 {
   "name": "@flybywiresim/map",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "FlyByWire Simulations live map",
@@ -18,3 +18,3 @@ "private": false,
   "dependencies": {
-    "@flybywiresim/api-client": "^0.3.0",
+    "@flybywiresim/api-client": "^0.5.0",
     "leaflet": "^1.7.1",
@@ -21,0 +21,0 @@ "react": "^17.0.1",

No alert changes

Improved metrics

Total package byte prevSize

1033641

increased by0.28%

Number of package files

16

increased by14.29%

Lines of code

414

increased by21.76%

Dependency changes

• + Added@flybywiresim/api-client@0.5.0(transitive)

• - Removed@flybywiresim/api-client@0.3.0(transitive)

• Updated@flybywiresim/api-client@^0.5.0