CODEWITHSUNDEEP
javascriptleaflet
Tom
Tom

Reputation: 23

Leaflet: set initial center and zoom

I'm using Leaflet and trying to work out how set the initial image center and zoom but can't seem to get this to work. I found these notes in the documentation: https://docs.eegeo.com/eegeo.js/v0.1.728/docs/leaflet/L.Map/ 

map = L.map('map', {
  center: [-203.8, 123.2],
  zoom: 10,
  crs: L.CRS.Simple
});

I'd like the initial zoom and center to be the lowest point marked on this image: https://jsfiddle.net/brutaldigital/yx3ofrL4/2/

Thanks in advance for any suggestions, and apologies for the basic question (#newbie)

Upvotes: 2

Views: 2278

Answers (1)

Felipe Zavan
Felipe Zavan

Reputation: 1793

Store your markers in an array:

var markers = [];

markers.push(
  L.marker([-164, 121])
    .bindLabel('Monro's studio, 1 Henrietta Street, Covent Garden', { noHide: true })
    .addTo(map)
);

markers.push(
  L.marker([-160, 178])
    .bindLabel('The Royal Academy', { noHide: true })
    .addTo(map)
);

markers.push(
  L.marker([-200, 66])
    .bindLabel('St Martin's Workhouse', { noHide: true })
    .addTo(map)
);

Find the lowest marker:

var lowestMarker = null;

markers.forEach(function(marker) {
  if (!lowestMarker) {
    lowestMarker = marker;
  } else if (marker.getLatLng().lat < lowestMarker.getLatLng().lat) {
    lowestMarker = marker;
  }
});

Pan the map to the lowest marker coordinates:

map.panTo(lowestMarker.getLatLng());

Upvotes: 0

Related Questions