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, closeBtn: false,
followMarker: true, followMarker: true,
autofitBounds: true, autofitBounds: true,
imperial: $page.data.settings?.unit == "imperial" ?? false, imperial: $page.data.settings.unit == "imperial",
reverseCoords: false, reverseCoords: false,
acceleration: false, acceleration: false,
slope: true, slope: true,

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

@@ -21,7 +21,7 @@
formatElevation, formatElevation,
formatTimeHHMM, formatTimeHHMM,
} from "$lib/util/format_util"; } 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 "$lib/vendor/leaflet-elevation/src/index.css";
import type { Icon, Map, Marker } from "leaflet"; import type { Icon, Map, Marker } from "leaflet";
import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css"; import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
@@ -92,13 +92,9 @@
parseElements: ["track", "route"] as any, parseElements: ["track", "route"] as any,
}, },
marker_options: { marker_options: {
startIcon: L.AwesomeMarkers.icon({ startIcon: startIcon() as any,
icon: "circle-half-stroke",
prefix: "fa",
markerColor: "cadetblue",
iconColor: "white",
}) as Icon,
startIconUrl: "", startIconUrl: "",
endIcon: endIcon() as any,
endIconUrl: "", endIconUrl: "",
shadowUrl: "", 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"; import type { LeafletEvent, Map, Marker } from "leaflet";
export const startIcon = () => L.divIcon({ 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' className: 'start-icon'
}); });
export const endIcon = () => L.divIcon({ 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' 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)); polyline.on('click', L.bind(this._onRouteClick, this, route, polyline));
const startIcon = L.divIcon({ 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' className: 'start-icon'
}); });
const endIcon = L.divIcon({ 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' className: 'end-icon'
}); });
const latlngs = polyline.getLatLngs().flat(1); const latlngs = polyline.getLatLngs().flat(1);