2

I need to use a fullscreen plugin(Leaflet.fullscreen) but it does not work as I would like.

The image is displayed in full screen but with gray edges. Like this : enter image description here

Code :

//Creation de la map
var map = L.map('mapid',{
              zoomSnap: 0,
              fullscreenControl: true});
//On bloque le zoom et le dragging
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
map.zoomControl.remove();
map.dragging.disable();

//Création de la taille de la carte avec les coordonnées polaires
var coinGauche = new L.LatLng(43.6421,3.9626);
var coinDroit = new L.LatLng(43.6571,3.9909);
var bounds = new L.LatLngBounds(coinGauche,coinDroit);
map.fitBounds(bounds);

// Initialise le FeatureGroup pour sauver les items
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// Initialise draw control et passe le FeatureGroup pour sauver les items
var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems //OBLIGATOIRE
    }
});
map.addControl(drawControl);


//Image a mettre dans la carte
var imageUrl = 'file:///C:/Users/XXX/Desktop/geofencing/map.svg'

//Creation de l'overlay avec la carte
var overlay = L.imageOverlay(imageUrl, bounds);
map.addLayer(overlay);

But,I would like the image to really take the whole screen. Any formats (16/9 4/3 or 16/10) display with gray edges...

  • 1
    Please specify what plugin you use. It also is always very helpful if you can set up a jsfiddle and replicate the issue there. – Senshi Apr 14 '17 at 16:09
  • it's Leaflet.fullscreen -> github.com/Leaflet/Leaflet.fullscreen – Toon Apr 18 '17 at 6:23
2

OK so I found the solution.

It is necessary to intercept the passage in full screen and to force fitBounds

that.map.on('fullscreenchange', function () {
    if (that.map.isFullscreen()) 
         console.log('entered fullscreen');
    else 
         console.log('exited fullscreen');
    that.map.fitBounds(that.bounds);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.