Search airports and draw the departure and the arrival

This commit is contained in:
Emmy D'Anello 2023-08-11 21:11:31 +02:00
parent c9d0d9267f
commit 1175cc57f5
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85

View File

@ -1,26 +1,69 @@
import {MapContainer, Marker, Popup, TileLayer} from 'react-leaflet'
import {useState} from "react"
import {Icon} from 'leaflet'
import {Polyline, MapContainer, Marker, TileLayer} from 'react-leaflet'
import './App.css';
function Map() {
function Map({dep, arr}) {
const redIcon = new Icon({
iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
})
const greenIcon = new Icon({
iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
})
return (
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} style={{height: "600px"}}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
<MapContainer center={[46.449, 2.210]} zoom={6} style={{height: "600px"}}>
<TileLayer
attribution="&copy; Les contributeur⋅rices d'<a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={dep} icon={redIcon} />
<Marker position={arr} icon={greenIcon} />
<Polyline positions={[dep, arr]} />
</MapContainer>
)
}
function App() {
function AirportSearch({name, updateFun}) {
const [airports, setAirports] = useState([])
function autocomplete(event) {
const target = event.target
const value = target.value
fetch(`/api/airports?search=${value}`).then(resp => resp.json()).then(setAirports)
}
return <>
<Map></Map>
<datalist id={name + "-list"}>
{airports.map(airport => <>
<option value={airport.icao_code}
data-lat={airport.lat}
data-lng={airport.lng}
onClick={updateFun([airport.lat, airport.lng])}>{airport.name}</option>
</>)}
</datalist>
<input type="hidden" name={name + "-icao"}/>
<input name={name} list={name + "-list"} onChange={autocomplete}/>
</>
}
function App() {
const [dep, setDep] = useState([0, 0])
const [arr, setArr] = useState([0, 0])
return <>
<Map dep={dep} arr={arr}></Map>
<AirportSearch name={"departure"} updateFun={setDep}></AirportSearch>
<AirportSearch name={"arrival"} updateFun={setArr}></AirportSearch>
</>
}