mikhailov.aa/leaflet_svelte
1
Fork 0
Code Issues 10 Pull requests 1 Projects 1 Releases Activity

added timeline with satellite tracking

Browse source
This commit is contained in:
Vasilisk9812 2025-12-11 23:30:32 +09:00
parent 60fe848b0c
commit eb7066ac6b
3 changed files with 491 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

117
src/lib/components/Map.svelte
View file

@ -13,6 +13,7 @@
let map: MapLibreMap;
let mapContainer: HTMLDivElement;
let markers: Marker[] = [];
let animatedMarker: Marker | null = null;
let mouseLat = 0;
let mouseLng = 0;
let isSelecting = false;
@ -102,6 +103,9 @@
markers.forEach((marker) => marker.remove());
markers = [];
// Remove animated marker
removeAnimatedMarker();
// Remove all layers and sources related to flight paths
if (map && map.getLayer("flight-path")) {
map.removeLayer("flight-path");
@ -132,7 +136,23 @@
el.style.backgroundSize = "100%";
el.title = title;
const marker = new maplibregl.Marker({ element: el }).setLngLat([lng, lat]).addTo(map);
// Create popup with coordinates
const popup = new maplibregl.Popup({ offset: 25, closeButton: false }).setHTML(
`<b>${title}</b><br>Lat: ${lat.toFixed(6)}<br>Lng: ${lng.toFixed(6)}`,
);
const marker = new maplibregl.Marker({ element: el })
.setLngLat([lng, lat])
.setPopup(popup)
.addTo(map);
// Show popup on hover
el.addEventListener("mouseenter", () => {
marker.togglePopup();
});
el.addEventListener("mouseleave", () => {
marker.togglePopup();
});
markers.push(marker);
return marker;
@ -147,7 +167,23 @@
el.style.backgroundSize = "100%";
el.title = title;
const marker = new maplibregl.Marker({ element: el }).setLngLat([lng, lat]).addTo(map);
// Create popup with coordinates
const popup = new maplibregl.Popup({ offset: 25, closeButton: false }).setHTML(
`<b>${title}</b><br>Lat: ${lat.toFixed(6)}<br>Lng: ${lng.toFixed(6)}`,
);
const marker = new maplibregl.Marker({ element: el })
.setLngLat([lng, lat])
.setPopup(popup)
.addTo(map);
// Show popup on hover
el.addEventListener("mouseenter", () => {
marker.togglePopup();
});
el.addEventListener("mouseleave", () => {
marker.togglePopup();
});
markers.push(marker);
return marker;
@ -319,6 +355,39 @@
export const getMap = () => {
return map;
};
export const updateAnimatedMarker = (lat: number, lng: number) => {
if (!map) return;
if (!animatedMarker) {
// Create animated marker
const el = document.createElement("div");
el.className = "animated-marker";
el.innerHTML = `
<svg width="32" height="32" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="14" fill="#FF6B6B" opacity="0.3" class="pulse-ring"/>
<circle cx="16" cy="16" r="8" fill="#FF1744" stroke="white" stroke-width="2"/>
</svg>
`;
animatedMarker = new maplibregl.Marker({ element: el, anchor: "center" })
.setLngLat([lng, lat])
.addTo(map);
} else {
// Update position
animatedMarker.setLngLat([lng, lat]);
}
// Pan to marker
map.panTo([lng, lat], { duration: 100 });
};
export const removeAnimatedMarker = () => {
if (animatedMarker) {
animatedMarker.remove();
animatedMarker = null;
}
};
</script>
<div class="map-container" bind:this={mapContainer}>
@ -336,30 +405,24 @@
{/if}
</div>
<!-- <style>
.map-container {
position: relative;
width: 100%;
height: 100%;
}
.coordinates-display {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.card-text {
margin: 0;
font-size: 12px;
}
:global(.custom-marker) {
<style>
:global(.animated-marker) {
cursor: pointer;
}
</style> -->
:global(.animated-marker .pulse-ring) {
animation: pulse 2s ease-out infinite;
transform-origin: center;
}
@keyframes :global(pulse) {
0% {
r: 8;
opacity: 0.8;
}
100% {
r: 14;
opacity: 0;
}
}
</style>