`fullscreenControl: true` + `zoomControl: false` throws Uncaught TypeError: this._map is null

[cw-code-1]

Hi, I am getting into using your leaflet plugins (which are excellent!) and I stumbled across an issue with leaflet-ui. If I set zoomControl :false and fullscreenControl: true then the exit fullscreen button does not appear.

For example in the demo on the leaflet-ui page, the following produce the error for me:

var map = L.map('map', {
  center: [41.4583, 12.7059],
  zoom: 5,
  // Optional customizations
  mapTypeId: 'topo',
  // mapTypeIds: ['streets', 'terrain', 'satellite', 'topo'],
  // gestureHandling: true,
  // visualClick: true,
  zoomControl: false,
  // pegmanControl: true,
  // locateControl: true,
  fullscreenControl: true,
  // layersControl: true,
  // minimapControl: true,
  // editInOSMControl: true,
  // loadingControl: true,
  // searchControl: true,
  // disableDefaultUI: false,

  // Experimental feature
  rotate: true,
});

I have tried it on Chrome, Firefox and Edge and the issue is on all of them.

I came across this because I would like to implement zoomHome with leaflet-elevation. hupe13 has implemented this with leaflet-elevation in his leaflet-extensions for wordpress, but I don't think he included leaflet-ui.

I am a beginner with javascript so hopefully I haven't overlooked something simple.

[Raruto]

Hi @cw-code-1,

this should be a problem with an external plugin, here it is the same example but loading the full screen control it manually:

<!-- leaflet-ui -->
<script src="https://unpkg.com/[email protected]/dist/leaflet-ui.js"></script>

<!-- leaflet.fullscreen -->
<link rel="stylesheet" href="https://unpkg.com/browse/[email protected]/Control.FullScreen.css">
<script src="https://unpkg.com/[email protected]/Control.FullScreen.js"></script>

<script>
  var map = L.map('map', {
    center: [41.4583, 12.7059],
    zoom: 5,
    zoomControl: false,
    fullscreenControl: false,
  });

// Manually init Fullscreen control (ref: https://github.com/Raruto/leaflet-ui/blob/31b300a69f0ae70b1d0c767686ca1c25c541f03a/src/leaflet-ui.js#L164-L169)
L.control.fullscreen({
  position: 'topright',
  title: 'Enter Fullscreen',
  titleCancel: 'Exit Fullscreen',
  forceSeparateButton: true,
}).addTo(map);

</script>

To solve you must try to reach brunob/leaflet.fullscreen repository and work with him to see how it might be fixed.

After that, once patched, in here it will be enough to update the version related to that dependency:

https://github.com/Raruto/leaflet-ui/blob/31b300a69f0ae70b1d0c767686ca1c25c541f03a/package.json#L58

👋 Raruto