diff --git a/src/src/app/components/trip/trip.component.html b/src/src/app/components/trip/trip.component.html index 54ddd23..98863de 100644 --- a/src/src/app/components/trip/trip.component.html +++ b/src/src/app/components/trip/trip.component.html @@ -220,6 +220,9 @@
+ @if (selectedItem.lat && selectedItem.lng) { + + } diff --git a/src/src/app/components/trip/trip.component.ts b/src/src/app/components/trip/trip.component.ts index 6a5e48b..7f8a4e7 100644 --- a/src/src/app/components/trip/trip.component.ts +++ b/src/src/app/components/trip/trip.component.ts @@ -350,11 +350,11 @@ export class TripComponent implements AfterViewInit { this.map?.removeLayer(this.tripMapTemporaryMarker); this.tripMapTemporaryMarker = undefined; } - this.resetMapBounds(); } placeHighlightMarker(lat: number, lng: number) { - this.resetPlaceHighlightMarker(); + if (this.tripMapHoveredElement || this.tripMapTemporaryMarker) + this.resetPlaceHighlightMarker(); let marker: L.Marker | undefined; this.markerClusterGroup?.eachLayer((layer: any) => { @@ -371,15 +371,17 @@ export class TripComponent implements AfterViewInit { lng: lng, }; this.tripMapTemporaryMarker = tripDayMarker(item).addTo(this.map!); - this.map?.fitBounds([[lat, lng]], { padding: [30, 30] }); + this.map?.fitBounds([[lat, lng]], { padding: [60, 60] }); return; } + let targetLatLng: L.LatLng | null = null; const markerElement = marker.getElement() as HTMLElement; // search for Marker. If 'null', is inside Cluster if (markerElement) { // marker, not clustered markerElement.classList.add("listHover"); this.tripMapHoveredElement = markerElement; + targetLatLng = marker.getLatLng(); } else { // marker is clustered const parentCluster = (this.markerClusterGroup as any).getVisibleParent( @@ -391,6 +393,18 @@ export class TripComponent implements AfterViewInit { clusterEl.classList.add("listHover"); this.tripMapHoveredElement = clusterEl; } + targetLatLng = parentCluster.getLatLng(); + } + } + + if (targetLatLng && this.map) { + const currentBounds = this.map.getBounds(); + + // If point is not inside map bounsd, move map w/o touching zoom + if (!currentBounds.contains(targetLatLng)) { + setTimeout(() => { + this.map!.setView(targetLatLng, this.map!.getZoom()); + }, 50); } } } @@ -730,6 +744,14 @@ export class TripComponent implements AfterViewInit { }); } + itemToNavigation() { + if (!this.selectedItem) return; + // TODO: More services + // const url = `http://maps.apple.com/?daddr=${this.selectedItem.lat},${this.selectedItem.lng}`; + const url = `https://www.google.com/maps/dir/?api=1&destination=${this.selectedItem.lat},${this.selectedItem.lng}`; + window.open(url, "_blank"); + } + editDay(day: TripDay) { if (!this.trip) return;