CODEWITHSUNDEEP
javascripthtmlleaflet
tarvr0
tarvr0

Reputation: 3

Center leaflet map based on markers

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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map" style="width: 1024px; height: 600px"></div>

Upvotes: 0

Views: 4781

Answers (1)

kboul
kboul

Reputation: 14570

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/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map" style="width: 600px; height: 600px"></div>

Upvotes: 2

Related Questions