0

I have a map with markers and clusters. I used the solution from https://stackoverflow.com/a/16845714/2660362 to adapt the size of the map to the markers/clusters shown. I then combined the tutorial example with the fullscreen functionality. Now it would be very good if the map could be zoomed in when I go fullscreen. There is a function that is called but it does not rezoom the map. Is this possible?

var map = L.map( 'map', {
    center: [20.0, 5.0],
    //minZoom: 1,
    //zoom: 1,
    fullscreenControl: true,
    fullscreenControlOptions: {
        position: 'topleft'
        }
})

L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  subdomains: ['a', 'b', 'c']
}).addTo( map )

var myURL = jQuery( 'script[src$="talks.js"]' ).attr( 'src' ).replace( 'talks.js', '' )

var myIcon = L.icon({
  iconUrl: myURL + 'images/pin24.png',
  iconRetinaUrl: myURL + 'images/pin48.png',
  iconSize: [29, 24],
  iconAnchor: [9, 21],
  popupAnchor: [0, -14]
})

var markerClusters = L.markerClusterGroup({maxClusterRadius:30});


for ( var i=0; i < markers.length; ++i )
{
 var m = L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon} )
                 .bindPopup( markers[i].name  );

  markerClusters.addLayer( m );
}

map.addLayer( markerClusters );

//map.fitBounds(markers.getBounds());

var bounds = L.latLngBounds(markers);
map.fitBounds(bounds);




// events are fired when entering or exiting fullscreen.
map.on('enterFullscreen', function(){
  console.log('entered fullscreen');
  bounds = L.latLngBounds(markers);
  map.fitBounds(bounds);
});

map.on('exitFullscreen', function(){
  console.log('exited fullscreen');
});
Stefan Müller
  • 274
  • 2
  • 13
  • If you have changed the map center or zoom level and then enter fullscreen, your map will be automatically adapted to fit the bounds. But if you just click the fullscreen control after the page loaded, nothing will change since neither the map center nor zoom level has been changed. – Anatolii Suhanov May 04 '18 at 07:26
  • This is the page: https://hpsg.hu-berlin.de/~stefan/Vortraege/ When I go fullscreen the map is not zoomed in. I added an explicit zoom command infront of the `map.fitbounds(bounds)`. This works in isolation but with the `map.fitbounds` nothing changes. Maybe JS does not know about the changed canvas size. – Stefan Müller May 04 '18 at 08:55
  • The same issue here https://jsfiddle.net/anatolysukhanov/opnnzqgk/ Thought it's working as it should when I run it locally – Anatolii Suhanov May 04 '18 at 11:32

1 Answers1

0

EDIT: the markers variable in your code is an array and not a a leaflet layergroup, so leaflet can't return bounds.

I've changed the code to follow the cluster bounds and it worked :

map.on('enterFullscreen', function(){
     console.log('entered fullscreen');
     bounds = markerClusters.getBounds();
     map.fitBounds(bounds);
});
NettaB
  • 166
  • 3
  • 9