ar2350/Projekt-Visualisierung
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Kommentiert

Browse Source
This commit is contained in:
ar2350
2026-07-02 22:02:57 +02:00
parent 267952ef71
commit da29cbeb7e
3 changed files with 860 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+74 -86
View File
@@ -3,22 +3,12 @@
<head>
<meta charset="utf-8" />
<title>LiDAR App</title>
<link
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
rel="stylesheet"
/>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="./libs/potree/potree.css" />
<link
rel="stylesheet"
type="text/css"
href="./libs/jquery-ui/jquery-ui.min.css"
/>
<link rel="stylesheet" type="text/css" href="./libs/jquery-ui/jquery-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
</head>
<body>
<header id="header">
@@ -26,90 +16,88 @@
</header>
<h1 id="title">- Obernkirchener Sandstein -</h1>
<div id="coordinates" title="Koordinaten an Mausposition"></div>
<div id="openButtonOuter">
</div>
<div id="openButtonOuter"></div>
<div id="sideBarOuter">
<aside id="sidebar">
<button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button>
<div class="selectWrapper">
<select name="basemap" id="basemap">
<option value="" disabled selected>Hintergrundkarte </option>
<option value="openfree_bright">Hell</option>
<option value="openfree_dark">Dunkel</option>
<option value="openfree_liberty">Klassisch + Gebäude</option>
<option value="satellite">Satellit</option>
<option value="terrain">Terrain</option>
<option value="satellite_terrain">Terrain + Satellit</option>
</select>
<span class="selectArrow">&#9207</span>
</div>
<div class="selectWrapper">
<select name="pointcloud" id="pointcloud">
<option value="" disabled selected>Punktwolke auswählen</option>
<option value="first">Fläche im unteren Bereich</option>
<option value="second">Abbauwand</option>
<option value="third">Dinosaurier-Spuren</option>
</select>
<span class="selectArrow">&#9207</span>
</div>
<button id="disable">Punktwolke ausblenden</button>
<p class="sideBarText">Qualität der Punktwolke</p>
<div class="buttonRow">
<button class="qualityButtons" id="low">niedrigste</button>
<button class="qualityButtons active" id="medium">mittel</button>
<button class="qualityButtons" id="high">höchste</button>
</div>
<p class="sideBarText">Farbdarstellung</p>
<div class="buttonRow">
<button class="colorButtons active" id="rgb">RGB</button>
<button class="colorButtons" id="height">höhencodiert</button>
</div>
<p class="sideBarText" id="pointSizeSliderValue">Punktgröße</p>
<div class="slider-labels">
<span>Klein</span>
<span>Groß</span>
</div>
<input id="pointSizeSlider" type="range" min="1" max="10" value="2" step="1">
<p class="sideBarText">Renderer</p>
<button id="rendererToggle" data-active="deckgl" title="Renderer wechseln">
<button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button>
<div class="selectWrapper">
<select name="basemap" id="basemap">
<option value="" disabled selected>Hintergrundkarte </option>
<option value="openfree_bright">Hell</option>
<option value="openfree_dark">Dunkel</option>
<option value="openfree_liberty">Klassisch + Gebäude</option>
<option value="satellite">Satellit</option>
<option value="terrain">Terrain</option>
<option value="satellite_terrain">Terrain + Satellit</option>
</select>
<span class="selectArrow">&#9207</span>
</div>
<div class="selectWrapper">
<select name="pointcloud" id="pointcloud">
<option value="" disabled selected>Punktwolke auswählen</option>
<option value="first">Fläche im unteren Bereich</option>
<option value="second">Abbauwand</option>
<option value="third">Dinosaurier-Spuren</option>
</select>
<span class="selectArrow">&#9207</span>
</div>
<button id="disable">Punktwolke ausblenden</button>
<p class="sideBarText">Qualität der Punktwolke</p>
<div class="buttonRow">
<button class="qualityButtons" id="low">niedrigste</button>
<button class="qualityButtons active" id="medium">mittel</button>
<button class="qualityButtons" id="high">höchste</button>
</div>
<p class="sideBarText">Farbdarstellung</p>
<div class="buttonRow">
<button class="colorButtons active" id="rgb">RGB</button>
<button class="colorButtons" id="height">höhencodiert</button>
</div>
<p class="sideBarText" id="pointSizeSliderValue">Punktgröße</p>
<div class="slider-labels">
<span>Klein</span>
<span>Groß</span>
</div>
<input id="pointSizeSlider" type="range" min="1" max="10" value="2" step="1"/>
<p class="sideBarText">Renderer</p>
<button id="rendererToggle" data-active="deckgl" title="Renderer wechseln">
<span id="rendererLabel">Renderer: Deck.gl</span>
<span id="rendererIcon">⇄</span>
</button>
<button id="openInfoPanel" title="Informationen zur Punktwolke"><img src="info.png"/>Informationen</button>
<div class="logos">
<a href="http://www.jade-hs.de">
<img id="logoJadeHs" src="logoJadeHs.png" />
</a>
<a href="https://www.lbeg.niedersachsen.de/startseite/">
<img id="logoLbeg" src="logoLbeg.svg" />
</a>
</div>
</aside>
</div>
</button>
<button id="openInfoPanel" title="Informationen zur Punktwolke">
<img src="info.png" />Informationen
</button>
<div class="logos">
<a href="http://www.jade-hs.de">
<img id="logoJadeHs" src="logoJadeHs.png" />
</a>
<a href="https://www.lbeg.niedersachsen.de/startseite/">
<img id="logoLbeg" src="logoLbeg.svg" />
</a>
</div>
</aside>
</div>
<main id="main">
<div id="location-button">
<img id="location" title="Standort zurücksetzen" src="standort.png" />
</div>
<div id="map"></div>
<div id="potree_render_area"></div>
<footer>
&#169 Arne Zitting u. Hauke Kahrs
</footer>
<footer>&#169 Arne Zitting u. Hauke Kahrs</footer>
<div id="info-panel">
<div id="info-panel-inner">
<button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button>
<h3 id="info-panel-title">Info</h3>
<img id="info-panel-image" src="" alt="Standortbild" style="display:none;" />
<div id="info-image-nav" style="display:none;">
<button id="info-img-prev">&#8592;</button>
<span id="info-image-counter"></span>
<button id="info-img-next">&#8594;</button>
</div>
<p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p>
</div>
</div>
<div id="info-button-outer">
</div>
<div id="info-panel-inner">
<button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button>
<h3 id="info-panel-title">Info</h3>
<img id="info-panel-image" src="" alt="Standortbild" style="display: none"/>
<div id="info-image-nav" style="display: none">
<button id="info-img-prev">&#8592;</button>
<span id="info-image-counter"></span>
<button id="info-img-next">&#8594;</button>
</div>
<p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p>
</div>
</div>
<div id="info-button-outer"></div>
</main>
<script src="./libs/jquery/jquery-3.1.1.min.js"></script>
<script src="./libs/other/BinaryHeap.js"></script>
main.js
+490 -440
View File
File diff suppressed because it is too large Load Diff
style.css
+285 -276
View File
@@ -1,59 +1,60 @@
html, body {
html,
body {
height: 100%;
margin: 0;
}
body{
margin:0;
overflow:hidden;
font-family: 'Inter', sans-serif;
body {
margin: 0;
overflow: hidden;
font-family: "Inter", sans-serif;
background: var(--bg);
color: var(--text);
}
#main{
width:100vw;
height:100vh;
position:relative;
#main {
width: 100vw;
height: 100vh;
position: relative;
}
#header{
position:absolute;
top:20px;
left:50%;
transform:translateX(-50%);
z-index:30;
padding:14px 28px;
#header {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 30;
padding: 14px 28px;
border-radius: 20px;
background:
background:
linear-gradient(
135deg,
rgba(200, 200, 200, 0.221) 10%,
rgba(79, 79, 79, 0.756) 60%,
rgba(47, 47, 47, 0.864) 100%
),
rgba(24,24,27,0.78);
rgba(24, 24, 27, 0.78);
backdrop-filter: blur(16px);
color:white;
font-size:24px;
font-weight:600;
color: white;
font-size: 24px;
font-weight: 600;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.536);
}
.logos{
margin-top:20px;
.logos {
margin-top: 20px;
margin-left: 12px;
opacity:0.8;
opacity: 0.8;
}
.logos img{
width:80px;
.logos img {
width: 80px;
margin-right: 10px;
}
.logos img:hover{
transform:translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
.logos img:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
#location-button {
@@ -69,7 +70,9 @@ body{
background-color: #f8f9fa;
border: none !important;
border-radius: 4px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.1),
0 4px 6px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing: border-box;
}
@@ -78,28 +81,28 @@ body{
background-color: #f4f4f4;
}
#location{
width:20px;
height:20px;
object-fit:contain;
#location {
width: 20px;
height: 20px;
object-fit: contain;
margin-left: 1px;
margin-top: 1px;
cursor: pointer;
}
#location:hover{
transform:scale(1.05);
background:rgb(233, 232, 232);
#location:hover {
transform: scale(1.05);
background: rgb(233, 232, 232);
}
#location-button:hover{
background:rgb(233, 232, 232);
#location-button:hover {
background: rgb(233, 232, 232);
}
#sidebar {
position: absolute;
top: 48%;
transform:translateY(-50%);
transform: translateY(-50%);
left: 20px;
width: 210px;
padding: 22px;
@@ -107,13 +110,13 @@ body{
padding-top: 10px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.3);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
z-index: 20;
display: flex;
flex-direction: column;
gap:8px;
gap: 8px;
}
#main {
@@ -126,9 +129,9 @@ body{
height: 100%;
}
#potree_render_area{
position:absolute;
top:0;
#potree_render_area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@@ -140,50 +143,49 @@ body{
background: transparent !important;
}
select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
width:100%;
padding:10px 16px;
border:none;
border-radius:14px;
background:rgba(255,255,255,0.92);
font-size:14px;
font-weight:500;
color:#0f172a;
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
padding: 10px 16px;
border: none;
border-radius: 14px;
background: rgba(255, 255, 255, 0.92);
font-size: 14px;
font-weight: 500;
color: #0f172a;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
cursor:pointer;
transition:0.2s;
cursor: pointer;
transition: 0.2s;
}
.selectWrapper{
position:relative;
width:100%;
.selectWrapper {
position: relative;
width: 100%;
}
.selectArrow{
position:absolute;
right:14px;
top:48%;
transform:translateY(-50%);
pointer-events:none;
font-size:14px;
color:#000000;
.selectArrow {
position: absolute;
right: 14px;
top: 48%;
transform: translateY(-50%);
pointer-events: none;
font-size: 14px;
color: #000000;
}
#disable{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
width:100%;
padding:10px 16px;
border:none;
border-radius:14px;
font-size:14px;
font-weight:500;
background:
#disable {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
padding: 10px 16px;
border: none;
border-radius: 14px;
font-size: 14px;
font-weight: 500;
background:
linear-gradient(
135deg,
rgba(18, 77, 216, 0.92) 10%,
@@ -191,16 +193,16 @@ select{
rgba(6, 45, 135, 0.92) 100%
),
rgba(6, 45, 135, 0.92);
color: white;
color: white;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
cursor:pointer;
transition:0.2s;
cursor: pointer;
transition: 0.2s;
margin-top: 8px;
margin-bottom: 10px;
}
#disable.active-state {
background:
background:
linear-gradient(
135deg,
rgba(18, 77, 216, 0.92) 10%,
@@ -208,37 +210,39 @@ select{
rgba(6, 45, 135, 0.92) 100%
),
rgba(6, 45, 135, 0.92);
color: white;
color: white;
}
#disable.inactive-state {
background: rgba(255,255,255,0.92);
color: #0f172a;
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
}
select:hover{
transform:translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
select:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
select:focus{
outline:none;
box-shadow:0 0 0 4px rgba(37,99,235,0.15), 0 8px 24px rgba(0,0,0,0.12);
select:focus {
outline: none;
box-shadow:
0 0 0 4px rgba(37, 99, 235, 0.15),
0 8px 24px rgba(0, 0, 0, 0.12);
}
#disable:hover{
transform:translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
#disable:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
*{
* {
transition:
background 0.2s,
transform 0.01s,
opacity 0.2s;
}
footer{
footer {
z-index: 30;
position: absolute;
bottom: 8px;
@@ -246,13 +250,13 @@ footer{
font-size: small;
}
.sideBarText{
font-size:80%;
margin:0;
margin-bottom: -2px;
.sideBarText {
font-size: 80%;
margin: 0;
margin-bottom: -2px;
}
#pointSizeSlider{
#pointSizeSlider {
width: 100%;
margin: 0;
padding: 0;
@@ -260,7 +264,7 @@ margin-bottom: -2px;
margin-bottom: 8px;
}
input[type="range"]{
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
@@ -272,12 +276,12 @@ input[type="range"]{
outline: none;
}
input[type="range"]::-webkit-slider-thumb{
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width:16px;
height:16px;
border-radius:50%;
background:
width: 16px;
height: 16px;
border-radius: 50%;
background:
linear-gradient(
135deg,
rgba(18, 77, 216, 0.92) 10%,
@@ -285,106 +289,108 @@ input[type="range"]::-webkit-slider-thumb{
rgba(6, 45, 135, 0.92) 100%
),
rgba(6, 45, 135, 0.92);
cursor:pointer;
cursor: pointer;
}
.slider-labels{
display:flex;
justify-content:space-between;
font-size:0.5rem;
color:#868686;
margin-bottom:0px;
margin-top: -5px;
.slider-labels {
display: flex;
justify-content: space-between;
font-size: 0.5rem;
color: #868686;
margin-bottom: 0px;
margin-top: -5px;
}
#title{
#title {
z-index: 30;
position: absolute;
top: 75px;
left: 50%;
transform:translateX(-50%);
transform: translateX(-50%);
font-size: small;
color: #ffffff;
text-shadow: 1px 1.5px #00000059;
}
#coordinates{
#coordinates {
z-index: 30;
position: absolute;
bottom: 20px;
left: 50%;
transform:translateX(-50%);
transform: translateX(-50%);
font-size: smaller;
color: #000000cf;
border: none;
border-radius: 14px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
padding:8px;
padding: 8px;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.751);
backdrop-filter: blur(10px);
}
.sideBarButtons{
font-family:monospace;
border:none;
border-radius:10px;
background:
.sideBarButtons {
font-family: monospace;
border: none;
border-radius: 10px;
background:
linear-gradient(
135deg,
rgba(200, 200, 200, 0.221) 10%,
rgba(79, 79, 79, 0.756) 60%,
rgba(47, 47, 47, 0.864) 100%
),
rgba(24,24,27,0.78);
font-size:15px;
color:#ffffff;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
cursor:pointer;
transition:0.2s;
rgba(24, 24, 27, 0.78);
font-size: 15px;
color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
cursor: pointer;
transition: 0.2s;
z-index: 30;
}
#closeSideBarButton{
align-self: flex-end;
#closeSideBarButton {
align-self: flex-end;
right: 0%;
padding:5px 15px;
padding: 5px 15px;
}
#openSideBarButton{
position: absolute;
#openSideBarButton {
position: absolute;
left: 5px;
padding:5px 15px;
padding: 5px 15px;
}
.buttonRow{
.buttonRow {
display: flex;
width: 100%;
border: none;
border-radius: 10px;
overflow:hidden;
overflow: hidden;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
margin-bottom: 10px;
}
.qualityButtons, .colorButtons{
flex: 1;
margin: 0;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
border:none;
background:rgba(255,255,255,0.92);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
font-size:12px;
color:#0f172a;
padding:5px;
cursor:pointer;
transition:0.2s;
}
.qualityButtons.active, .colorButtons.active{
background:
.qualityButtons,
.colorButtons {
flex: 1;
margin: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
font-size: 12px;
color: #0f172a;
padding: 5px;
cursor: pointer;
transition: 0.2s;
}
.qualityButtons.active,
.colorButtons.active {
background:
linear-gradient(
135deg,
rgba(18, 77, 216, 0.92) 10%,
@@ -392,182 +398,185 @@ position: absolute;
rgba(6, 45, 135, 0.92) 100%
),
rgba(6, 45, 135, 0.92);
color: #ffffff;
color: #ffffff;
}
#potree_render_area {
pointer-events: none;
}
}
#info-button-outer {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
z-index: 30;
#info-button-outer {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
z-index: 30;
}
#rendererToggle {
width: 100%;
padding: 10px 16px;
border: none;
border-radius: 14px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 5px 10px rgba(0,0,0,0.278);
transition: 0.2s;
width: 100%;
padding: 10px 16px;
border: none;
border-radius: 14px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
transition: 0.2s;
}
#rendererToggle[data-active="deckgl"] {
background: linear-gradient(
135deg,
rgba(18,77,216,0.92) 10%,
rgba(13,61,175,0.92) 60%,
rgba(6,45,135,0.92) 100%);
color: #ffffff;
background: linear-gradient(
135deg,
rgba(18, 77, 216, 0.92) 10%,
rgba(13, 61, 175, 0.92) 60%,
rgba(6, 45, 135, 0.92) 100%
);
color: #ffffff;
}
#rendererToggle[data-active="potree"] {
background: linear-gradient(
135deg,
rgba(22,163,74,0.92) 10%,
rgba(15,118,54,0.92) 60%,
rgba(6,78,32,0.92) 100%);
color: #ffffff;
background: linear-gradient(
135deg,
rgba(22, 163, 74, 0.92) 10%,
rgba(15, 118, 54, 0.92) 60%,
rgba(6, 78, 32, 0.92) 100%
);
color: #ffffff;
}
#rendererToggle:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
#rendererIcon {
font-size: 16px;
font-size: 16px;
}
#openInfoPanel {
margin-top: 12px;
border: none;
border-radius: 14px;
width: 100%;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
background: rgba(255,255,255,0.9);
box-shadow: 0 5px 10px rgba(0,0,0,0.278);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #1e293b;
margin-top: 12px;
border: none;
border-radius: 14px;
width: 100%;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #1e293b;
}
#openInfoPanel:hover {
background: rgb(233,232,232);
transform: translateY(-1px);
background: rgb(233, 232, 232);
transform: translateY(-1px);
}
#openInfoPanel img {
width: 16px;
height: 16px;
object-fit: contain;
width: 16px;
height: 16px;
object-fit: contain;
}
#info-panel {
display: none;
position: absolute;
top: 48%;
right: 20px;
transform: translateY(-50%);
width: 340px;
padding: 18px 22px;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
z-index: 20;
display: none;
flex-direction: column;
gap: 0;
display: none;
position: absolute;
top: 48%;
right: 20px;
transform: translateY(-50%);
width: 340px;
padding: 18px 22px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
z-index: 20;
display: none;
flex-direction: column;
gap: 0;
}
#info-panel.open {
display: flex;
display: flex;
}
#closeInfoPanel {
align-self: flex-start;
padding: 5px 15px;
margin-bottom: 14px;
align-self: flex-start;
padding: 5px 15px;
margin-bottom: 14px;
}
#info-panel-title {
margin: 0 0 14px 0;
font-size: 14px;
font-weight: 600;
color: #0f172a;
margin: 0 0 14px 0;
font-size: 14px;
font-weight: 600;
color: #0f172a;
}
#info-panel-image {
width: 100%;
border-radius: 12px;
object-fit: cover;
max-height: 220px;
margin-bottom: 14px;
width: 100%;
border-radius: 12px;
object-fit: cover;
max-height: 220px;
margin-bottom: 14px;
}
#info-image-nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 14px;
}
#info-panel-text {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: #1e293b;
margin: 0;
font-size: 13px;
line-height: 1.6;
color: #1e293b;
}
#info-img-prev, #info-img-next {
border: none;
background: rgba(255,255,255,0.9);
border-radius: 8px;
padding: 4px 10px;
cursor: pointer;
font-size: 16px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
#info-img-prev,
#info-img-next {
border: none;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
padding: 4px 10px;
cursor: pointer;
font-size: 16px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#info-img-prev:hover, #info-img-next:hover {
background: rgb(233,232,232);
#info-img-prev:hover,
#info-img-next:hover {
background: rgb(233, 232, 232);
}
#info-image-counter {
font-size: 12px;
color: #555;
font-size: 12px;
color: #555;
}
.lidar-control-icon {
display: none !important;
display: none !important;
}
.maplibregl-ctrl:has(.lidar-control-icon),
.maplibregl-ctrl-group:has(.lidar-control-icon),
button:has(.lidar-control-icon) {
display: none !important;
visibility: hidden !important;
width: 0px !important;
height: 0px !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
display: none !important;
visibility: hidden !important;
width: 0px !important;
height: 0px !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}