brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds mapwithelevationmultiple to map page

Browse Source
This commit is contained in:
Christian Beutel
2024-09-10 17:44:18 +02:00
parent 86c377225b
commit 19415f7bcb
6 changed files with 129 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/css/components.css
View File

@@ -40,7 +40,6 @@
.tooltip {
position: relative;
z-index: 10;
}
.tooltip:before,
@@ -52,6 +51,7 @@
transform: translate3d(0, -10px, 0);
transition: all .15s ease-in-out;
z-index: 10;
}
.tooltip:before {

2
web/src/lib/components/trail/map_with_elevation.svelte
View File

@@ -214,7 +214,7 @@
}
</script>
<div id="map-container" class="flex flex-col h-full">
<div id="map-container" class="flex flex-col h-full relative">
<div
id="map"
class="rounded-xl z-0 basis-full min-h-96 md:min-h-0"

39
web/src/lib/components/trail/map_with_elevation_multiple.svelte
View File

@@ -81,10 +81,6 @@
await import("$lib/vendor/leaflet-elevation/src/index.js");
await import("$lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup");
const AutoGraticule = (
await import("$lib/vendor/leaflet-graticule/leaflet-auto-graticule")
).default;
map = L.map("map", {
preferCanvas: true,
plugins: ["/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js"],
@@ -95,6 +91,8 @@
],
3,
);
dispatch("init", map);
map!.attributionControl.setPrefix(false);
map!.on("zoomend", function () {
@@ -105,6 +103,10 @@
dispatch("click", e);
});
map!.on("moveend", function (e: any) {
dispatch("moveend", e);
});
const baseLayer = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
@@ -203,12 +205,11 @@
gpxGroup = L.gpxGroup(gpxData, {
points: [],
// points_options: opts.points,
elevation: true,
elevation_options: elevation_options,
flyToBounds: true,
flyToBounds: options.flyToBounds,
distanceMarkers: true,
removeElevationOnDeselect: options.removeElevationOnDeselect,
itinerary: options.itinerary,
});
const markerLayerGroup = L.layerGroup().addTo(map);
@@ -234,8 +235,11 @@
});
gpxGroup.on("route_loaded", ({ route }: { route: any }) => {
const trail = trails.find((t) => gpxGroup?._hashCode(t.expand.gpx_data) == route.options.hash)
const trail = trails.find(
(t) =>
gpxGroup?._hashCode(t.expand.gpx_data) ==
route.options.hash,
);
if (!trail) {
return;
@@ -275,6 +279,14 @@
gpxGroup.select(index);
}
export function openPopup(index: number) {
gpxGroup.openPopup(index);
}
export function closePopup(index: number) {
gpxGroup.closePopup(index);
}
function switchHotline(metric: "altitude" | "slope" | "speed" | false) {
if (metric === selectedMetric) {
return;
@@ -293,10 +305,10 @@
}
</script>
<div id="map-container" class="flex flex-col h-full">
<div id="map-container" class="h-full relative">
<div
id="map"
class="rounded-xl z-0 basis-full min-h-96 md:min-h-0"
class="rounded-xl z-0 h-full min-h-96 md:min-h-0"
style="position: relative; outline-style: none;"
>
<div class="absolute top-20 right-3 text-sm" style="z-index: 500">
@@ -314,8 +326,5 @@
</Dropdown>
</div>
</div>
<div class="flex items-center justify-between">
<slot />
<div class="basis-[300px] flex-grow flex-shrink-0" id="elevation"></div>
</div>
<div class="absolute bottom-0 bg-background/80 w-full" id="elevation"></div>
</div>

63
web/src/lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js vendored
View File

@@ -147,6 +147,23 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
this.setSelection(this._routes[index])
},
openPopup(index) {
if (index > this._routes.length - 1) {
return
}
this._routes[index].openPopup();
},
closePopup(index) {
if (index > this._routes.length - 1) {
return
}
this._routes[index].closePopup();
},
_addTrack: function (track) {
if (track instanceof Object) {
this._loadGeoJSON(track);
@@ -156,7 +173,7 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
}
},
_hashCode: (s) => s.split('').reduce((a,b) => (((a << 5) - a) + b.charCodeAt(0))|0, 0),
_hashCode: (s) => s.split('').reduce((a, b) => (((a << 5) - a) + b.charCodeAt(0)) | 0, 0),
clear: function () {
this._elevation.clear()
@@ -181,8 +198,8 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
},
_loadGeoJSON: function (geojson, hash, fallbackName) {
if (geojson) {
geojson.hash = hash
if (geojson) {
geojson.hash = hash
geojson.name = geojson.name || (geojson[0] && geojson[0].properties.name) || fallbackName;
this._loadRoute(geojson);
}
@@ -190,14 +207,13 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
_loadRoute: function (data) {
if (!data) return;
var line_style = {
color: this._uniqueColors(this._tracks.length)[this._count++],
color: this._hashToColor(data.hash),
opacity: 0.75,
weight: 5,
distanceMarkers: this.options.distanceMarkers_options,
};
var route = L.geoJson(data, {
name: data.name || '',
style: (feature) => line_style,
@@ -214,7 +230,7 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
route.eachLayer((layer) => this._onEachRouteLayer(route, layer));
this._onEachRouteLoaded(route);
});
@@ -239,9 +255,9 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-flag-checkered -translate-x-1/2"></i>',
className: 'end-icon'
});
const latlngs = polyline.getLatLngs();
const latlngs = polyline.getLatLngs();
if (this._loadedCount == 0) {
if (this._loadedCount == 0 || !this.options.itinerary) {
L.marker(latlngs[0], { icon: startIcon }).addTo(this._markers)
}
@@ -333,18 +349,25 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
}
},
_uniqueColors: function (count) {
return count === 1 ? ['#0058ca'] : new Array(count).fill(null).map((_, i) => this._hsvToHex(i * (1 / count), 1, 0.7));
},
_hashToColor(hash) {
// Ensure hash is a positive integer
hash = Math.abs(hash);
_hsvToHex: function (h, s, v) {
var i = Math.floor(h * 6);
var f = h * 6 - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
var rgb = { 0: [v, t, p], 1: [q, v, p], 2: [p, v, t], 3: [p, q, v], 4: [t, p, v], 5: [v, p, q] }[i % 6];
return rgb.map(d => d * 255).reduce((hex, byte) => hex + ((byte >> 4) & 0x0F).toString(16) + (byte & 0x0F).toString(16), "#");
// Define the maximum brightness (e.g., 200 ensures the color is not too light)
const maxBrightness = 200;
// Convert the hash to a color in a reduced RGB range to prevent light colors
const r = (hash >> 16) & 0xFF; // Extract the red component
const g = (hash >> 8) & 0xFF; // Extract the green component
const b = hash & 0xFF; // Extract the blue component
// Adjust the RGB values to be within the allowed range (0 to maxBrightness)
const red = Math.floor((r / 255) * maxBrightness);
const green = Math.floor((g / 255) * maxBrightness);
const blue = Math.floor((b / 255) * maxBrightness);
// Format as HEX color
return `#${(1 << 24 | red << 16 | green << 8 | blue).toString(16).slice(1).toUpperCase()}`;
},
removeFrom: function (map) {

2
web/src/routes/lists/+page.svelte
View File

@@ -135,7 +135,7 @@
{/each}
</ul>
<div class:hidden={!showMap}>
<MapWithElevationMultiple trails={$list.expand?.trails ?? []} bind:map
<MapWithElevationMultiple trails={$list.expand?.trails ?? []} bind:map options={{itinerary: true, flyToBounds: true}}
></MapWithElevationMultiple>
</div>
<div class="min-w-0" class:hidden={showMap}>

264
web/src/routes/map/+page.svelte
View File

@@ -6,6 +6,7 @@
type SearchItem,
} from "$lib/components/base/search.svelte";
import EmptyStateSearch from "$lib/components/empty_states/empty_state_search.svelte";
import MapWithElevationMultiple from "$lib/components/trail/map_with_elevation_multiple.svelte";
import TrailCard from "$lib/components/trail/trail_card.svelte";
import TrailFilterPanel from "$lib/components/trail/trail_filter_panel.svelte";
import type { Settings } from "$lib/models/settings";
@@ -19,21 +20,12 @@
trails,
trails_search_bounding_box,
} from "$lib/stores/trail_store";
import { currentUser } from "$lib/stores/user_store";
import { country_codes } from "$lib/util/country_code_util";
import { getFileURL } from "$lib/util/file_util";
import {
formatDistance,
formatElevation,
formatTimeHHMM,
} from "$lib/util/format_util";
import "$lib/vendor/leaflet-elevation/src/index.css";
import type {
GPX,
Icon,
LatLng,
LatLngBoundsExpression,
LeafletEvent,
Map,
Marker,
} from "leaflet";
@@ -42,11 +34,8 @@
import { onMount } from "svelte";
import { _ } from "svelte-i18n";
import { slide } from "svelte/transition";
let L: any;
let map: Map;
let gpxLayers: Record<string, GPX> = {};
let startMarkers: Record<string, Marker> = {};
let mapWithElevation: MapWithElevationMultiple;
let searchDropdownItems: SearchItem[] = [];
let showFilter: boolean = false;
@@ -56,103 +45,7 @@
const maxBoundingBox: TrailBoundingBox = $page.data.boundingBox;
const settings: Settings = $page.data.settings;
onMount(async () => {
L = (await import("leaflet")).default;
await import("leaflet-gpx");
await import("leaflet.awesome-markers");
map = L.map("map").setView([0, 0], 4);
map.attributionControl.setPrefix(false);
const baseLayer = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution: "© OpenStreetMap contributors",
},
);
const topoLayer = L.tileLayer(
"https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png ",
{
attribution: "© OpenStreetMap contributors",
},
);
const baseMaps = {
OpenStreetMaps: baseLayer,
OpenTopoMaps: topoLayer,
};
L.control.layers(baseMaps).addTo(map);
switch (localStorage.getItem("layer")) {
case "OpenTopoMaps":
topoLayer.addTo(map);
break;
default:
baseLayer.addTo(map);
break;
}
map.on("baselayerchange", function (e) {
localStorage.setItem("layer", e.name);
});
map.on("moveend", async (e) => {
const bounds = map.getBounds();
await searchTrails(bounds.getNorthEast(), bounds.getSouthWest());
$page.url.searchParams.set("tl_lat", bounds.getNorth().toString());
$page.url.searchParams.set("tl_lon", bounds.getEast().toString());
$page.url.searchParams.set("br_lat", bounds.getSouth().toString());
$page.url.searchParams.set("br_lon", bounds.getWest().toString());
goto(`?${$page.url.searchParams.toString()}`);
});
const lat = $page.url.searchParams.get("lat");
const lon = $page.url.searchParams.get("lon");
const tl_lat = $page.url.searchParams.get("tl_lat");
const tl_lon = $page.url.searchParams.get("tl_lon");
const br_lat = $page.url.searchParams.get("br_lat");
const br_lon = $page.url.searchParams.get("br_lon");
if (lat && lon) {
map.setView([parseFloat(lat), parseFloat(lon)], 12);
} else if (tl_lat && tl_lon && br_lat && br_lon) {
const boundingBox: LatLngBoundsExpression = [
[parseFloat(tl_lat), parseFloat(tl_lon)],
[parseFloat(br_lat), parseFloat(br_lon)],
];
map.fitBounds(boundingBox);
} else if (settings && settings.mapFocus == "trails") {
const boundingBox: LatLngBoundsExpression = [
[maxBoundingBox.max_lat, maxBoundingBox.min_lon],
[maxBoundingBox.min_lat, maxBoundingBox.max_lon],
];
map.fitBounds(boundingBox);
} else if (
settings &&
settings.mapFocus == "location" &&
settings.location
) {
map.setView([settings.location.lat, settings.location.lon], 12);
} else {
navigator.geolocation.getCurrentPosition(
(position) => {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
map.setView([lat, lon], 13);
},
(error) => {
console.error("Error getting user location:", error);
},
);
}
});
onMount(async () => {});
async function search(q: string) {
const r = await fetch("/api/v1/search/multi", {
@@ -209,103 +102,59 @@
southWest,
filter,
);
for (const newTrail of changes.added) {
const gpxLayer = await addGPXLayer(newTrail);
if (gpxLayer) {
gpxLayers[newTrail.id!] = gpxLayer;
}
}
for (const deletedTrail of changes.deleted) {
map.removeLayer(gpxLayers[deletedTrail.id!]);
delete gpxLayers[deletedTrail.id!];
delete startMarkers[deletedTrail.id!];
}
}
function addGPXLayer(trail: Trail) {
return new Promise<GPX>(function (resolve, reject) {
if (!trail.expand.gpx_data) {
reject();
}
const thumbnail = trail.photos.length
? getFileURL(trail, trail.photos[trail.thumbnail])
: "/imgs/default_thumbnail.webp";
const gpxLayer = new L.GPX(trail.expand.gpx_data!, {
async: true,
polyline_options: {
className: "lightblue-theme elevation-polyline",
weight: 5,
},
gpx_options: {
parseElements: ["track", "route"],
},
marker_options: {
startIcon: L.AwesomeMarkers.icon({
icon: "circle-half-stroke",
prefix: "fa",
markerColor: "cadetblue",
iconColor: "white",
}) as Icon,
startIconUrl: "",
endIconUrl: "",
shadowUrl: "",
},
})
.on("addpoint", function (e: any) {
if (e.point_type === "start") {
const marker: Marker = e.point as Marker;
startMarkers[trail.id!] = marker;
marker.bindPopup(
`<a href="map/trail/${trail.id}">
<li class="flex items-center gap-4 cursor-pointer text-black">
<div class="shrink-0"><img class="h-14 w-14 object-cover rounded-xl" src="${thumbnail}" alt="">
</div>
<div>
<h4 class="font-semibold text-lg">${trail.name}</h4>
<div class="flex gap-x-4">
${trail.location ? `<h5><i class="fa fa-location-dot mr-2"></i>${trail.location}</h5>` : ""}
<h5><i class="fa fa-gauge mr-2"></i>${$_(trail.difficulty as string)}</h5>
</div>
<div class="flex mt-2 gap-4 text-sm text-gray-500"><span class="shrink-0"><i
class="fa fa-left-right mr-2"></i>${formatDistance(
trail.distance,
)}</span> <span class="shrink-0"><i class="fa fa-up-down mr-2"></i>${formatElevation(
trail.elevation_gain,
)}</span> <span class="shrink-0"><i class="fa fa-clock mr-2"></i>${formatTimeHHMM(
trail.duration,
)}</span></div>
</div>
</li>
</a>`,
);
}
})
.on("loaded", function (e: LeafletEvent) {
resolve(gpxLayer);
})
.on("error", reject)
.addTo(map);
});
function handleTrailCardMouseEnter(index: number) {
mapWithElevation.openPopup(index)
}
function handleTrailCardMouseEnter(trail: Trail) {
const marker: Marker = startMarkers[trail.id!];
marker?.openPopup();
}
function handleTrailCardMouseLeave(trail: Trail) {
const marker: Marker = startMarkers[trail.id!];
marker?.closePopup();
function handleTrailCardMouseLeave(index: number) {
mapWithElevation.closePopup(index)
}
async function handleFilterUpdate(filter: TrailFilter) {
const bounds = map.getBounds();
await searchTrails(bounds.getNorthEast(), bounds.getSouthWest());
}
async function handleMapMove() {
const bounds = map.getBounds();
await searchTrails(bounds.getNorthEast(), bounds.getSouthWest());
$page.url.searchParams.set("tl_lat", bounds.getNorth().toString());
$page.url.searchParams.set("tl_lon", bounds.getEast().toString());
$page.url.searchParams.set("br_lat", bounds.getSouth().toString());
$page.url.searchParams.set("br_lon", bounds.getWest().toString());
goto(`?${$page.url.searchParams.toString()}`);
}
function handleMapInit() {
if (settings && settings.mapFocus == "trails") {
const boundingBox: LatLngBoundsExpression = [
[maxBoundingBox.max_lat, maxBoundingBox.min_lon],
[maxBoundingBox.min_lat, maxBoundingBox.max_lon],
];
map.fitBounds(boundingBox);
} else if (
settings &&
settings.mapFocus == "location" &&
settings.location
) {
map.setView([settings.location.lat, settings.location.lon], 12);
} else {
navigator.geolocation.getCurrentPosition(
(position) => {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
map.setView([lat, lon], 13);
},
(error) => {
console.error("Error getting user location:", error);
},
);
}
}
</script>
<svelte:head>
@@ -357,22 +206,27 @@
{#if $trails.length == 0}
<EmptyStateSearch></EmptyStateSearch>
{/if}
{#each $trails as trail}
{#each $trails as trail,i}
<a href="map/trail/{trail.id}">
<TrailCard
{trail}
on:mouseenter={() => handleTrailCardMouseEnter(trail)}
on:mouseleave={() => handleTrailCardMouseLeave(trail)}
on:mouseenter={() => handleTrailCardMouseEnter(i)}
on:mouseleave={() => handleTrailCardMouseLeave(i)}
></TrailCard>
</a>
{/each}
{/if}
</div>
<div
id="map"
class="rounded-xl z-0"
class:hidden={!showMap && browser && window.innerWidth < 768}
></div>
<div class:hidden={!showMap && browser && window.innerWidth < 768}>
<MapWithElevationMultiple
on:moveend={handleMapMove}
on:init={handleMapInit}
trails={$trails}
options={{ flyToBounds: false }}
bind:map
bind:this={mapWithElevation}
></MapWithElevationMultiple>
</div>
</main>
<style>