120 lines
3.2 KiB
Svelte
120 lines
3.2 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import * as L from 'leaflet';
|
|
import 'leaflet/dist/leaflet.css';
|
|
|
|
/**
|
|
* @type {{ removeLayer: (arg0: any) => void; setView: (arg0: number[], arg1: any) => void; getZoom: () => any; on: (arg0: string, arg1: (e: any) => void) => void; }}
|
|
*/
|
|
let map;
|
|
let mouseLat = 0;
|
|
let mouseLng = 0;
|
|
/**
|
|
* @type {null}
|
|
*/
|
|
let marker = null;
|
|
|
|
let startPoint = 'Custom';
|
|
let startHeight = 0;
|
|
let startTime = '13:13';
|
|
let startDate = new Date(2025, 2, 24);
|
|
let ascentRate = 5;
|
|
let burstAltitude = 30000;
|
|
let flightProfile = 'Normal';
|
|
let descentRate = 5;
|
|
let forecastMode = 'Single';
|
|
let inputLat = '56.3576';
|
|
let inputLng = '39.8666';
|
|
|
|
let showBurstCalculator = false;
|
|
let payloadMass = 1500;
|
|
let balloonMass = 1000;
|
|
let desiredBurstAltitude = 33000;
|
|
let desiredAscentRate = 2.33;
|
|
|
|
let burstAltitudeResult = 33000;
|
|
let timeToBurst = 236;
|
|
let initialVolume = 2.66;
|
|
let ascentRateResult = 2.33;
|
|
let liftForce = 1733;
|
|
let volumeLiters = 2662;
|
|
let volumeCubicFeet = 94.0;
|
|
|
|
const toggleBurstCalculator = () => {
|
|
showBurstCalculator = !showBurstCalculator;
|
|
};
|
|
|
|
const calculateBurst = () => {
|
|
// In a real app, you would implement actual calculations here
|
|
// These are just placeholder values matching your image
|
|
burstAltitudeResult = desiredBurstAltitude;
|
|
timeToBurst = 236;
|
|
initialVolume = 2.66;
|
|
ascentRateResult = desiredAscentRate;
|
|
liftForce = 1733;
|
|
volumeLiters = 2662;
|
|
volumeCubicFeet = 94.0;
|
|
};
|
|
|
|
const updateMapPosition = () => {
|
|
const lat = parseFloat(inputLat);
|
|
const lng = parseFloat(inputLng);
|
|
|
|
if (isNaN(lat)) {
|
|
alert("Please enter a valid latitude");
|
|
return;
|
|
}
|
|
if (isNaN(lng)) {
|
|
alert("Please enter a valid longitude");
|
|
return;
|
|
}
|
|
if (lat < -90 || lat > 90) {
|
|
alert("Latitude must be between -90 and 90");
|
|
return;
|
|
}
|
|
if (lng < -180 || lng > 180) {
|
|
alert("Longitude must be between -180 and 180");
|
|
return;
|
|
}
|
|
|
|
// Remove existing marker if it exists
|
|
if (marker) {
|
|
map.removeLayer(marker);
|
|
}
|
|
|
|
// Create new marker
|
|
marker = L.marker([lat, lng]).addTo(map)
|
|
.bindPopup("Launch Point");
|
|
|
|
// Center map on new coordinates
|
|
map.setView([lat, lng], map.getZoom());
|
|
};
|
|
|
|
onMount(() => {
|
|
map = L.map('map').setView([51.505, -0.09], 13);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
map.on('mousemove', (e) => {
|
|
mouseLat = e.latlng.lat.toFixed(6);
|
|
mouseLng = e.latlng.lng.toFixed(6);
|
|
});
|
|
|
|
marker = L.marker([56.3576, 39.8666]).addTo(map)
|
|
.bindPopup(() => {
|
|
return `
|
|
<b>Launch Point</b><br>, Lat: ${marker.getLatLng().lat.toFixed(6)}<br>, Long: ${marker.getLatLng().lng.toFixed(6)}<br>
|
|
`;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div class="container-fluid position-relative h-100">
|
|
<div id="map" class="w-100 h-100 position-absolute"></div>
|
|
<div class="position-absolute top-0 end-0 bg-light p-2 rounded shadow-sm">
|
|
Lat: {mouseLat}, Long: {mouseLng}
|
|
</div>
|
|
</div>
|
|
|