bsherriff/aviation
1
1
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Added openlayers leaflet map

Browse Source
This commit is contained in:
Benjamin Sherriff
2023-08-30 15:51:56 -04:00
parent 02c892a889
commit ac0ecdff5e
10 changed files with 1150 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1450
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@@ -14,13 +14,16 @@
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"axios": "^1.4.0",
"next": "13.4.12",
"react": "18.2.0",
"react-dom": "18.2.0",
"leaflet": "^1.9.4",
"next": "^13.4.19",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.2.1",
"recoil": "^0.7.7",
"xml-js": "^1.6.11"
},
"devDependencies": {
"@types/leaflet": "^1.9.3",
"@types/node": "20.4.5",
"@types/react": "18.2.16",
"@types/react-dom": "18.2.7",

3
src/app/layout.tsx
View File

@@ -11,7 +11,8 @@ import 'styles/globals.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className='bg-gray-200'>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<body className='bg-gray-600'>
<RecoilRootWrapper>{children}</RecoilRootWrapper>
</body>
</html>

15
src/app/page.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { setAirport } from "@/js/state";
import { getAirports, setAirport } from "@/js/state";
import { Airport } from "@/js/airport";
import MetarGrid from '@/components/MetarGrid';
import Metar from '@/components/Metar';
setAirport('KJYO', new Airport('Leesburg Executive Airport', 'KJYO'))
setAirport('KHEF', new Airport('Manassas Regional Airpoirt', 'KHEF'))
@@ -17,17 +17,20 @@ setAirport('KCJR', new Airport('Culpeper Regional Airport', 'KCJR'))
setAirport('KHWY', new Airport('Warrenton-Fauquier Airport', 'KHWY'))
setAirport('KRMN', new Airport('Stafford Regional Airport', 'KRMN'))
setAirport('KEZF', new Airport('Shannon Airport', 'KEZF'))
setAirport('KDCA', new Airport('Ronald Reagan Washington National Airport', 'KDCA'))
// setAirport('KMQI', new Airport('Test Airport', 'KMQI'))
// setAirport('KEKQ', new Airport('Test Airport', 'KEKQ'))
// setAirport('KCSV', new Airport('Test Airport', 'KCSV'))
export default function Page() {
return <>
<div className="border-b border-gray-200 bg-gray-400 px-4 py-5 sm:px-6">
<h3 className="text-lg font-bold leading-6 text-gray-900">Airports</h3>
<div className="bg-gray-700 px-4 py-1 sm:px-6">
<h3 className="text-lg font-bold leading-6 text-gray-200">Metar Map</h3>
</div>
<div className='p-4'>
<MetarGrid/>
<div>
<Metar/>
</div>
</>
}

0
src/components/.gitkeep
View File

32
src/components/MetarGrid.tsx → src/components/Metar.tsx
View File

@@ -4,30 +4,44 @@ import { Metar, getMetars } from "@/js/weather"
import Link from "next/link"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowsSpin, faLocationArrow } from '@fortawesome/free-solid-svg-icons'
import dynamic from "next/dynamic";
export default async function MetarGrid() {
const airports: Airport[] = getAirports();
export default async function Metar() {
const Map = dynamic(() => import("@/components/MetarMap"), {
loading: () => <div className="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
<div className="text-center"><p className="mt-4 text-3xl font-bold tracking-tight text-gray-300 sm:text-5xl">Loading...</p></div>
</div>,
ssr: false
});
async function update() {
const airports: Airport[] = getAirports();
const metars = await getMetars(airports);
for (let i = 0; i < airports.length; i++) {
airports[i].metar = metars[i];
airports[i].latitude = metars[i].latitude;
airports[i].longitude = metars[i].longitude;
setAirport(airports[i].icao, airports[i]);
}
// setTimeout(update, 30 * 60 * 1000);
// setTimeout(update, 5000);
return getAirports();
}
await update();
return <>
<Map airportString={JSON.stringify(getAirports())}/>
</>
}
return (
export async function MetarGrid() {
const airports: Airport[] = getAirports();
return <>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
{airports.map((airport) => (
<MetarCard airport={airport}/>
))}
</div>
);
</>
}
function MetarCard({ airport}: { airport: Airport}) {
@@ -46,10 +60,12 @@ function MetarCard({ airport}: { airport: Airport}) {
}
function windColor(metar: Metar | undefined) {
if (Number(metar?.wind_speed_kt) <= 12) {
if (Number(metar?.wind_speed_kt) <= 9) {
return 'bg-green-300';
} else if (Number(metar?.wind_speed_kt) > 12) {
} else if (Number(metar?.wind_speed_kt) > 9) {
return 'bg-orange-300';
} else if (Number(metar?.wind_speed_kt) > 12) {
return 'bg-red-300';
}
}

145
src/components/MetarMap.tsx Normal file
View File

@@ -0,0 +1,145 @@
'use client';
import { Airport } from '@/js/airport';
import { Metar } from '@/js/weather';
import { faArrowsSpin, faLocationArrow, faLocationPin } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { DivIcon } from 'leaflet';
import { useEffect, useState } from 'react';
import ReactDOMServer from 'react-dom/server';
import { MapContainer, Marker, Popup, TileLayer, Tooltip, useMapEvents } from 'react-leaflet';
export default function Map({ airportString }: { airportString: string }) {
const [airports, setAirports] = useState(JSON.parse(airportString));
useEffect(() => {
}, []);
return (
<MapContainer
center={[38.7209, -77.5133]}
zoom={8}
maxZoom={12}
minZoom={3}
zoomControl={false}
style={{ height: '96.5vh' }}
className='overflow-y-hidden overflow-x-hidden'
attributionControl={false}
>
<MapTiles airports={airports}/>
</MapContainer>
);
}
function MapTiles({ airports }: {airports: Airport[] }) {
const [zoomLevel, setZoomLevel] = useState(8);
// const [dragging, setDragging] = useState(false);
// const [center, setCenter] = useState([50, 10.5]);
const mapEvents = useMapEvents({
zoomend: () => {
setZoomLevel(mapEvents.getZoom());
},
// mouseup: () => {
// setCenter([mapEvents.getCenter().lat, mapEvents.getCenter().lng]);
// }
});
function metarBGColor(metar: Metar | undefined) {
if (metar?.flight_category == 'VFR') {
return 'bg-emerald-600'
} else if (metar?.flight_category == 'MVFR') {
return 'bg-blue-600'
} else if (metar?.flight_category == 'IFR') {
return 'bg-orange-600'
} else if (metar?.flight_category == 'LIFR') {
return 'bg-red-600'
} else {
return 'bg-black'
}
}
function metarTextColor(metar: Metar | undefined) {
if (metar?.flight_category == 'VFR') {
return 'text-emerald-700'
} else if (metar?.flight_category == 'MVFR') {
return 'text-blue-700'
} else if (metar?.flight_category == 'IFR') {
return 'text-orange-700'
} else if (metar?.flight_category == 'LIFR') {
return 'text-red-700'
} else {
return 'text-black'
}
}
function windColor(metar: Metar | undefined) {
if (Number(metar?.wind_speed_kt) <= 9) {
return 'bg-green-300';
} else if (Number(metar?.wind_speed_kt) > 9) {
return 'bg-orange-300';
} else if (Number(metar?.wind_speed_kt) > 12) {
return 'bg-red-300';
}
}
function iconSize() {
if (zoomLevel <= 4) {
return 'text-xs'
} else if (zoomLevel <= 5) {
return 'text-sm';
} else if (zoomLevel <= 6) {
return 'text-base';
} else if (zoomLevel <= 7) {
return 'text-lg';
} else if (zoomLevel <= 9) {
return 'text-2xl';
} else if (zoomLevel <= 11) {
return 'text-3xl';
} else if (zoomLevel >= 12) {
return 'text-4xl';
}
}
function icon(airport: Airport) {
return new DivIcon({
html: ReactDOMServer.renderToString(<FontAwesomeIcon icon={faLocationPin} className={`${iconSize()} ${metarTextColor(airport.metar)}`}/>),
className: 'metar-marker-icon'
});
}
return <>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{airports.map((airport) => (
<>
<Marker position={[airport.latitude, airport.longitude]} icon={icon(airport)}>
<Tooltip className='metar-tooltip' direction="top" offset={[5, -5]} opacity={1}>{airport.icao}</Tooltip>
<Popup>
<div className="min-w-0 flex-1 select-none">
{/* <Link href={`/airport/${airport.icao}`}> */}
<h1 className="text-lg text-gray-900 pb-1"><span className='font-semibold'>{airport.icao}</span> {airport.name}</h1>
{/* </Link> */}
<hr/>
<p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
<div className='mt-2 flex'>
<span className={`flex inline-block text-sm text-white ${metarBGColor(airport.metar)} py-2 px-4 rounded-full`}>{airport.metar?.flight_category? airport.metar?.flight_category : 'UNKN'}</span>
<div className="flex inline-block px-2">
<span className={`text-sm text-black ${windColor(airport.metar)} py-2 px-2 rounded-full`}>
{airport.metar && airport.metar.wind_dir_degrees && Number(airport.metar.wind_dir_degrees) > 0?
<FontAwesomeIcon className="pr-1" icon={faLocationArrow} style={{rotate: `${-45 + 180 + Number(airport.metar.wind_dir_degrees)}deg`}}/>: <></>
}
{airport.metar && airport.metar.wind_dir_degrees && airport.metar.wind_dir_degrees == 'VRB'?
<FontAwesomeIcon className="pr-1" icon={faArrowsSpin}/>: <></>
}
{airport.metar?.wind_speed_kt != undefined && airport.metar?.wind_speed_kt > 0? `${airport.metar?.wind_speed_kt} KT` : 'CALM'}
</span>
</div>
</div>
</div>
</Popup>
</Marker>
</>
))}
</>;
}

4
src/js/airport.ts
View File

@@ -3,11 +3,15 @@ import { Metar } from "./weather";
export class Airport {
name: string;
icao: string;
latitude: number;
longitude: number;
metar: Metar | undefined;
constructor(name: string, icao: string) {
this.name = name;
this.icao = icao;
this.latitude = 0;
this.longitude = 0;
this.metar = undefined;
}
}

1
src/js/weather.ts
View File

@@ -20,7 +20,6 @@ export async function getMetars(airports: Airport[]): Promise<Metar[]> {
const json = xml2json(response.data, { compact: true });
const jsonObject = JSON.parse(json);
let metarData = jsonObject?.response?.data?.METAR;
console.log(metarData);
if (!Array.isArray(metarData)) {
metarData = [metarData];
}

16
styles/globals.css
View File

@@ -18,3 +18,19 @@ a {
* {
box-sizing: border-box;
}
.metar-tooltip {
position: absolute;
padding: 6px;
background-color: #000;
border: 1px solid #fff;
border-radius: 3px;
color: #222;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}