import React from 'react'; import { ThemeProvider } from '@mui/material/styles'; import JobSegment from "./Components/JobSegment.js"; import Typography from '@mui/material/Typography'; import Theme from '../Theme.js'; import { createRoot } from 'react-dom/client'; import { flushSync } from 'react-dom'; import L from "leaflet"; import { getDistance, getRhumbLineBearing, convertDistance } from "geolib"; import Marker from "./Components/Marker.js"; import { wrap as iWrap } from "../util/utility.js"; function GPSLayer(props) { const s = props.settings; const group = L.featureGroup(); const wrap = num => num+iWrap(num, s.display.map.center); // Create lines if needed if (props.connections) { let legs = {}; for (const c of props.connections) { const [frID, toID] = c; const fr = { latitude: props.points[frID][0], longitude: props.points[frID][1] }; const to = { latitude: props.points[toID][0], longitude: props.points[toID][1] }; let key = frID+"-"+toID; if (!legs.hasOwnProperty(key)) { legs[key] = { direction: Math.round(getRhumbLineBearing(fr, to)), distance: Math.round(convertDistance(getDistance(fr, to), 'sm')), } } } const legsKeys = Object.keys(legs); for (var i = 0; i < legsKeys.length; i++) { const [fr, to] = legsKeys[i].split('-'); const leg = legs[legsKeys[i]]; const rleg = legs[to+'-'+fr] // Ensure only one line for both way legs if (rleg && fr > to) { continue; } new JobSegment([[props.points[fr][0], wrap(props.points[fr][1])], [props.points[to][0], wrap(props.points[to][1])]], { weight: props.weight, color: props.color, highlight: props.highlight, bothWays: rleg }) .bindTooltip(() => { var div = document.createElement('div'); const root = createRoot(div); flushSync(() => { root.render(( <ThemeProvider theme={Theme}> <Typography variant="body1"><b>{leg.distance} NM</b></Typography> </ThemeProvider> )); }); return div; }, {sticky: true}) .addTo(group); } } // Create markers for (const [latitude, longitude, label] of props.points) { Marker({ position: [latitude, wrap(longitude)], size: props.size, color: props.color, icao: label, icaodata: props.fseicaodata, actions: props.actions, sim: 'gps' }) .addTo(group); } return group; } export default GPSLayer;