@flybywiresim/map - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/FlightsLayer.js

 import React, { useEffect, useState } from "react";
-import { Marker, Popup, Tooltip, useMapEvents } from "react-leaflet";
+import { FeatureGroup, Marker, Popup, Tooltip, useMapEvents } from "react-leaflet";
 import L from "leaflet";
@@ -19,10 +19,9 @@ import { Telex, Airport } from "@flybywiresim/api-client";
   const [selectedAirports, setSelectedAirports] = useState([]);
-  const [refreshInterval, setRefreshInterval] = useState(10000);
   const [bounds, setBounds] = useState(map.getBounds());
   useEffect(() => {
-    if (refreshInterval && refreshInterval > 0) {
-      const interval = setInterval(() => getLocationData(false, map.getBounds()), refreshInterval);
+    if (props.refreshInterval && props.refreshInterval > 0) {
+      const interval = setInterval(() => getLocationData(false, map.getBounds()), props.refreshInterval);
       return () => clearInterval(interval);
     }
-  }, [refreshInterval]);
+  }, [props.refreshInterval]);
   useEffect(() => {
@@ -73,9 +72,2 @@ getLocationData(false, bounds);
     props.updateFlightData(flights);
-
-    try {
-      props.updateTotalFlights(await Telex.countConnections());
-    } catch (e) {
-      console.error(e);
-    }
-
     console.log("Update finished");
@@ -118,32 +110,11 @@ }
 
-  function dropShadow() {
-    return `<filter id="dropshadow" height="130%">
-                <feGaussianBlur in="SourceAlpha" stdDeviation="0.8"/>
-                <feOffset dx="0" dy="0" result="offsetblur"/>
-                <feComponentTransfer>
-                    <feFuncA type="linear" slope="1"/>
-                </feComponentTransfer>
-                <feMerge>
-                    <feMergeNode/>
-                    <feMergeNode in="SourceGraphic"/>
-                </feMerge>
-            </filter>`;
-  }
-
-  return /*#__PURE__*/React.createElement("div", null, data.map(flight => /*#__PURE__*/React.createElement(Marker, {
+  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: [26, 26],
-      iconAnchor: [13, 13],
-      className: 'planeIcon',
-      html: `<svg xmlns="http://www.w3.org/2000/svg"
-                                        style="transform-origin: center; transform: rotate(${flight.heading - 90}deg);"
-                                        width="26" height="26" viewBox="0 0 24 24"
-                                        fill="${flight.flight === props.currentFlight ? props.planeHighlightColor : props.searchedFlight === flight.flight ? props.planeHighlightColor : props.planeColor}"
-                                        stroke-linecap="round" stroke-linejoin="round">
-                                        ${dropShadow()}
-                                      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                                      <path filter="url(#dropshadow)" d="M16 10h4a2 2 0 0 1 0 4h-4l-4 7h-3l2 -7h-4l-2 2h-3l2 -4l-2 -4h3l2 2h4l-2 -7h3z" />
-                                    </svg>`
+      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);"/>`
     })
@@ -164,14 +135,7 @@ }, /*#__PURE__*/React.createElement(Popup, {
     icon: L.divIcon({
-      iconSize: [26, 26],
-      iconAnchor: [13, 13],
-      className: "airportIcon",
-      html: `<svg xmlns="http://www.w3.org/2000/svg"
-                                        stroke="${props.airportColor}"
-                                        fill="${props.airportColor}"
-                                        width="26" height="26" viewBox="0 0 24 24"
-                                        stroke-linecap="round" stroke-linejoin="round">
-                                        ${dropShadow()}
-                                      ${airport.tag === "destination" ? `<path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" filter="url(#dropshadow)" transform="rotate(15 12 12) translate(0 -1)" />` : `<path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" filter="url(#dropshadow)" transform="rotate(-15 12 12) translate(0 -1)" />`}
-                                       <line x1="3" y1="21" x2="21" y2="21" stroke-width="3" />
-                                    </svg>`
+      iconSize: [20, 17],
+      iconAnchor: [10, 8.5],
+      className: "mapIcon",
+      html: `<img alt="${airport.airport.name}"
+                                        src="${airport.tag === "destination" ? props.arrivalIcon : props.departureIcon}" />`
     })
@@ -178,0 +142,0 @@ }, /*#__PURE__*/React.createElement(Tooltip, {

dist/InfoPanel.js

@@ -1,4 +0,22 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { Telex } from "@flybywiresim/api-client";
 
 const InfoPanel = props => {
+  const [totalFlights, setTotalFlights] = useState();
+  useEffect(() => {
+    if (props.refreshInterval && props.refreshInterval > 0) {
+      const interval = setInterval(() => getTotalFlights(), props.refreshInterval);
+      getTotalFlights();
+      return () => clearInterval(interval);
+    }
+  }, [props.refreshInterval]);
+
+  async function getTotalFlights() {
+    try {
+      setTotalFlights(await Telex.countConnections());
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
   function retrieveActiveTileSet() {
@@ -22,3 +40,3 @@ try {
     className: "PanelText"
-  }, "Total Flights: ", props.totalFlights), /*#__PURE__*/React.createElement("p", {
+  }, "Total Flights: ", totalFlights), /*#__PURE__*/React.createElement("p", {
     className: "PanelText"
@@ -25,0 +43,0 @@ }, "Map Style: ", /*#__PURE__*/React.createElement("select", {

dist/Map.js

@@ -8,2 +8,8 @@ import React, { useState, useEffect } from "react";
 import "./Map.scss";
+import ArrivalWhite from './icons/arrival_white.png';
+import ArrivalGray from './icons/arrival_gray.png';
+import DepartureWhite from './icons/departure_white.png';
+import DepartureGray from './icons/arrival_gray.png';
+import PlaneCyan from './icons/plane_cyan.png';
+import PlaneBlue from './icons/plane_blue.png';
 
@@ -17,5 +23,6 @@ const Map = props => {
     url: "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png",
-    planeColor: "#00c2cb",
-    planeHighlightColor: "#197bff",
-    airportColor: "#ffffff"
+    planeIcon: PlaneCyan,
+    planeIconHighlight: PlaneBlue,
+    departureIcon: DepartureWhite,
+    arrivalIcon: ArrivalWhite
   }, {
@@ -27,5 +34,6 @@ id: 2,
     url: "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
-    planeColor: "#00c2cb",
-    planeHighlightColor: "#197bff",
-    airportColor: "#545454"
+    planeIcon: PlaneCyan,
+    planeIconHighlight: PlaneBlue,
+    departureIcon: DepartureGray,
+    arrivalIcon: ArrivalGray
   }, {
@@ -37,8 +45,8 @@ id: 3,
     url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-    planeColor: "#00c2cb",
-    planeHighlightColor: "#197bff",
-    airportColor: "#545454"
+    planeIcon: PlaneCyan,
+    planeIconHighlight: PlaneBlue,
+    departureIcon: DepartureGray,
+    arrivalIcon: ArrivalGray
   }];
   const [currentFlight, setCurrentFlight] = useState(props.currentFlight || "");
-  const [totalFlights, setTotalFlights] = useState(0);
   const [selectedTile, setSelectedTile] = useState(setAndFind(props.forceTileset || ""));
@@ -74,6 +82,2 @@ const [flightData, setFlightData] = useState([]);
 
-  function updateTotalFlights(flights) {
-    setTotalFlights(flights);
-  }
-
   function updateFlightData(data) {
@@ -111,11 +115,12 @@ setFlightData(data);
   }) : /*#__PURE__*/React.createElement(React.Fragment, null), !props.disableFlights ? /*#__PURE__*/React.createElement(FlightsLayer, {
-    planeColor: selectedTile.planeColor,
-    planeHighlightColor: selectedTile.planeHighlightColor,
-    airportColor: selectedTile.airportColor,
-    updateTotalFlights: updateTotalFlights,
+    planeIcon: selectedTile.planeIcon,
+    planeIconHighlight: selectedTile.planeIconHighlight,
+    departureIcon: selectedTile.departureIcon,
+    arrivalIcon: selectedTile.arrivalIcon,
     updateFlightData: updateFlightData,
     currentFlight: currentFlight,
-    searchedFlight: searchedFlight
+    searchedFlight: searchedFlight,
+    refreshInterval: props.refreshInterval ?? 10_000
   }) : /*#__PURE__*/React.createElement(React.Fragment, null), !props.disableInfo ? /*#__PURE__*/React.createElement(InfoPanel, {
-    totalFlights: totalFlights,
+    refreshInterval: props.refreshInterval ?? 10_000,
     tiles: availableTileSets,
@@ -122,0 +127,0 @@ changeTiles: selectTile

package.json

 {
   "name": "@flybywiresim/map",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "FlyByWire Simulations live map",
@@ -5,0 +5,0 @@ "private": false,

No alert changes

Improved metrics

Total package byte prevSize

1030761

increased by6177.85%

Number of package files

14

increased by100%

Worsened metrics

Lines of code

340

decreased by-3.41%

No dependency changes