adds photo upload for summit logs
This commit is contained in:
Christian Beutel
@@ -116,7 +116,7 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex gap-x-4 max-w-full overflow-x-auto shrink-0 rounded-xl {offerUpload
|
||||
class="flex gap-x-4 max-w-full shrink-0 rounded-xl {offerUpload
|
||||
? 'outline-dashed outline-input-border'
|
||||
: ''}"
|
||||
role="dialog"
|
||||
@@ -125,7 +125,7 @@
|
||||
on:drop={handlePhotoDrop}
|
||||
>
|
||||
<button
|
||||
class="btn-secondary h-32 w-32 m-2 shrink-0 grow-0 basis-auto"
|
||||
class="btn-secondary h-32 w-32 shrink-0 grow-0 basis-auto"
|
||||
type="button"
|
||||
on:click={openPhotoBrowser}><i class="fa fa-plus"></i></button
|
||||
>
|
||||
@@ -137,17 +137,19 @@
|
||||
style="display: none;"
|
||||
on:change={() => handlePhotoSelection()}
|
||||
/>
|
||||
{#each (photos ?? []).concat(photoPreviews) as photo, i}
|
||||
<div class="shrink-0 grow-0 basis-auto m-2">
|
||||
<PhotoCard
|
||||
src={i >= photos.length ? photo : getFileURL(parent, photo)}
|
||||
on:delete={() => handlePhotoDelete(i)}
|
||||
isThumbnail={thumbnail === i}
|
||||
on:thumbnail={() => makePhotoThumbnail(i)}
|
||||
on:exif
|
||||
{showThumbnailControls}
|
||||
{showExifControls}
|
||||
></PhotoCard>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="flex overflow-x-auto gap-x-3">
|
||||
{#each (photos ?? []).concat(photoPreviews) as photo, i}
|
||||
<div class="shrink-0 grow-0 basis-auto overflow-hidden">
|
||||
<PhotoCard
|
||||
src={i >= photos.length ? photo : getFileURL(parent, photo)}
|
||||
on:delete={() => handlePhotoDelete(i)}
|
||||
isThumbnail={thumbnail === i}
|
||||
on:thumbnail={() => makePhotoThumbnail(i)}
|
||||
on:exif
|
||||
{showThumbnailControls}
|
||||
{showExifControls}
|
||||
></PhotoCard>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -133,7 +133,7 @@
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
|
||||
class="absolute bottom-0 w-full h-2/3 bg-gradient-to-b from-transparent to-black opacity-50"
|
||||
></div>
|
||||
{#if (trail.public || trailIsShared) && pb.authStore.model}
|
||||
<div
|
||||
@@ -366,7 +366,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
{#if mode == "overview"}
|
||||
<div class="relative h-72 rounded-xl">
|
||||
<div class="relative h-72 rounded-xl overflow-hidden">
|
||||
<MapWithElevationMaplibre
|
||||
trails={[trail]}
|
||||
showElevation={false}
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
<script lang="ts">
|
||||
import { gpx } from "$lib/vendor/toGeoJSON/toGeoJSON";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import * as M from "maplibre-gl";
|
||||
|
||||
import type { Map } from "leaflet";
|
||||
import { createEventDispatcher, onMount, tick } from "svelte";
|
||||
import { fromFile, toGeoJson } from "$lib/util/gpx_util";
|
||||
import { createEventDispatcher, onMount } from "svelte";
|
||||
export let trailFile: File | null;
|
||||
export let trailData: string | undefined;
|
||||
export let label: string = "";
|
||||
|
||||
let map: Map;
|
||||
let L: any;
|
||||
let layer: any;
|
||||
let map: M.Map;
|
||||
let layer: M.LineLayerSpecification | undefined;
|
||||
let source: M.GeoJSONSource | undefined;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
@@ -27,14 +26,13 @@
|
||||
});
|
||||
|
||||
async function initMap() {
|
||||
L = (await import("leaflet")).default;
|
||||
|
||||
map = L.map("trail-picker-map", {
|
||||
zoomControl: false,
|
||||
scrollWheelZoom: false,
|
||||
dragging: false,
|
||||
map = new M.Map({
|
||||
container: "trail-picker-map",
|
||||
attributionControl: false,
|
||||
dragPan: false,
|
||||
scrollZoom: false,
|
||||
preserveDrawingBuffer: true
|
||||
});
|
||||
map.attributionControl.setPrefix(false);
|
||||
}
|
||||
|
||||
function openTrailBrowser() {
|
||||
@@ -42,7 +40,7 @@
|
||||
trailFile = null;
|
||||
trailData = undefined;
|
||||
|
||||
dispatch("change", null)
|
||||
dispatch("change", null);
|
||||
} else {
|
||||
document.getElementById("trail-input")!.click();
|
||||
}
|
||||
@@ -59,35 +57,61 @@
|
||||
}
|
||||
|
||||
trailFile = files.item(0);
|
||||
trailData = await trailFile?.text();
|
||||
if (!trailFile) {
|
||||
return;
|
||||
}
|
||||
const parseResult = await fromFile(trailFile);
|
||||
|
||||
trailData = parseResult.gpxData;
|
||||
|
||||
dispatch("change", trailData);
|
||||
}
|
||||
|
||||
async function showTrailOnMap() {
|
||||
if (!trailData) {
|
||||
if (!trailData || !map) {
|
||||
return;
|
||||
}
|
||||
const sourceId = "trail-picker-geojson-source";
|
||||
const layerId = "trail-picker-geojson-layer";
|
||||
|
||||
const geojson = toGeoJson(trailData);
|
||||
|
||||
const geoJson = gpx(
|
||||
new DOMParser().parseFromString(trailData, "text/xml"),
|
||||
);
|
||||
if (layer) {
|
||||
map.removeLayer(layer);
|
||||
map.removeLayer(layerId);
|
||||
map.removeSource(sourceId);
|
||||
}
|
||||
layer = L.geoJson(geoJson, {
|
||||
filter: (feature: any, layer: any) => {
|
||||
return feature.geometry.type !== "Point";
|
||||
|
||||
map.addSource(sourceId, {
|
||||
type: "geojson",
|
||||
data: geojson,
|
||||
});
|
||||
map.addLayer({
|
||||
id: layerId,
|
||||
type: "line",
|
||||
source: sourceId,
|
||||
paint: {
|
||||
"line-color": "#3388ff",
|
||||
"line-width": 3,
|
||||
},
|
||||
}).addTo(map);
|
||||
map.fitBounds(layer.getBounds());
|
||||
map.invalidateSize();
|
||||
});
|
||||
layer = map.getLayer(layerId) as M.LineLayerSpecification;
|
||||
source = map.getSource(sourceId) as M.GeoJSONSource;
|
||||
map.resize()
|
||||
map.fitBounds(geojson.bbox as M.LngLatBoundsLike, {animate: false, padding: 8});
|
||||
}
|
||||
|
||||
function removeTrailFromMap() {
|
||||
if (layer) {
|
||||
map?.removeLayer(layer);
|
||||
map?.removeLayer(layer.id);
|
||||
layer = undefined;
|
||||
}
|
||||
if (source) {
|
||||
map?.removeSource(source.id);
|
||||
source = undefined;
|
||||
}
|
||||
|
||||
trailData = undefined;
|
||||
trailFile = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user