rezoom on fullscreen

[stefan11]

Hi, There may be a bug with zooming. It is described here: https://stackoverflow.com/questions/50158658/zooming-into-leaflet-map-on-entering-fullscreen-mode

By using a display of the zoom scale I found out that the zoom factor is set correctly on entering full screen mode but the map does not zoom. When switching back to normal noon-fullscreen mode one can see the new zoom factor.

    var map = L.map( 'map', {
        center: [20.0, 5.0],
        //minZoom: 1,
        //zoom: 4,
        zoomDelta: 0.2,
        zoomSnap: 0,    // lower numbers = finer zoom levels, zero = no restrictions
        fullscreenControl: true,
        fullscreenControlOptions: {
            position: 'topleft'
            }
    })

    L.tileLayer( 'https://{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, {padding: L.point(25, 25)});

var ZoomViewer = L.Control.extend({
        onAdd: function(){

            var container= L.DomUtil.create('div');
            var gauge = L.DomUtil.create('div');
            container.style.width = '200px';
            container.style.background = 'rgba(255,255,255,0.5)';
            container.style.textAlign = 'left';
            map.on('zoomstart zoom zoomend', function(ev){
                gauge.innerHTML = 'Zoom level: ' + map.getZoom();
            })
            container.appendChild(gauge);

            return container;
        }
    });

(new ZoomViewer).addTo(map);

    // Create a fullscreen button and add it to the map
    // L.control.fullscreen({
    //   position: 'topleft', // change the position of the button can be topleft, topright, bottomright or bottomleft, defaut topleft
    //   title: 'Show me the fullscreen !', // change the title of the button, default Full Screen
    //   titleCancel: 'Exit fullscreen mode', // change the title of the button when fullscreen is on, default Exit Full Screen
    //   content: null, // change the content of the button, can be HTML, default null
    //   forceSeparateButton: true, // force seperate button to detach from zoom buttons, default false
    //   forcePseudoFullscreen: true, // force use of pseudo full screen even if full screen API is available, default false
    //   fullscreenElement: false // Dom element to render in full screen, false by default, fallback to map._container
    // }).addTo(map);

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

    map.on('exitFullscreen', function(){
      console.log('exited fullscreen');
      bounds = L.latLngBounds(markers);
      map.fitBounds(bounds, {padding: L.point(25, 25)});
    });