diff --git a/src/mapper/src/lib/components/map/legend.svelte b/src/mapper/src/lib/components/map/legend.svelte
index 5759094cf3..258dc66ee7 100644
--- a/src/mapper/src/lib/components/map/legend.svelte
+++ b/src/mapper/src/lib/components/map/legend.svelte
@@ -1,62 +1,29 @@
-
(isOpen = false)} class="relative font-barlow">
-
(isOpen = !isOpen)}
- role="button"
- onkeydown={(e) => {
- if (e.key === 'Enter') {
- isOpen = !isOpen;
- }
- }}
- tabindex="0"
- >
-
-
-
-
Legend
- {#each taskStatuses as taskStatus}
-
- {#if !taskStatus.color}
-
-
![Lock Icon]({taskStatus.icon})
-
- {:else}
-
- {/if}
-
{taskStatus?.status}
-
- {/each}
-
+
+
Legend (Features)
+ {#each taskStatuses as taskStatus}
+
+
+
{taskStatus?.status}
+
+ {/each}
-
-
diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte
index b6a27d1136..a50964b2b1 100644
--- a/src/mapper/src/lib/components/map/main.svelte
+++ b/src/mapper/src/lib/components/map/main.svelte
@@ -23,8 +23,8 @@
import { polygon } from '@turf/helpers';
import { buffer } from '@turf/buffer';
import { bbox } from '@turf/bbox';
+ import type { Position, Geometry as GeoJSONGeometry, FeatureCollection, Feature } from 'geojson';
import { centroid } from '@turf/centroid';
- import type { Position, Geometry as GeoJSONGeometry, FeatureCollection } from 'geojson';
import LocationArcImg from '$assets/images/locationArc.png';
import LocationDotImg from '$assets/images/locationDot.png';
@@ -38,13 +38,12 @@
import FlatGeobuf from '$lib/components/map/flatgeobuf-layer.svelte';
import { getTaskStore } from '$store/tasks.svelte.ts';
import { getProjectSetupStepStore, getProjectBasemapStore } from '$store/common.svelte.ts';
- // import { entityFeatcolStore, selectedEntityId } from '$store/entities';
import { readFileFromOPFS } from '$lib/fs/opfs.ts';
import { loadOfflinePmtiles } from '$lib/utils/basemaps.ts';
import { projectSetupStep as projectSetupStepEnum, NewGeomTypes } from '$constants/enums.ts';
import { baseLayers, osmStyle, pmtilesStyle } from '$constants/baseLayers.ts';
import { getEntitiesStatusStore } from '$store/entities.svelte.ts';
-
+ import { clickOutside } from '$lib/utils/clickOutside.ts';
type bboxType = [number, number, number, number];
@@ -55,7 +54,7 @@
projectId: number;
setMapRef: (map: maplibregl.Map | undefined) => void;
draw?: boolean;
- drawGeomType: NewGeomTypes | undefined;
+ drawGeomType: NewGeomTypes | undefined;
handleDrawnGeom?: ((geojson: GeoJSONGeometry) => void) | null;
}
@@ -80,6 +79,10 @@
let selectedBaselayer: string = $state('OSM');
let taskAreaClicked: boolean = $state(false);
let projectSetupStep: number | null = $state(null);
+ let lineWidth = $state(1); // Initial line width of the rejected entities
+ let expanding = true; // Whether the line is expanding
+ let selectedControl: 'layer-switcher' | 'legend' | null = $state(null);
+ let selectedStyleUrl: string | undefined = $state(undefined);
// Trigger adding the PMTiles layer to baselayers, if PmtilesUrl is set
let allBaseLayers: maplibregl.StyleSpecification[] = $derived(
@@ -122,7 +125,7 @@
// })
let displayDrawHelpText: boolean = $state(false);
type DrawModeOptions = 'point' | 'linestring' | 'delete-selection' | 'polygon';
- const currentDrawMode: DrawModeOptions = drawGeomType ? drawGeomType.toLowerCase() as DrawModeOptions : 'point';
+ const currentDrawMode: DrawModeOptions = drawGeomType ? (drawGeomType.toLowerCase() as DrawModeOptions) : 'point';
const drawControl = new MaplibreTerradrawControl({
modes: [
currentDrawMode,
@@ -262,7 +265,7 @@
}
});
- function addStatusToGeojsonProperty(geojsonData: FeatureCollection) {
+ function addStatusToGeojsonProperty(geojsonData: FeatureCollection): FeatureCollection {
return {
...geojsonData,
features: geojsonData.features.map((feature) => {
@@ -301,6 +304,20 @@
await loadOfflinePmtiles(projectId);
selectedBaselayer = 'PMTiles';
}
+
+ const interval = setInterval(() => {
+ if (expanding) {
+ lineWidth += 0.3;
+ if (lineWidth >= 4) expanding = false; // Maximum width
+ } else {
+ lineWidth -= 0.3;
+ if (lineWidth <= 1) expanding = true; // Minimum width
+ }
+ }, 50); // Update every 50ms for smooth animation
+
+ return () => {
+ clearInterval(interval);
+ };
});
@@ -341,13 +358,60 @@
-
-
+
+ await entitiesStore.syncEntityStatus(projectId)}
+ onkeydown={async (e: KeyboardEvent) => {
+ e.key === 'Enter' && (await entitiesStore.syncEntityStatus(projectId));
+ }}
+ role="button"
+ tabindex="0"
+ >
+
+ {
+ selectedControl = 'layer-switcher';
+ }}
+ role="button"
+ onkeydown={(e) => {
+ if (e.key === 'Enter') {
+ selectedControl = 'layer-switcher';
+ }
+ }}
+ tabindex="0"
+ >
+
![Basemap Icon]({selectedStyleUrl})
+
+ (selectedControl = 'legend')}
+ role="button"
+ onkeydown={(e) => {
+ if (e.key === 'Enter') {
+ selectedControl = 'legend';
+ }
+ }}
+ tabindex="0"
+ >
+
+
@@ -416,7 +480,7 @@
+
+
+
+
+
+