Skip to content

Commit d432e32

Browse files
giswqsgiswqs
authored
Add layer control (#6)
1 parent 656eaf8 commit d432e32

3 files changed

Lines changed: 26 additions & 115 deletions

File tree

‎index.html‎

Lines changed: 12 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -116,30 +116,21 @@
116116
background: rgba(255, 255, 255, 0.25);
117117
}
118118

119-
.github-link {
119+
.footer-links {
120120
margin-top: 40px;
121+
font-size: 14px;
122+
color: rgba(255, 255, 255, 0.7);
121123
}
122124

123-
.github-link a {
124-
display: inline-flex;
125-
align-items: center;
126-
gap: 8px;
127-
color: rgba(255, 255, 255, 0.8);
125+
.footer-links a {
126+
color: rgba(255, 255, 255, 0.9);
128127
text-decoration: none;
129-
font-size: 14px;
130128
transition: color 0.2s;
131129
}
132130

133-
.github-link a:hover {
131+
.footer-links a:hover {
134132
color: white;
135-
}
136-
137-
.github-link svg {
138-
opacity: 0.8;
139-
}
140-
141-
.github-link a:hover svg {
142-
opacity: 1;
133+
text-decoration: underline;
143134
}
144135

145136
/* Map viewer styles */
@@ -148,55 +139,6 @@
148139
height: 100vh;
149140
}
150141

151-
.info-box {
152-
position: absolute;
153-
bottom: 20px;
154-
left: 20px;
155-
background: white;
156-
padding: 12px 16px;
157-
border-radius: 8px;
158-
box-shadow: 0 2px 12px rgba(0,0,0,0.2);
159-
font-size: 13px;
160-
max-width: 350px;
161-
z-index: 1;
162-
display: none;
163-
}
164-
165-
.info-box h3 {
166-
margin: 0 0 8px 0;
167-
font-size: 14px;
168-
}
169-
170-
.info-box p {
171-
margin: 0 0 10px 0;
172-
color: #666;
173-
line-height: 1.5;
174-
}
175-
176-
.info-box .url-display {
177-
word-break: break-all;
178-
font-family: monospace;
179-
font-size: 11px;
180-
background: #f5f5f5;
181-
padding: 8px;
182-
border-radius: 4px;
183-
margin-bottom: 10px;
184-
}
185-
186-
.info-box button {
187-
background: #1a5f7a;
188-
color: white;
189-
border: none;
190-
padding: 8px 16px;
191-
border-radius: 4px;
192-
cursor: pointer;
193-
font-size: 13px;
194-
}
195-
196-
.info-box button:hover {
197-
background: #0d4f5e;
198-
}
199-
200142
#loading-indicator {
201143
position: absolute;
202144
top: 50%;
@@ -256,27 +198,17 @@ <h1>LiDAR Point Cloud Viewer</h1>
256198
</button>
257199
</div>
258200

259-
<div class="github-link">
260-
<a href="https://github.com/opengeos/maplibre-gl-lidar" target="_blank" rel="noopener noreferrer">
261-
<svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor">
262-
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
263-
</svg>
264-
Powered by maplibre-gl-lidar
265-
</a>
201+
<div class="footer-links">
202+
Powered by
203+
<a href="https://github.com/opengeos/maplibre-gl-lidar" target="_blank" rel="noopener noreferrer">maplibre-gl-lidar</a>
204+
&bull;
205+
<a href="https://github.com/opengeos/lidar-viewer" target="_blank" rel="noopener noreferrer">lidar-viewer</a>
266206
</div>
267207
</div>
268208

269209
<!-- Map Container -->
270210
<div id="map"></div>
271211

272-
<!-- Info Box -->
273-
<div id="info-box" class="info-box">
274-
<h3>Point Cloud Loaded</h3>
275-
<p>Use the control panel in the top-right corner to adjust styling.</p>
276-
<div id="url-display" class="url-display"></div>
277-
<button id="load-another-btn">Load Another</button>
278-
</div>
279-
280212
<!-- Loading Indicator -->
281213
<div id="loading-indicator">
282214
<div class="spinner"></div>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
"license": "MIT",
1313
"dependencies": {
1414
"maplibre-gl": "^5.14.0",
15-
"maplibre-gl-lidar": "^0.4.0",
16-
"maplibre-gl-layer-control": "^0.8.0"
15+
"maplibre-gl-lidar": "^0.5.0",
16+
"maplibre-gl-layer-control": "^0.8.1"
1717
},
1818
"devDependencies": {
1919
"typescript": "^5.7.0",

‎src/main.ts‎

Lines changed: 12 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import maplibregl from 'maplibre-gl';
2-
import { LidarControl } from 'maplibre-gl-lidar';
2+
import { LidarControl, LidarLayerAdapter } from 'maplibre-gl-lidar';
33
import { LayerControl } from 'maplibre-gl-layer-control';
44
import 'maplibre-gl-lidar/style.css';
55
import 'maplibre-gl/dist/maplibre-gl.css';
@@ -9,13 +9,11 @@ const urlFormContainer = document.getElementById('url-form-container') as HTMLDi
99
const urlForm = document.getElementById('url-form') as HTMLFormElement;
1010
const urlInput = document.getElementById('url-input') as HTMLInputElement;
1111
const loadBtn = document.getElementById('load-btn') as HTMLButtonElement;
12-
const infoBox = document.getElementById('info-box') as HTMLDivElement;
13-
const urlDisplay = document.getElementById('url-display') as HTMLDivElement;
14-
const loadAnotherBtn = document.getElementById('load-another-btn') as HTMLButtonElement;
1512
const loadingIndicator = document.getElementById('loading-indicator') as HTMLDivElement;
1613

1714
let map: maplibregl.Map | null = null;
1815
let lidarControl: LidarControl | null = null;
16+
let layerControl: LayerControl | null = null;
1917

2018
/**
2119
* Initialize the MapLibre GL map instance.
@@ -42,13 +40,13 @@ function initMap(): maplibregl.Map {
4240
map.addControl(new maplibregl.NavigationControl(), 'top-right');
4341
map.addControl(new maplibregl.FullscreenControl(), 'top-right');
4442
map.addControl(new maplibregl.GlobeControl(), 'top-right');
45-
map.addControl(new maplibregl.ScaleControl(), 'bottom-right');
43+
map.addControl(new maplibregl.ScaleControl(), 'bottom-left');
4644

4745
// Add layer control for basemap layers
48-
const layerControl = new LayerControl({
46+
layerControl = new LayerControl({
4947
collapsed: true,
5048
basemapStyleUrl: BASEMAP_STYLE,
51-
});
49+
});
5250
map.addControl(layerControl, 'top-right');
5351

5452
return map;
@@ -130,6 +128,12 @@ async function loadPointCloud(url: string): Promise<void> {
130128
const control = initLidarControl();
131129
if (!mapInstance.hasControl(control)) {
132130
mapInstance.addControl(control, 'top-right');
131+
132+
// Register LidarLayerAdapter with LayerControl
133+
if (layerControl) {
134+
const lidarAdapter = new LidarLayerAdapter(control);
135+
layerControl.registerCustomAdapter(lidarAdapter);
136+
}
133137
}
134138

135139
// Clear existing point clouds
@@ -155,10 +159,8 @@ async function loadPointCloud(url: string): Promise<void> {
155159
const filename = url.split('/').pop() || 'Point Cloud';
156160
document.title = `${filename} - LiDAR Viewer`;
157161

158-
// Show map, hide form
162+
// Hide form when point cloud is loaded
159163
urlFormContainer.style.display = 'none';
160-
infoBox.style.display = 'block';
161-
urlDisplay.textContent = url;
162164
} catch (err) {
163165
console.error('Failed to load point cloud:', err);
164166
const message = err instanceof Error ? err.message : 'Unknown error';
@@ -169,26 +171,6 @@ async function loadPointCloud(url: string): Promise<void> {
169171
}
170172
}
171173

172-
/**
173-
* Show the URL input form and reset the UI to initial state.
174-
*
175-
* Hides the info box, displays the form, and removes the URL
176-
* parameter from the browser address bar.
177-
*/
178-
function showForm(): void {
179-
urlFormContainer.style.display = 'flex';
180-
infoBox.style.display = 'none';
181-
urlInput.focus();
182-
183-
// Update URL (remove query param)
184-
const newUrl = new URL(window.location.href);
185-
newUrl.searchParams.delete('url');
186-
window.history.pushState({}, '', newUrl.toString());
187-
188-
// Reset title
189-
document.title = 'LiDAR Point Cloud Viewer';
190-
}
191-
192174
// Event listeners
193175
urlForm.addEventListener('submit', (e) => {
194176
e.preventDefault();
@@ -209,9 +191,6 @@ document.querySelectorAll('.sample-urls button[data-url]').forEach((btn) => {
209191
});
210192
});
211193

212-
// Load another button
213-
loadAnotherBtn.addEventListener('click', showForm);
214-
215194
// Check for URL parameter on page load
216195
const params = new URLSearchParams(window.location.search);
217196
const initialUrl = params.get('url');

0 commit comments

Comments
 (0)