Add polyline to array of markers in Leaflet - leaflet

Question

I'm very new to Leaflet and coding, and I'm basically just trying out to see if I can build a random map with different features. I've come across an issue, which I need help with.
I can't add a polyline to an array (see my attempt below), and secondly, I can't make the map fitBounds.
// Map settings
var map = L.map('map').setView([11.206051, 122.447886], 8);
mapLink =
'OpenStreetMap';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
// Icons -> https://github.com/pointhi/leaflet-color-markers
var myIcon = L.icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png'
});
// Icons2
var myIcon2 = L.icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-violet.png'
});
// Locations
var locations = [
["LOCATION_1", 11.8166, 122.0942],
["LOCATION_2", 11.9804, 121.9189],
["LOCATION_3", 10.7202, 122.5621],
["LOCATION_4", 11.3889, 122.6277],
["LOCATION_5", 10.5929, 122.6325]
];
// Locations 2
var locations2 = [
["LOCATION_1", 9.8166, 122.0942],
["LOCATION_2", 9.9804, 121.9189]
];
// Add markers
for (var i = 0; i < locations.length; i++) {
marker = new L.marker([locations[i][1], locations[i][2]], {icon: myIcon})
.bindPopup(locations[i][0])
.addTo(map);
}
// Add markers2
for (var i = 0; i < locations2.length; i++) {
marker = new L.marker([locations2[i][1], locations2[i][2]], {icon: myIcon2})
.bindPopup(locations[i][0])
.addTo(map);
}
// Add polyline (NOT WORKING)
var polyline = L.polyline([locations[i][1], locations[i][2]], {color: 'red'}).addTo(map);
// Zoom the map to the polyline (NOT WORKING)
map.fitBounds(polyline.getBounds());
Here's a Fiddle: https://jsfiddle.net/Enounce/kcwngxe0/17/
Thanks in advance!

Answer 1

polyline is outside of the loop so i will only take the last value of locations2.length which is 2
Better use let inside for loops so you won't end up with local for loop variables being exposed outside the for loop block
Moreover if I understood correctly you want to add a polyline between the markers of each locations array, locations and locations2
So you need to have a data format of array of latlngs like so:
var locations2 = [
[9.8166, 122.0942],
[9.9804, 121.9189]
];
to be able to create polylines
You can get that by mapping over the two arrays and returning an array with only lat and longitude.
var polyline = L.polyline(locations.map(location => [location[1], location[2]]), {
color: 'red'
}).addTo(map);
You can do the same for locations2 array
var polyline2 = L.polyline(locations2.map(location2 => [location2[1], location2[2]]), {
color: 'red'
}).addTo(map);
Finally to fit the bounds using both polylines you can simply place the two polyline instances in a featureGroup and get its bounds using getBounds method.
const featureGroup = L.featureGroup();
featureGroup.addTo(map);
featureGroup.addLayer(polyline);
featureGroup.addLayer(polyline2);
map.fitBounds(featureGroup.getBounds());
// Map settings
var map = L.map('map').setView([11.206051, 122.447886], 8);
mapLink =
'OpenStreetMap';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
// Icons -> https://github.com/pointhi/leaflet-color-markers
var myIcon = L.icon({
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40],
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png'
});
// Icons2
var myIcon2 = L.icon({
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40],
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-violet.png'
});
// Locations
var locations = [
["LOCATION_1", 11.8166, 122.0942],
["LOCATION_2", 11.9804, 121.9189],
["LOCATION_3", 10.7202, 122.5621],
["LOCATION_4", 11.3889, 122.6277],
["LOCATION_5", 10.5929, 122.6325]
];
// Locations 2
var locations2 = [
["LOCATION_1", 9.8166, 122.0942],
["LOCATION_2", 9.9804, 121.9189]
];
// Add markers
for (let i = 0; i < locations.length; i++) {
marker = new L.marker([locations[i][1], locations[i][2]], {
icon: myIcon
})
.bindPopup(locations[i][0])
.addTo(map);
}
var polyline = L.polyline(locations.map(location => [location[1], location[2]]), {
color: 'red'
}).addTo(map);
console.log(locations.map(location => [location[1], location[2]]))
// Add markers2
for (let i = 0; i < locations2.length; i++) {
marker = new L.marker([locations2[i][1], locations2[i][2]], {
icon: myIcon2
})
.bindPopup(locations[i][0])
.addTo(map);
}
var polyline2 = L.polyline(locations2.map(location2 => [location2[1], location2[2]]), {
color: 'red'
}).addTo(map);
const featureGroup = L.featureGroup();
featureGroup.addTo(map)
featureGroup.addLayer(polyline)
featureGroup.addLayer(polyline2)
map.fitBounds(featureGroup.getBounds());
#map {
height: 700px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<div id='map'></div>