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

added mapcore.ts

Browse source
This commit is contained in:
Vasilisk9812 2026-04-09 19:34:11 +09:00
parent e984b9730b
commit 2e6177fe74
2 changed files with 270 additions and 193 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,6 @@
<script lang="ts">
import { onMount, createEventDispatcher } from "svelte";
import maplibregl from "maplibre-gl";
import type { Map as MapLibreMap, Marker, LngLatBoundsLike } from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import { MapLibreCore, type IMapCore, type IMapMarker } from "$lib/mapcore";
import WindVisualization from "$lib/components/WindVisualisation.svelte";
import { distHaversine } from "$lib/mathutil";
import type { Prediction, Telemetry } from "$lib/types";
@ -10,10 +8,10 @@
export let mode: "prediction" | "telemetry" = "prediction";
export let data: Prediction | Telemetry | null = null;
let map: MapLibreMap;
let mapCore: IMapCore;
let mapContainer: HTMLDivElement;
let markers: Marker[] = [];
let animatedMarker: Marker | null = null;
let markers: IMapMarker[] = [];
let animatedMarker: IMapMarker | null = null;
let mouseLat = 0;
let mouseLng = 0;
let isSelecting = false;
@ -25,48 +23,21 @@
onMount(async () => {
if (!mapContainer) return;
map = new maplibregl.Map({
container: mapContainer,
style: {
version: 8,
sources: {
osm: {
type: "raster",
tiles: ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
tileSize: 256,
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
},
},
layers: [
{
id: "osm",
type: "raster",
source: "osm",
minzoom: 0,
maxzoom: 19,
},
],
},
center: [-0.09, 51.505],
zoom: 13,
});
mapCore = new MapLibreCore();
mapCore.init(mapContainer, { center: [-0.09, 51.505], zoom: 13 });
// Add navigation control (zoom buttons)
map.addControl(new maplibregl.NavigationControl(), "bottom-left");
// Add scale control
map.addControl(new maplibregl.ScaleControl({ maxWidth: 100, unit: "metric" }), "bottom-right");
mapCore.addNavigationControl("bottom-left");
mapCore.addScaleControl({ maxWidth: 100, unit: "metric" }, "bottom-right");
const response = await fetch("src/routes/testVelo.json");
windData = await response.json();
map.on("mousemove", (e: maplibregl.MapMouseEvent) => {
mapCore.on("mousemove", (e) => {
mouseLat = e.lngLat.lat;
mouseLng = e.lngLat.lng;
});
map.on("click", (e: maplibregl.MapMouseEvent) => {
mapCore.on("click", (e) => {
if (isSelecting) {
dispatch("coordinatesSelected", { lat: e.lngLat.lat, lng: e.lngLat.lng });
stopSelection();
@ -74,9 +45,9 @@
});
});
$: if (map && data) {
$: if (mapCore && data) {
plotData(data);
} else if (map) {
} else if (mapCore) {
clearMapLayers();
}
@ -99,35 +70,18 @@
};
export const clearMapLayers = () => {
// Remove all markers
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");
}
if (map && map.getSource("flight-path")) {
map.removeSource("flight-path");
}
if (map && map.getLayer("telemetry-path")) {
map.removeLayer("telemetry-path");
}
if (map && map.getSource("telemetry-path")) {
map.removeSource("telemetry-path");
}
if (mapCore && mapCore.hasLayer("flight-path")) mapCore.removeLayer("flight-path");
if (mapCore && mapCore.hasSource("flight-path")) mapCore.removeSource("flight-path");
if (mapCore && mapCore.hasLayer("telemetry-path")) mapCore.removeLayer("telemetry-path");
if (mapCore && mapCore.hasSource("telemetry-path")) mapCore.removeSource("telemetry-path");
};
const createMarker = (
lng: number,
lat: number,
color: string,
iconUrl: string,
title: string,
) => {
const createMarker = (lng: number, lat: number, iconUrl: string, title: string) => {
const el = document.createElement("div");
el.className = "custom-marker";
el.style.backgroundImage = `url(${iconUrl})`;
@ -136,23 +90,18 @@
el.style.backgroundSize = "100%";
el.title = title;
// 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 popup = mapCore
.createPopup({ 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 })
const marker = mapCore
.createMarker({ element: el })
.setLngLat([lng, lat])
.setPopup(popup)
.addTo(map);
.addTo(mapCore);
// Show popup on hover
el.addEventListener("mouseenter", () => {
marker.togglePopup();
});
el.addEventListener("mouseleave", () => {
marker.togglePopup();
});
el.addEventListener("mouseenter", () => marker.togglePopup());
el.addEventListener("mouseleave", () => marker.togglePopup());
markers.push(marker);
return marker;
@ -167,23 +116,18 @@
el.style.backgroundSize = "100%";
el.title = title;
// 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 popup = mapCore
.createPopup({ 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 })
const marker = mapCore
.createMarker({ element: el })
.setLngLat([lng, lat])
.setPopup(popup)
.addTo(map);
.addTo(mapCore);
// Show popup on hover
el.addEventListener("mouseenter", () => {
marker.togglePopup();
});
el.addEventListener("mouseleave", () => {
marker.togglePopup();
});
el.addEventListener("mouseenter", () => marker.togglePopup());
el.addEventListener("mouseleave", () => marker.togglePopup());
markers.push(marker);
return marker;
@ -196,83 +140,49 @@
const range = distHaversine(launch.latlng, landing.latlng, 1);
const f_hours = Math.floor(flight_time / 3600);
const f_minutes = Math.floor((flight_time % 3600) / 60)
.toString()
.padStart(2, "0");
const f_minutes = Math.floor((flight_time % 3600) / 60).toString().padStart(2, "0");
const flighttime = `${f_hours}hr${f_minutes}`;
// Helper to extract lat/lng from either format
const getLat = (latlng: any) => (Array.isArray(latlng) ? latlng[0] : latlng.lat);
const getLng = (latlng: any) => (Array.isArray(latlng) ? latlng[1] : latlng.lng);
// Create markers (MapLibre uses [lng, lat] order)
createMarker(getLng(launch.latlng), getLat(launch.latlng), "#0000ff", "target-blue.png", "Launch");
createMarker(getLng(landing.latlng), getLat(landing.latlng), "#ff0000", "target-red.png", "Landing");
createMarker(getLng(launch.latlng), getLat(launch.latlng), "target-blue.png", "Launch");
createMarker(getLng(landing.latlng), getLat(landing.latlng), "target-red.png", "Landing");
createBurstMarker(getLng(burst.latlng), getLat(burst.latlng), "Burst");
// Add flight path as a line (convert [lat, lng] to [lng, lat] for MapLibre)
const coordinates = flight_path.map((coord) => {
if (Array.isArray(coord)) {
return [coord[1], coord[0]]; // [lat, lng, alt?] -> [lng, lat]
} else {
return [coord.lng, coord.lat]; // {lat, lng} -> [lng, lat]
}
});
const coordinates: [number, number][] = flight_path.map((coord) =>
Array.isArray(coord) ? [coord[1], coord[0]] : [coord.lng, coord.lat],
);
map.addSource("flight-path", {
mapCore.addSource("flight-path", {
type: "geojson",
data: {
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: coordinates,
},
},
data: { type: "Feature", properties: {}, geometry: { type: "LineString", coordinates } },
});
map.addLayer({
mapCore.addLayer({
id: "flight-path",
type: "line",
source: "flight-path",
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": "#000000",
"line-width": 3,
},
layout: { "line-join": "round", "line-cap": "round" },
paint: { "line-color": "#000000", "line-width": 3 },
});
// Fit bounds to show entire path
const bounds = coordinates.reduce(
(bounds, coord) => {
return bounds.extend(coord as [number, number]);
},
new maplibregl.LngLatBounds(coordinates[0] as [number, number], coordinates[0] as [number, number]),
);
map.fitBounds(bounds as LngLatBoundsLike, { padding: 50 });
mapCore.fitBounds(coordinates, 50);
};
const plotTelemetry = (telemetry: Telemetry) => {
clearMapLayers();
// Helper to extract lat/lng from either format
const getLat = (latlng: any) => (Array.isArray(latlng) ? latlng[0] : latlng.lat);
const getLng = (latlng: any) => (Array.isArray(latlng) ? latlng[1] : latlng.lng);
// Launch marker (MapLibre uses [lng, lat] order)
createMarker(
getLng(telemetry.launch.latlng),
getLat(telemetry.launch.latlng),
"#0000ff",
"target-blue.png",
"Launch",
);
// Telemetry point markers with popups
telemetry.datapoints.forEach((point) => {
const el = document.createElement("div");
el.className = "custom-marker";
@ -281,86 +191,58 @@
el.style.height = "10px";
el.style.backgroundSize = "100%";
const popup = new maplibregl.Popup({ offset: 25 }).setHTML(
`<b>Telemetry Point</b><br>Lat: ${point.latitude.toFixed(6)}<br>Lon: ${point.longitude.toFixed(6)}`,
);
const popup = mapCore
.createPopup({ offset: 25 })
.setHTML(
`<b>Telemetry Point</b><br>Lat: ${point.latitude.toFixed(6)}<br>Lon: ${point.longitude.toFixed(6)}`,
);
const marker = new maplibregl.Marker({ element: el })
const marker = mapCore
.createMarker({ element: el })
.setLngLat([point.longitude, point.latitude])
.setPopup(popup)
.addTo(map);
.addTo(mapCore);
markers.push(marker);
});
// Add flight path as a line (convert [lat, lng] to [lng, lat] for MapLibre)
const coordinates = telemetry.flight_path.map((coord) => {
if (Array.isArray(coord)) {
return [coord[1], coord[0]]; // [lat, lng, alt?] -> [lng, lat]
} else {
return [coord.lng, coord.lat]; // {lat, lng} -> [lng, lat]
}
});
const coordinates: [number, number][] = telemetry.flight_path.map((coord) =>
Array.isArray(coord) ? [coord[1], coord[0]] : [coord.lng, coord.lat],
);
map.addSource("telemetry-path", {
mapCore.addSource("telemetry-path", {
type: "geojson",
data: {
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: coordinates,
},
},
data: { type: "Feature", properties: {}, geometry: { type: "LineString", coordinates } },
});
map.addLayer({
mapCore.addLayer({
id: "telemetry-path",
type: "line",
source: "telemetry-path",
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": "#000000",
"line-width": 3,
},
layout: { "line-join": "round", "line-cap": "round" },
paint: { "line-color": "#000000", "line-width": 3 },
});
// Fit bounds to show entire path
const bounds = coordinates.reduce(
(bounds, coord) => {
return bounds.extend(coord as [number, number]);
},
new maplibregl.LngLatBounds(coordinates[0] as [number, number], coordinates[0] as [number, number]),
);
map.fitBounds(bounds as LngLatBoundsLike, { padding: 50 });
mapCore.fitBounds(coordinates, 50);
};
export const panTo = (lat: number, lng: number) => {
if (map) {
map.setCenter([lng, lat]);
}
if (mapCore) mapCore.setCenter([lng, lat]);
};
export const zoomTo = (lat: number, lng: number, zoomLevel: number) => {
if (map) {
map.setCenter([lng, lat]);
map.setZoom(zoomLevel);
if (mapCore) {
mapCore.setCenter([lng, lat]);
mapCore.setZoom(zoomLevel);
}
};
export const getMap = () => {
return map;
};
export const getMap = () => mapCore;
export const updateAnimatedMarker = (lat: number, lng: number) => {
if (!map) return;
if (!mapCore) return;
if (!animatedMarker) {
// Create animated marker
const el = document.createElement("div");
el.className = "animated-marker";
el.innerHTML = `
@ -370,16 +252,15 @@
</svg>
`;
animatedMarker = new maplibregl.Marker({ element: el, anchor: "center" })
animatedMarker = mapCore
.createMarker({ element: el, anchor: "center" })
.setLngLat([lng, lat])
.addTo(map);
.addTo(mapCore);
} else {
// Update position
animatedMarker.setLngLat([lng, lat]);
}
// Pan to marker
map.panTo([lng, lat], { duration: 100 });
mapCore.panTo([lng, lat], { duration: 100 });
};
export const removeAnimatedMarker = () => {
@ -400,8 +281,8 @@
</p>
</div> -->
<slot />
{#if map && windData}
<WindVisualization {map} {windData} />
{#if mapCore && windData}
<WindVisualization map={mapCore.getInstance()} {windData} />
{/if}
</div>

196
src/lib/mapcore.ts Normal file
View file

@ -0,0 +1,196 @@
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
// ─── Generic interfaces ────────────────────────────────────────────────────────
// Implement these with any map library (Leaflet, OpenLayers, etc.)
export interface IMapPopup {
setHTML(html: string): this;
}
export interface IMapMarker {
setLngLat(lngLat: [number, number]): IMapMarker;
setPopup(popup: IMapPopup): IMapMarker;
addTo(core: IMapCore): IMapMarker;
remove(): void;
togglePopup(): void;
}
export interface IMapCore {
init(container: HTMLElement, options: { center: [number, number]; zoom: number }): void;
addNavigationControl(position: string): void;
addScaleControl(options: { maxWidth: number; unit: string }, position: string): void;
on(event: string, handler: (e: { lngLat: { lat: number; lng: number } }) => void): void;
hasLayer(id: string): boolean;
hasSource(id: string): boolean;
addSource(id: string, source: object): void;
addLayer(layer: object): void;
removeLayer(id: string): void;
removeSource(id: string): void;
fitBounds(coords: [number, number][], padding: number): void;
setCenter(lngLat: [number, number]): void;
setZoom(zoom: number): void;
panTo(lngLat: [number, number], options?: { duration?: number }): void;
createMarker(options?: { element?: HTMLElement; anchor?: string }): IMapMarker;
createPopup(options?: { offset?: number; closeButton?: boolean }): IMapPopup;
/** Returns the underlying raw map instance (e.g. for library-specific plugins). */
getInstance(): unknown;
}
// ─── MapLibre GL implementation ────────────────────────────────────────────────
class MapLibrePopup implements IMapPopup {
private _popup: maplibregl.Popup;
constructor(options?: { offset?: number; closeButton?: boolean }) {
this._popup = new maplibregl.Popup(options);
}
setHTML(html: string): this {
this._popup.setHTML(html);
return this;
}
/** @internal used by MapLibreMarker */
raw(): maplibregl.Popup {
return this._popup;
}
}
class MapLibreMarker implements IMapMarker {
private _marker: maplibregl.Marker;
constructor(options?: { element?: HTMLElement; anchor?: string }) {
this._marker = new maplibregl.Marker(options as maplibregl.MarkerOptions);
}
setLngLat(lngLat: [number, number]): this {
this._marker.setLngLat(lngLat);
return this;
}
setPopup(popup: IMapPopup): this {
this._marker.setPopup((popup as MapLibrePopup).raw());
return this;
}
addTo(core: IMapCore): this {
this._marker.addTo(core.getInstance() as maplibregl.Map);
return this;
}
remove(): void {
this._marker.remove();
}
togglePopup(): void {
this._marker.togglePopup();
}
}
export class MapLibreCore implements IMapCore {
private _map!: maplibregl.Map;
init(container: HTMLElement, options: { center: [number, number]; zoom: number }): void {
this._map = new maplibregl.Map({
container,
style: {
version: 8,
sources: {
osm: {
type: 'raster',
tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256,
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
},
},
layers: [
{
id: 'osm',
type: 'raster',
source: 'osm',
minzoom: 0,
maxzoom: 19,
},
],
},
center: options.center,
zoom: options.zoom,
});
}
addNavigationControl(position: string): void {
this._map.addControl(
new maplibregl.NavigationControl(),
position as maplibregl.ControlPosition,
);
}
addScaleControl(options: { maxWidth: number; unit: string }, position: string): void {
this._map.addControl(
new maplibregl.ScaleControl(options as maplibregl.ScaleControlOptions),
position as maplibregl.ControlPosition,
);
}
on(event: string, handler: (e: { lngLat: { lat: number; lng: number } }) => void): void {
this._map.on(event as maplibregl.MapEventType, handler as never);
}
hasLayer(id: string): boolean {
return !!this._map.getLayer(id);
}
hasSource(id: string): boolean {
return !!this._map.getSource(id);
}
addSource(id: string, source: object): void {
this._map.addSource(id, source as maplibregl.SourceSpecification);
}
addLayer(layer: object): void {
this._map.addLayer(layer as maplibregl.LayerSpecification);
}
removeLayer(id: string): void {
this._map.removeLayer(id);
}
removeSource(id: string): void {
this._map.removeSource(id);
}
fitBounds(coords: [number, number][], padding: number): void {
const bounds = coords.reduce(
(b, coord) => b.extend(coord),
new maplibregl.LngLatBounds(coords[0], coords[0]),
);
this._map.fitBounds(bounds, { padding });
}
setCenter(lngLat: [number, number]): void {
this._map.setCenter(lngLat);
}
setZoom(zoom: number): void {
this._map.setZoom(zoom);
}
panTo(lngLat: [number, number], options?: { duration?: number }): void {
this._map.panTo(lngLat, options);
}
createMarker(options?: { element?: HTMLElement; anchor?: string }): IMapMarker {
return new MapLibreMarker(options);
}
createPopup(options?: { offset?: number; closeButton?: boolean }): IMapPopup {
return new MapLibrePopup(options);
}
getInstance(): maplibregl.Map {
return this._map;
}
}