steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 23:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

waypoint popup info

Browse Source
This commit is contained in:
vcoppe
2024-05-13 19:43:10 +02:00
parent 7eb3dc07a0
commit 57ebefcb38
6 changed files with 97 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
website/src/lib/components/gpx-layer/GPXLayer.ts
View File

@@ -2,6 +2,7 @@ import { map, selectFiles, currentTool, Tool } from "$lib/stores";
import { settings, type GPXFileWithStatistics } from "$lib/db";
import { get, type Readable } from "svelte/store";
import mapboxgl from "mapbox-gl";
import { currentWaypoint, waypointPopup } from "./WaypointPopup";
let defaultWeight = 6;
let defaultOpacity = 1;
@@ -43,21 +44,17 @@ export class GPXLayer {
fileId: string;
file: Readable<GPXFileWithStatistics | undefined>;
layerColor: string;
popup: mapboxgl.Popup;
popupElement: HTMLElement;
markers: mapboxgl.Marker[] = [];
unsubscribe: Function[] = [];
updateBinded: () => void = this.update.bind(this);
selectOnClickBinded: (e: any) => void = this.selectOnClick.bind(this);
constructor(map: mapboxgl.Map, fileId: string, file: Readable<GPXFileWithStatistics | undefined>, popup: mapboxgl.Popup, popupElement: HTMLElement) {
constructor(map: mapboxgl.Map, fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
this.map = map;
this.fileId = fileId;
this.file = file;
this.layerColor = getColor();
this.popup = popup;
this.popupElement = popupElement;
this.unsubscribe.push(file.subscribe(this.updateBinded));
this.unsubscribe.push(directionMarkers.subscribe(this.updateBinded));
this.unsubscribe.push(distanceMarkers.subscribe(this.updateBinded));
@@ -182,11 +179,15 @@ export class GPXLayer {
this.markers[markerIndex].setLngLat(waypoint.getCoordinates());
} else {
let marker = new mapboxgl.Marker().setLngLat(waypoint.getCoordinates());
marker.getElement().addEventListener('click', (e) => {
marker.setPopup(this.popup);
marker.getElement().addEventListener('mouseover', (e) => {
currentWaypoint.set(waypoint);
marker.setPopup(waypointPopup);
marker.togglePopup();
e.stopPropagation();
});
marker.getElement().addEventListener('mouseout', () => {
marker.togglePopup();
});
this.markers.push(marker);
}