Comments (6)
@tristen I have solved this problem. I updated the package file but does not install it. New package works well. Thanks for your kind help.
from mapbox-react-examples.
👋 @MikeChenfu can you share a code example and what example you tried this from? My guess is that your version of mapbox-gl
is out of date. The idle
event was introduced in v0.52.0.
from mapbox-react-examples.
Thanks @tristen for the quick reply. I have done a demo without react. Currently, I am moving my mapbox+js into the react framework. Here is my code.
Html:
<!DOCTYPE html>
<html lang='en'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href='https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.min.css' rel='stylesheet'>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='app'></div>
<script src='https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.js'></script>
</body>
</html>
Js
class Application extends React.Component {
map;
constructor(props: Props) {
super(props);
}
componentDidUpdate() {
this.getFeatures();
}
componentDidMount() {
this.map = new mapboxgl.Map({
container: this.mapContainer,
style: 'mapbox://styles/mapbox/dark-v9',
center: [5, 34],
zoom: 1.5
});
this.map.on('load', () => {
this.map.addSource("state-population", {
'type': 'vector',
'url': sourceMatch["state-population"]
});
this.map.addLayer({
'id': "state-2d",
'source': "state-population",
'source-layer': 'states',
'type': 'fill',
'layout': {
'visibility': 'visible'
},
'paint': {"fill-opacity":0.8}
}, 'waterway-label');
});
this.getFeatures();
}
getFeatures = () => {
console.log('addColor');
this.map.on("idle",() => {
let featuresAll = this.map.queryRenderedFeatures({layers: ['state-2d']});
console.log(featuresAll)
console.log(this.map.isSourceLoaded('state-population'));
});
}
When I run this demo, there is no any output about featuresAll
. I doubt the idle event is not running.
from mapbox-react-examples.
My guess is that your version of mapbox-gl
is out of date. The idle
event was introduced in v0.52.0.
from mapbox-react-examples.
Thanks @tristen. I have updated it to the latest version. However, it still has the same problem. In the getFeature
function, 'addColor' can be printed in the console, but console.log(featuresAll)
does not have any output.
package.json
{
"name": "basic",
"version": "0.0.0",
"scripts": {
"start": "react-scripts start"
},
"devDependencies": {
"react-scripts": "^1.0.17"
},
"dependencies": {
"mapbox-gl": "^1.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
Html
<!DOCTYPE html>
<html lang='en'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href='https://api.mapbox.com/mapbox-assembly/v0.24.0/assembly.min.css' rel='stylesheet'>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='app'></div>
<script src='https://api.mapbox.com/mapbox-assembly/v0.24.0/assembly.js'></script>
</body>
</html>
from mapbox-react-examples.
I try the moveend
event and it works. Is there any limitation on the idle
event? Thanks.
getFeatures = () => {
this.map.on("moveend",() => {
let featuresAll = this.map.queryRenderedFeatures({layers: ['state-2d']});
console.log(featuresAll)
console.log(this.map.isSourceLoaded('state-population'));
});
}
from mapbox-react-examples.
Related Issues (14)
- advantage of using react wrappers with mapbox gl? HOT 1
- The images in the blog are broken HOT 2
- mapbox-gl-js 2.0 doesn't work with react HOT 1
- Adding Marker Example To The Repo HOT 3
- Unable to use mapbox-gl with webpack. HOT 1
- examples do not run under WSL2 linux with NodeJS 16
- In the markers custom example my markers are not accurate and move all over the screen HOT 1
- use React to unmount tooltip, not innerHTML
- Update examples with `ReactDOM.render()` for React 18 HOT 3
- modernize: createRef API, functional components with hooks HOT 5
- paint.fill-color: color expected, array found in the react HOT 1
- css reference not found HOT 2
- TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createRef is not a function 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 mapbox-react-examples.