Fullscreen from external button only (do not add control on map)

[DrPDash]

Is it possible to 'not add' the full-screen control on the map and just use it from an external click event using the map.toggleFullscreen() option?

ctlFullScreenMain = L.control.fullscreen({
	position: 'topright',
	title: 'Distraction free',
	titleCancel: 'Exit fullscreen mode',
	content: null,
	forceSeparateButton: true,
	//forcePseudoFullscreen: true,
	fullscreenElement: false
}).addTo(map);

Then I would like to hide the button using something like:
$(ctlFullScreenMain).addClass('visuallyhidden');

Then using an external button with id ctlFullScreen:

$("#ctlFullScreen").click(function () {
	map.toggleFullscreen();
});

The issue is it needs to be added to map in order to make it accessible, but then I can't make it invisible. An option, such as 'hidden:true' would be useful.

[brunob]

I don't think you can do that... see #72

[danmana]

Maybe your visuallyhidden css is not strong enough, I was able to do this by adding

.leaflet-control-zoom-fullscreen {
  display: none !important;
}

Or using jQuery $('.leaflet-control-zoom-fullscreen').hide()

As long as you are triggering fullscreen as a response to a click event it should work.
Fullscreen without user interaction is not possible, as @brunob said in issue #72

[prasanjitdash]

thanks @danmana @brunob for your time.

@danmana : you are right, my selector was not able to capture the element and using '.leaflet-control-zoom-fullscreen' does the trick. I was hesitating to use native selectors and use only externally defined ones, but sometimes we need to bend the coding style and that's fine.

The only seeming side effect: it leaves a bit of white space using either CSS or JQuery approach; I got to check where it is originating from. Otherwise, it works and can be used as a trick for most plugin buttons that we would like to control externally.

	// Full screen
	ctlFullScreenMain = L.control.fullscreen({
		position: 'topright',
		hidden: true,
		title: 'Distraction free',
		titleCancel: 'Exit fullscreen mode',
		content: null,
		forceSeparateButton: true,
		//forcePseudoFullscreen: true,
		fullscreenElement: false
	}).addTo(map);
	//$("#ctlFullScreenMain").css("display", "none");
	$('.leaflet-control-zoom-fullscreen').hide()
	$("#ctlFullScreen").click(function () {
		map.toggleFullscreen();
	});

[prasanjitdash]

Hi @danmana , Just making another point. It seems like another alternative to CSS manipulation is to just remove the container. e.g.,

Instead of:
$('.leaflet-control-zoom-fullscreen').hide()
One may try:
ctlFullScreenMain._container.remove();

In this way, we don't have to modify native/private selectors.

Thanks