How to Zoom to a KMZ Layer Using maplibre-gl-kmz-layer
It took me a while to figure out to zoom to a KMZ Layer using maplibre-gl-kmz-layer using MapLibre GL and the Gemini AI wasn’t exactly helpful. It’s quite simple if you use the getData() function your KMZ Layer, then pass the features object along to turf.bbox() to get the bounding box.
map.fitBounds(turf.bbox(kmzLayer.getData().features));
Here is a complete code example, that can be copied and pasted in your browser. You may have to change the KMZ file path, as my server does not allow hot linking, but other then that it will run locally.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
<script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
<script src="https://cdn.jsdelivr.net/gh/northprint/maplibre-gl-kmz-layer@main/dist/maplibre-gl-kmz-layer.js"></script>
<!-- required for finding the bbox of the underlying KMZ layer -->
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// initial map set up with openfreemap
const map = new maplibregl.Map({
container: 'map',
zoom: 10,
center: [ -74.62274, 43.68907],
pitch: 0,
bearing: 0,
maxPitch: 95
});
map.setStyle('https://tiles.openfreemap.org/styles/bright');
// once the map is then fully load the KMZ layer
// so that it appears above all other layers
map.on('load', async () => {
let kmzLayer = new MaplibreGLKMZLayer.KMZLayer({
id: 'kmz-layer',
url: 'https://andyarthur.org/data/kml_20266.kmz'
});
await kmzLayer.addTo(map);
// to zoom to the KMZ layer, you need to get the underlying feature data
// use the turf library to get the bounding box (bbox) and pass this along to
// map.fitBounds
map.fitBounds(turf.bbox(kmzLayer.getData().features));
});
</script>
</body>
</html>
Thacher Park 3D Map
This interactive map lets you explore the John Boyd Thacher Park and the Heldeberg Escarpment in 3D.
Condon Hollow Trail – Halcott Mountain Lean To
The Condon Hollow Trail follows an old mountain pass that runs between South Vly Mountain and Sleeping Lion in the Hallcott Mountain Wild Forest. The lean-to is located 2.0 miles west of of the Condon Hollow Parking Area, or 1/2 mile east of the Turk Hollow Road. The col between the mountains is 2,860 elevation, an ascent of 800 feet from Condon Hollow Parking Area. The lean-to is at 2,380 feet, which roughly 300 ascent from the end of Turk Hollow Road or 400 feet below the col. Tailhead parking at: 42.21852779311055,-74.42673587591332
More information on this forest can be found on DEC website: https://www.dec.ny.gov/lands/28314.html
