krvital/react-leaflet-fullscreen

Fullscreen control for react-leaflet

react-leaflet-fullscreen's Issues

Error L.control.fullscreen is not a function

First time using this and I got the following error:

index.js:92 Uncaught TypeError: L.control.fullscreen is not a function

It's maybe related to my current used leaflet dependencies :

    "leaflet": "^1.6.0"
    "react-leaflet": "^2.6.3"
    "react-leaflet-fullscreen": "^1.0.1",

anybody had a similar issue?

thanks

Add TypeScript support

title / titleCancel not updated when props change

I am trying to use the title & titleCancel props of FullscreenControl to provide translated strings depending on my selected language -- I'm using redux-polyglot and plugging into FullscreenControl like this:

          <FullscreenControl
            title={this.props.p.t('FullScreen')}
            titleCancel={this.props.p.t('ExitFullScreen')}
            position='topright'
            content={fullscreenIcon} />

The issue is, when the Map is mounted, polyglot will not have finished loading the translation strings yet... eventually, this.props.p will be updated when the strings have been loaded. But, when this.props.p gets updated, FullscreenControl never updates to pass the new values to the underlying Leaflet code.

I see in the FullscreenControl source that props are only utilized in componentWillMount, could you add a hook so that when props change, the leaflet.fullscreen plugin gets updated as well?

TypeError: Super expression must either be null or a function

in react-leaflet-fullscreen/dist/index.js:33

Only caused by the import of the module in my component

Not compatible with react-leaflet 4.0.0?

Got this error as soon as i add fullscreencontrols of react-leaflet-fullscreen 2.0.2 - anyone can confirm?

Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of
at useLeafletContext (context.js:9:1)
at useLeafletControl (control.js:5:1)
at LeafComponent (component.js:39:1)
at renderWithHooks (react-dom.development.js:16175:1)
at updateForwardRef (react-dom.development.js:20023:1)
at beginWork (react-dom.development.js:22465:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
at invokeGuardedCallback (react-dom.development.js:4274:1)
at beginWork$1 (react-dom.development.js:27405:1)

Why not just make it fullscreen in the styles?

    <Map 
      style={{height: "100vh", width: "100vw"}}
      zoom={this.state.zoom}
      center={position}
    >

show other div/container in full screen mode.

Is there any way, when going to the full screen mode the other divs can be shown on the bottom left or top left of the full screen map?

custom classname

Is it possible to add a custom class?
And is it possible to add a different class name when in fullscreen mode?

Add changelog

There are two release branches 1.x and 2.x right now. It is not obvious why and what is inside of them.

TypeError: Cannot read property 'invalidateSize' of null

I'm using react-leaflet with leaflet-minimap, my app seems to work just fine but sometimes when I toggle fullscreen and toggle back to normal screen the app crashed with error "TypeError: Cannot read property 'invalidateSize' of null

Not work in react-leaflet v2

Error: createLeafletElement() must be implemented

TypeError: Cannot read property 'invalidateSize' of null

When clicking the control to go into or out of fullscreen, the error fires 3 or 4 times. map is null.

Unlike #6, this does occur in production, though it's not causing any user-facing problems beyond filling up the console with error messages.

Earlier today, it was happening every time I clicked the fullscreen control. Now it's not happening at all. I'm not sure what causes it to happen or not.

react-leaflet-fullscreen version 1.0.1
leafelt.fullscreen version 1.4.5

// node_modules/leaflet.fullscreen/Control.FullScreen.js line 89
_handleFullscreenChange: function () {
	var map = this._map;
	map.invalidateSize();
	if (!fullScreenApi.isFullScreen() && !map._exitFired) {
		map.fire('exitFullscreen');
		map._exitFired = true;
		map._isFullscreen = false;
	}

"Invalid prop type" warning in a browser console for fullscreenElement property

A type of the property can be either a node, or boolean false.
When I specify a container element there, React puts the warning into a browser console.