steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 23:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

layer control with responsive height

Browse Source
This commit is contained in:
vcoppe
2024-04-15 11:25:31 +02:00
parent 2cd07688c9
commit 8a81c30cf1
2 changed files with 56 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
website/src/lib/components/Map.svelte
View File

@@ -116,5 +116,10 @@
div :global(.mapboxgl-ctrl-top-right) { div :global(.mapboxgl-ctrl-top-right) {
@apply z-10; @apply z-10;
@apply flex;
@apply flex-col;
@apply items-end;
@apply h-full;
@apply overflow-hidden;
} }
</style> </style>

104
website/src/lib/components/layer-control/LayerControl.svelte
View File

@@ -26,66 +26,64 @@
} }
</script> </script>
<CustomControl {map} class="group min-w-[29px] min-h-[29px]"> <CustomControl {map} class="group min-w-[29px] min-h-[29px] overflow-hidden">
<div <div
class="flex flex-row justify-center items-center w-[29px] h-[29px] delay-100 transition-[opacity height] duration-0 group-hover:opacity-0 group-hover:h-0 group-hover:delay-0" class="flex flex-row justify-center items-center w-[29px] h-[29px] delay-100 transition-[opacity height] duration-0 group-hover:opacity-0 group-hover:h-0 group-hover:delay-0"
> >
<Layers size="20" /> <Layers size="20" />
</div> </div>
<div <div
class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 group-hover:grid-rows-[1fr] group-hover:grid-cols-[1fr]" class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 group-hover:grid-rows-[1fr] group-hover:grid-cols-[1fr] h-full"
> >
<div class="overflow-hidden"> <ScrollArea>
<ScrollArea> <div class="h-fit">
<div class="h-fit max-h-[50vh]"> <div class="p-2">
<div class="p-2"> <LayerTree
<LayerTree layerTree={basemapTree}
layerTree={basemapTree} name="basemaps"
name="basemaps" onValueChange={(id) => {
onValueChange={(id) => { if (map) {
if (map) { map.setStyle(basemaps[id]);
map.setStyle(basemaps[id]); }
} }}
}} />
/>
</div>
<Separator class="w-full" />
<div class="p-2">
<LayerTree
layerTree={overlayTree}
name="overlays"
multiple={true}
onValueChange={(id, checked) => {
if (map) {
if (checked) {
if (!map.getSource(id)) {
map.addSource(id, overlays[id]);
}
map.addLayer({
id,
type: overlays[id].type === 'raster' ? 'raster' : 'line',
source: id,
paint: {
...(id in opacities
? overlays[id].type === 'raster'
? { 'raster-opacity': opacities[id] }
: { 'line-opacity': opacities[id] }
: {})
}
});
} else {
map.removeLayer(id);
}
}
}}
/>
</div>
<Separator class="w-full" />
<div class="p-2">
<LayerControlSettings />
</div>
</div> </div>
</ScrollArea> <Separator class="w-full" />
</div> <div class="p-2">
<LayerTree
layerTree={overlayTree}
name="overlays"
multiple={true}
onValueChange={(id, checked) => {
if (map) {
if (checked) {
if (!map.getSource(id)) {
map.addSource(id, overlays[id]);
}
map.addLayer({
id,
type: overlays[id].type === 'raster' ? 'raster' : 'line',
source: id,
paint: {
...(id in opacities
? overlays[id].type === 'raster'
? { 'raster-opacity': opacities[id] }
: { 'line-opacity': opacities[id] }
: {})
}
});
} else {
map.removeLayer(id);
}
}
}}
/>
</div>
<Separator class="w-full" />
<div class="p-2">
<LayerControlSettings />
</div>
</div>
</ScrollArea>
</div> </div>
</CustomControl> </CustomControl>