Fit to the bounds of a LineString | UNL Map JS Docs

Get the bounds of a LineString by passing its first coordinates to LngLatBounds and chaining extend to include the last coordinates.

Note

If you want to test this example, edit it in JSFiddle or CodePen and replace the "YOUR-OWN-API-KEY" and "YOUR-OWN-VPM-ID" placeholders with your actual api key and vpm id.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Fit to the bounds of a LineString</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.js"></script>
<link href="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.css" rel="stylesheet" />
<link
href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css"
rel="stylesheet"
/>
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
.btn-control {
font: bold 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
background-color: #3386c0;
color: #fff;
position: absolute;
top: 20px;
left: 50%;
z-index: 1;
border: none;
width: 200px;
margin-left: -100px;
display: block;
cursor: pointer;
padding: 10px 20px;
border-radius: 3px;
}
 
.btn-control:hover {
background-color: #4ea0da;
}
</style>
<div id="map"></div>
<button id="zoomto" class="btn-control">Zoom to bounds</button>
 
<script>
// A GeoJSON object with a LineString route from the White House to Capitol Hill
var geojson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
properties: {},
coordinates: [
[-77.0366048812866, 38.89873175227713],
[-77.03364372253417, 38.89876515143842],
[-77.03364372253417, 38.89549195896866],
[-77.02982425689697, 38.89549195896866],
[-77.02400922775269, 38.89387200688839],
[-77.01519012451172, 38.891416957534204],
[-77.01521158218382, 38.892068305429156],
[-77.00813055038452, 38.892051604275686],
[-77.00832366943358, 38.89143365883688],
[-77.00818419456482, 38.89082405874451],
[-77.00815200805664, 38.88989712255097],
],
},
},
],
};
 
var map = new UnlSdk.Map({
container: "map",
apiKey: "YOUR-OWN-API-KEY",
vpmId: "YOUR-OWN-VPM-ID",
center: [-77.0214, 38.897],
zoom: 12,
});
 
map.on("load", function () {
map.addSource("LineString", {
type: "geojson",
data: geojson,
});
map.addLayer({
id: "LineString",
type: "line",
source: "LineString",
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": "#BF93E4",
"line-width": 5,
},
});
 
document.getElementById("zoomto").addEventListener("click", function () {
// Geographic coordinates of the LineString
var coordinates = geojson.features[0].geometry.coordinates;
 
// Pass the first coordinates in the LineString to `lngLatBounds` &
// wrap each coordinate pair in `extend` to include them in the bounds
// result. A variation of this technique could be applied to zooming
// to the bounds of multiple Points or Polygon geomteries - it just
// requires wrapping all the coordinates with the extend method.
var bounds = coordinates.reduce(function (bounds, coord) {
return bounds.extend(coord);
}, new UnlSdk.LngLatBounds(coordinates[0], coordinates[0]));
 
map.fitBounds(bounds, {
padding: 20,
});
});
});
</script>
 
</body>
</html>