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

adapts trailinfopanel map to new design

Browse Source
This commit is contained in:
Christian Beutel
2024-09-13 20:16:41 +02:00
parent c38d415460
commit 4e257d798d
4 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -139,7 +139,7 @@
closeBtn: false,
followMarker: true,
autofitBounds: true,
imperial: $page.data.settings?.unit == "imperial" ?? false,
imperial: $page.data.settings.unit == "imperial",
reverseCoords: false,
acceleration: false,
slope: true,

10
web/src/lib/components/trail/trail_info_panel.svelte
View File

@@ -21,7 +21,7 @@
formatElevation,
formatTimeHHMM,
} from "$lib/util/format_util";
import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
import { createMarkerFromWaypoint, endIcon, startIcon } from "$lib/util/leaflet_util";
import "$lib/vendor/leaflet-elevation/src/index.css";
import type { Icon, Map, Marker } from "leaflet";
import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
@@ -92,13 +92,9 @@
parseElements: ["track", "route"] as any,
},
marker_options: {
startIcon: L.AwesomeMarkers.icon({
icon: "circle-half-stroke",
prefix: "fa",
markerColor: "cadetblue",
iconColor: "white",
}) as Icon,
startIcon: startIcon() as any,
startIconUrl: "",
endIcon: endIcon() as any,
endIconUrl: "",
shadowUrl: "",
},

4
web/src/lib/util/leaflet_util.ts
View File

@@ -2,11 +2,11 @@ import type { Waypoint } from "$lib/models/waypoint";
import type { LeafletEvent, Map, Marker } from "leaflet";
export const startIcon = () => L.divIcon({
html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-bullseye -translate-x-1/2"></i>',
html: '<i class="p-2 text-white bg-gray-500 rounded-full fa fa-bullseye -translate-x-1/2 -translate-y-1/3"></i>',
className: 'start-icon'
});
export const endIcon = () => L.divIcon({
html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-flag-checkered -translate-x-1/2"></i>',
html: '<i class="p-2 text-white bg-gray-500 rounded-full fa fa-flag-checkered -translate-x-1/2 -translate-y-1/3"></i>',
className: 'end-icon'
});

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

@@ -248,11 +248,11 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
polyline.on('click', L.bind(this._onRouteClick, this, route, polyline));
const startIcon = L.divIcon({
html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-bullseye -translate-x-1/2"></i>',
html: '<i class="p-2 text-white bg-gray-500 rounded-full fa fa-bullseye -translate-x-1/2"></i>',
className: 'start-icon'
});
const endIcon = L.divIcon({
html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-flag-checkered -translate-x-1/2"></i>',
html: '<i class="p-2 text-white bg-gray-500 rounded-full fa fa-flag-checkered -translate-x-1/2"></i>',
className: 'end-icon'
});
const latlngs = polyline.getLatLngs().flat(1);