@flybywiresim/map - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/FlightsLayer.js

@@ -19,3 +19,3 @@ import React, { useEffect, useState } from "react";
   const [selectedAirports, setSelectedAirports] = useState([]);
-  const [refreshInterval, setRefreshInterval] = useState(15000);
+  const [refreshInterval, setRefreshInterval] = useState(8000000);
   const [bounds, setBounds] = useState(map.getBounds());
@@ -117,2 +117,16 @@ useEffect(() => {
 
+  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, {
@@ -122,11 +136,14 @@ key: flight.id,
     icon: L.divIcon({
-      iconSize: [20, 20],
-      iconAnchor: [14, 10],
+      iconSize: [26, 26],
+      iconAnchor: [13, 13],
       className: 'planeIcon',
-      html: `<i 
-                                style="font-size: 1.75rem;
-                                       color: ${flight.flight === props.currentFlight ? props.planeHighlightColor : props.searchedFlight === flight.flight ? props.planeHighlightColor : props.planeColor};
-                                       transform-origin: center;
-                                       transform: rotate(${flight.heading}deg);" 
-                                class="material-icons ${props.iconsUseShadow ? 'map-icon-shadow' : ''}">flight</i>`
+      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>`
     })
@@ -136,18 +153,25 @@ }, /*#__PURE__*/React.createElement(Popup, {
     onClose: () => clearAirports()
-  }, /*#__PURE__*/React.createElement("h1", null, "Flight ", flight.flight), flight.origin && flight.destination ? /*#__PURE__*/React.createElement("h2", null, flight.origin, " ", /*#__PURE__*/React.createElement("i", {
-    style: {
-      transform: 'rotate(90deg)',
-      fontSize: '1.1rem'
-    },
-    className: "material-icons"
-  }, "flight"), " ", 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, {
+  }, /*#__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, 20],
-      iconAnchor: [14, 10],
+      iconSize: [26, 26],
+      iconAnchor: [13, 13],
       className: "airportIcon",
-      html: `<i 
-                                    style="font-size: 1.75rem; color: ${props.airportColor};" 
-                                    class="material-icons ${props.iconsUseShadow ? 'map-icon-shadow' : ''}">${airport.tag === "destination" ? 'flight_land' : 'flight_takeoff'}</i>`
+      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>`
     })
@@ -154,0 +178,0 @@ }, /*#__PURE__*/React.createElement(Tooltip, {

dist/Map.js

@@ -18,4 +18,3 @@ import React, { useState, useEffect } from "react";
     planeHighlightColor: "#197bff",
-    airportColor: "#ffffff",
-    iconsUseShadow: true
+    airportColor: "#ffffff"
   }, {
@@ -29,4 +28,3 @@ id: 2,
     planeHighlightColor: "#197bff",
-    airportColor: "#545454",
-    iconsUseShadow: true
+    airportColor: "#545454"
   }, {
@@ -40,4 +38,3 @@ id: 3,
     planeHighlightColor: "#197bff",
-    airportColor: "#545454",
-    iconsUseShadow: true
+    airportColor: "#545454"
   }];
@@ -103,3 +100,3 @@ const [currentFlight, setCurrentFlight] = useState(props.currentFlight || "");
     zoom: 5,
-    scrollWheelZoom: true,
+    scrollWheelZoom: !props.disableScroll,
     worldCopyJump: true
@@ -118,3 +115,2 @@ }, /*#__PURE__*/React.createElement(TileLayer, {
     updateFlightData: updateFlightData,
-    iconsUseShadow: selectedTile.iconsUseShadow,
     currentFlight: currentFlight,
@@ -121,0 +117,0 @@ searchedFlight: searchedFlight

package.json

 {
   "name": "@flybywiresim/map",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
@@ -19,3 +19,2 @@ "repository": {
     "leaflet": "^1.7.1",
-    "material-design-icons": "^3.0.1",
     "react": "^17.0.1",
@@ -22,0 +21,0 @@ "react-dom": "^17.0.1",

No alert changes

Improved metrics

Total package byte prevSize

16291

increased by3.57%

Dependency count

5

decreased by-16.67%

Worsened metrics

Number of package files

7

decreased by-12.5%

Lines of code

352

decreased by-3.03%

Dependency changes

• - Removedmaterial-design-icons@^3.0.1

• - Removedmaterial-design-icons@3.0.1(transitive)