map controls doc

website/src/lib/components/docs/DocsLayers.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
+	import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
+</script>
+
+<div class="relative h-80 aspect-square rounded-2xl shadow-xl overflow-clip">
+	<enhanced:img src={mapboxOutdoorsMap} alt="Mapbox Outdoors map screenshot." class="absolute" />
+	<enhanced:img
+		src={waymarkedMap}
+		alt="Waymarked Trails map screenshot."
+		class="absolute opacity-0 hover:opacity-100 transition-opacity duration-200"
+	/>
+</div>

website/src/lib/components/layer-control/LayerControlSettings.svelte

@@ -140,14 +140,6 @@
 					</Accordion.Content>
 				</Accordion.Item>
 				<Accordion.Item value="item-2">
-					<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
-					<Accordion.Content>
-						<ScrollArea>
-							<CustomLayers />
-						</ScrollArea>
-					</Accordion.Content>
-				</Accordion.Item>
-				<Accordion.Item value="item-3">
 					<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
 					<Accordion.Content class="flex flex-col gap-3 overflow-visible">
 						<Label class="flex flex-row gap-2 items-center">
@@ -195,6 +187,14 @@
 						</Label>
 					</Accordion.Content>
 				</Accordion.Item>
+				<Accordion.Item value="item-3">
+					<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
+					<Accordion.Content>
+						<ScrollArea>
+							<CustomLayers />
+						</ScrollArea>
+					</Accordion.Content>
+				</Accordion.Item>
 				<Accordion.Item value="item-4">
 					<Accordion.Trigger>{$_('layers.heatmap')}</Accordion.Trigger>
 					<Accordion.Content class="overflow-visible">