krvital / react-leaflet-fullscreen Goto Github PK
View Code? Open in Web Editor NEWFullscreen control for react-leaflet
License: MIT License
Fullscreen control for react-leaflet
License: MIT License
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.
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?
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;
}
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)
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?
in react-leaflet-fullscreen/dist/index.js:33
Only caused by the import of the module in my component
There are two release branches 1.x and 2.x right now. It is not obvious why and what is inside of them.
Is it possible to add a custom class?
And is it possible to add a different class name when in fullscreen mode?
Error: createLeafletElement() must be implemented
<Map
style={{height: "100vh", width: "100vw"}}
zoom={this.state.zoom}
center={position}
>
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
When I add this package to my project I get the error "Can't find package:screenfull".
This issue is solved in leaflet.fullscreen@v3
, so perhaps it would be a good idea to update leaflet.fullscreen from '[email protected]' to the latest version here.
And don't be worried about the new major version number: in leaflet.fullscreen@v3 they dropped the dependency on the 'screenfull' package altogether ๐ .
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.