adminpepe/Lageplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0.7: fix symbol scale bug, custom layer dropdown, simplify rapport form, app logo in rapport

Browse Source
This commit is contained in:
Pepe Ziberi
2026-02-22 01:09:33 +01:00
parent e4c3c92cab
commit 0784553017
5 changed files with 81 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/map/map-view.tsx
View File

@@ -107,6 +107,7 @@ export function MapView({
const measureCoordsRef = useRef<number[][]>([])
const [isMapLoaded, setIsMapLoaded] = useState(false)
const [activeBaseLayer, setActiveBaseLayer] = useState<'osm' | 'satellite' | 'swisstopo' | 'swissimage'>('osm')
const [layerDropdownOpen, setLayerDropdownOpen] = useState(false)
const [measurePointCount, setMeasurePointCount] = useState(0)
const [measureFinished, setMeasureFinished] = useState(false)
const [drawingPointCount, setDrawingPointCount] = useState(0)
@@ -2106,11 +2107,12 @@ export function MapView({
selectedSymbolRef.current.scale = Math.max(0.2, Math.min(10, startScale * ratio))
selectedSymbolRef.current.innerEl.style.fontSize = `${baseFontSize * selectedSymbolRef.current.scale}px`
} else {
// For symbols: resize wrapper
// For symbols: resize wrapper, use ratio from start to preserve zoom-aware scale
selectedSymbolRef.current.wrapperEl.style.width = `${width}px`
selectedSymbolRef.current.wrapperEl.style.height = `${height}px`
const baseSize = 32
selectedSymbolRef.current.scale = Math.max(0.1, Math.min(10, width / baseSize))
const startW = selectedSymbolRef.current.resizeStartWidth || 1
const startScale = selectedSymbolRef.current.resizeStartScale || 1
selectedSymbolRef.current.scale = Math.max(0.1, Math.min(10, startScale * (width / startW)))
}
}
}}
@@ -2155,33 +2157,52 @@ export function MapView({
)}
{/* Layer selector dropdown */}
<select
value={activeBaseLayer}
onChange={(e) => {
if (!map.current) return
const newLayer = e.target.value as 'osm' | 'satellite' | 'swisstopo' | 'swissimage'
const allLayers: Array<'osm' | 'satellite' | 'swisstopo' | 'swissimage'> = ['osm', 'satellite', 'swisstopo', 'swissimage']
for (const l of allLayers) {
map.current.setLayoutProperty(l, 'visibility', l === newLayer ? 'visible' : 'none')
}
setActiveBaseLayer(newLayer)
}}
className="absolute top-3 right-3 z-10 px-2.5 py-1.5 rounded-lg text-xs font-semibold shadow-lg border transition-colors cursor-pointer appearance-none pr-7"
style={{
background: activeBaseLayer !== 'osm' ? 'rgba(0,0,0,0.75)' : 'rgba(255,255,255,0.95)',
color: activeBaseLayer !== 'osm' ? '#fff' : '#333',
borderColor: activeBaseLayer !== 'osm' ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.15)',
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='${activeBaseLayer !== 'osm' ? 'white' : '%23333'}' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'right 6px center',
}}
title="Kartenstil wählen"
>
<option value="osm">🗺️ OpenStreetMap</option>
<option value="satellite">🛰️ Satellit (Esri)</option>
<option value="swisstopo">🇨🇭 Swisstopo Karte</option>
<option value="swissimage">🇨🇭 Swisstopo Luftbild</option>
</select>
<div className="absolute top-3 right-3 z-10">
<button
onClick={() => setLayerDropdownOpen(v => !v)}
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-[11px] font-medium shadow-md border backdrop-blur-sm transition-all"
style={{
background: activeBaseLayer !== 'osm' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.92)',
color: activeBaseLayer !== 'osm' ? '#fff' : '#1f2937',
borderColor: activeBaseLayer !== 'osm' ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.1)',
}}
>
<svg className="w-3.5 h-3.5 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
{{ osm: 'OpenStreetMap', satellite: 'Satellit', swisstopo: 'Swisstopo', swissimage: 'Luftbild CH' }[activeBaseLayer]}
<svg className={`w-3 h-3 opacity-50 transition-transform ${layerDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
</button>
{layerDropdownOpen && (
<>
<div className="fixed inset-0 z-10" onClick={() => setLayerDropdownOpen(false)} />
<div className="absolute right-0 mt-1 z-20 min-w-[160px] rounded-lg shadow-xl border overflow-hidden backdrop-blur-md"
style={{ background: 'rgba(255,255,255,0.95)', borderColor: 'rgba(0,0,0,0.08)' }}>
{([
{ key: 'osm', label: 'OpenStreetMap' },
{ key: 'satellite', label: 'Satellit (Esri)' },
{ key: 'swisstopo', label: 'Swisstopo Karte' },
{ key: 'swissimage', label: 'Luftbild CH' },
] as const).map(({ key, label }) => (
<button
key={key}
onClick={() => {
if (!map.current) return
const allLayers: Array<'osm' | 'satellite' | 'swisstopo' | 'swissimage'> = ['osm', 'satellite', 'swisstopo', 'swissimage']
for (const l of allLayers) {
map.current.setLayoutProperty(l, 'visibility', l === key ? 'visible' : 'none')
}
setActiveBaseLayer(key)
setLayerDropdownOpen(false)
}}
className={`w-full text-left px-3 py-2 text-[11px] font-medium transition-colors ${activeBaseLayer === key ? 'bg-blue-50 text-blue-700' : 'text-gray-700 hover:bg-gray-50'}`}
>
{activeBaseLayer === key && <span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-500 mr-2 align-middle" />}
{label}
</button>
))}
</div>
</>
)}
</div>
{/* Zeichnung abschliessen Button (Linie/Polygon/Pfeil) */}
{(drawMode === 'linestring' || drawMode === 'polygon' || drawMode === 'arrow' || drawMode === 'dangerzone') && drawingPointCount >= 2 && (