components

2025-04-04 22:57:35 +09:00 · 2025-04-04 22:57:35 +09:00 · 0f130c640c
commit 0f130c640c
parent c88469c1d4
6 changed files with 847 additions and 221 deletions
--- a/src/routes/map.svelte
+++ b/src/routes/map.svelte
@ -0,0 +1,120 @@
+<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;
+    let inputLat = '56.3576';
+    let inputLng = '39.8666';
+    /**
+        * @type {null}
+    */
+    let marker = null;
+
+    export { mouseLat, mouseLng, inputLat, inputLng, updateMapPosition };
+
+    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: '&copy; <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="map-container">
+    <div id="map"></div>
+    <div class="coordinates-display">
+        Lat: {mouseLat}, Long: {mouseLng}
+    </div>
+    <div class="panel-container">
+        <slot></slot>
+    </div>
+</div>
+
+<style>
+    .map-container {
+        position: relative;
+        width: 100%;
+        height: 100vh;
+    }
+
+    #map {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .coordinates-display {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: rgba(255, 255, 255, 0.8);
+        padding: 5px 10px;
+        border-radius: 3px;
+        font-family: Arial, sans-serif;
+        font-size: 14px;
+        z-index: 1000; /* Ensure it's above the map */
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    }
+
+    .panel-container {
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+        z-index: 1000;
+    }
+</style>