Center leaflet map based on markers

Question

I am new in this, but I can't find any working solution for my problem. I would like to center the map based on the markers. I found a lot of examples but did not managed to get it working.

Can someone please help me with this?

 var startmarkers = [ ['Paris', 48.8581817, 2.3454923, 0, './Paris/index.html', 'France'], ['London', 51.5097076, -0.1327514, 1, './London/index.html', 'UK'], ['Amsterdam', 52.3723963, 4.8954506, 2, './Amsterdam/index.html', 'Netherlands'], ['Brussels', 50.8455315, 4.3554069, 3, './Brussels/index.html', 'Belgium'], ]; var map = L.map('map').setView([49.2595092, 3.5204334], 6); //var map = L.map('map').fitBounds(startmarkers.getBounds()); --- Not Working --- mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>'; L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18, }).addTo(map); for (var i = 0; i < startmarkers.length; i++) { marker = new L.marker([startmarkers[i][1], startmarkers[i][2]]) .bindPopup('<a href=\\"' + startmarkers[i][4] + '\\">' + startmarkers[i][0] + '<br>' + startmarkers[i][5]) .addTo(map); }

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script> <div id="map" style="width: 1024px; height: 600px"></div>

Answer 1

You need to have an array which contains only the coordinates of each marker inside individual arrays (array of arrayOfLatLngs ). After that, create a bounds and pass the array of L.LatLngs and finally fit the bounds on the map:

 var map = L.map('map').setView([49.2595092, 3.5204334], 6); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); var startmarkers = [ ['Paris', 48.8581817, 2.3454923, 0, './Paris/index.html', 'France'], ['London', 51.5097076, -0.1327514, 1, './London/index.html', 'UK'], ['Amsterdam', 52.3723963, 4.8954506, 2, './Amsterdam/index.html', 'Netherlands'], ['Brussels', 50.8455315, 4.3554069, 3, './Brussels/index.html', 'Belgium'], ]; mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>'; L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18, }).addTo(map); let arrayOfMarkers = []; for (let i = 0; i < startmarkers.length; i++) { marker = new L.marker([startmarkers[i][1], startmarkers[i][2]]) .bindPopup('<a href=\\"' + startmarkers[i][4] + '\\">' + startmarkers[i][0] + '<br>' + startmarkers[i][5]) .addTo(map); arrayOfMarkers.push([startmarkers[i][1], startmarkers[i][2]]) } console.log(arrayOfMarkers) /* var arrayOfMarkers = [ [48.8581817, 2.3454923], [51.5097076, -0.1327514], [52.3723963, 4.8954506], [50.8455315, 4.3554069], ] */ var bounds = new L.LatLngBounds(arrayOfMarkers); map.fitBounds(bounds);

 <link href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" rel="stylesheet"/> <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script> <div id="map" style="width: 600px; height: 600px"></div>