Fit camera to line¶
Fit camera to line is a component that automatically adjusts the camera to fit the bounds of a specific line on a map.
Example¶
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fit to the bounds of a LineString</title>
<meta property="og:description" content="Get the bounds of a LineString." />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 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;
opacity: 0.6;
}
.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
const geojson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
properties: {},
coordinates: [
[106.71568, 10.80255],
[106.71565000000001, 10.80244],
[106.71538000000001, 10.80156],
[106.71521000000001, 10.801070000000001],
[106.71516000000001, 10.800960000000002],
[106.71462000000001, 10.80114],
[106.71385000000001, 10.80136],
[106.71350000000001, 10.801430000000002],
[106.71298, 10.80161],
[106.71246000000001, 10.80164],
[106.71237, 10.801590000000001],
[106.71226000000001, 10.801580000000001],
[106.71201, 10.801590000000001],
[106.71195, 10.801590000000001],
[106.71189000000001, 10.80156],
[106.71183, 10.8015],
[106.71181000000001, 10.80146],
[106.71180000000001, 10.80141],
[106.71181000000001, 10.801210000000001],
[106.71252000000001, 10.801210000000001],
[106.71273000000001, 10.80122],
[106.71281, 10.801250000000001],
[106.71324000000001, 10.801260000000001],
[106.71335, 10.80128],
[106.71379, 10.80122],
[106.71455, 10.801],
[106.71567, 10.80061],
[106.71599, 10.800500000000001],
[106.71643, 10.8003],
[106.71653, 10.80014],
[106.71660000000001, 10.800070000000002],
[106.71682000000001, 10.79995],
[106.71733, 10.79968],
[106.71794000000001, 10.799380000000001],
[106.71792, 10.79906],
[106.71776000000001, 10.79812],
[106.71774, 10.797930000000001],
[106.71772000000001, 10.79781],
[106.71774, 10.79767],
[106.718, 10.79723],
[106.71738, 10.79673],
],
},
},
],
};
const map = new vietmapgl.Map({
container: "map",
style:
"https://maps.vietmap.vn/mt/tm/style.json?apikey=YOUR_API_KEY_HERE",
center: [106.71733, 10.79968],
zoom: 12,
});
map.on("load", () => {
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,
},
}, "boundary_province");
document.getElementById("zoomto").addEventListener("click", () => {
// Geographic coordinates of the LineString
const 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 geometries - it just
// requires wrapping all the coordinates with the extend method.
const bounds = coordinates.reduce((bounds, coord) => {
return bounds.extend(coord);
}, new vietmapgl.LngLatBounds(coordinates[0], coordinates[0]));
map.fitBounds(bounds, {
padding: 20,
});
});
});
</script>
</body>
</html>
