Comments (6)
Yes I know it is an array on purpose, it was a Float before but in order to check for a reference equality on the map component it is required to pass it through an array :
const didZoomUpdate = (
this.props.zoom !== nextProps.zoom &&
nextProps.zoom !== map.getZoom()
);
In this case if this.props.zoom
is [4]
and nextProps.zoom
is a new array with a Float 4 inside it will break the equality because it does a reference check but it won't in case it is an Float.
If you have a good idea of how to solve it nicely I am happy to discuss of it.
from react-mapbox-gl.
Maybe I'm not really understand what you're trying to say but as far as I know, if you're just want to comparing it, just use !=
(i.e. don't use strict equality !==
)
const isUpdate = next.zoom != map.getZoom()
from react-mapbox-gl.
Even with a !=
it doesn't break the reference equality as if I pass an array because Int, String and Float are primitive types in Javascript
from react-mapbox-gl.
@Altiano We chose to change this back in version 0.8. It was a quick and easy fix to make sure that the zoom style was updated reliably, every time it's actually changed. Otherwise when the zoom level stays constant the styles are not updated.
The point is, we can't tell whether the zoom has changed, when the number itself has the same value. We can work around this in an easy way like this, by wrapping the number in an array, which is allocated anew each time when you create one (note: [] !== []
). This is not exactly fixing the problem, but we didn't see a reason to fix it properly and waste time on it.
To elaborate on equality in JS, ===
& !==
stand for reference equality. It is technically not a strict equality, but to simplify it, it checks whether the values that are being pointed to are the same instance, so technically "in the same point in memory" (not being highly precise, since this doesn't always hold up).
I'm getting a bit off track here, but to further continue ==
& !=
are type inferring before checking value equality. Details here: https://dorey.github.io/JavaScript-Equality-Table/
How to disable zoom method? I don't want to use any moving method.
If you want to disable interaction, just pass interaction={false}
cc @alex3165
from react-mapbox-gl.
This is pulling up some history I appreciate, but I can't follow the reasoning here since you've essentially made a constant expression by strictly comparing an array this will always be true that they do not match, regardless of the values within them.
Is there an original context for this change?
from react-mapbox-gl.
Everything is explained in the comment above by kitten; and still makes sense.
from react-mapbox-gl.
Related Issues (20)
- Invalid LngLat object error when zooming on markers
- Example needed: OpenStreetmap Example without Mapbox accessToken
- DrawControl in React v18 and above
- ultra-weird bug : some images don't show up on mobile devices (works fine on desktop computer) HOT 2
- React v18: Map container is being appended to DOM twice
- Renders black screen after multiple renders. HOT 1
- Popup missing `closeOnClick` prop
- Control Feature fade in animation
- Markers wiggle on React 18 HOT 6
- Cluster Marker disappearing when zoom screen with 70%, 80%
- Cannot assign to import "accessToken" error on Remix HOT 5
- [HELP] MapboxMap - how to use onLoad to switch displayed language of map?
- Layers do not renderer HOT 2
- ReactMapGL not showing after deploying, buit during development it is working perfectly HOT 1
- Is GL JS v3 supported ? HOT 1
- add open-ended option overrides in constructor
- Features not showing
- WebpackError: TypeError: _layer_events_hoc__WEBPACK_IMPORTED_MODULE_1___defaul t(...) is not a function HOT 1
- Feature coordinates not adjusting to new variables. HOT 1
- Peer dependencies HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-mapbox-gl.