mapbox/mapbox-react-examples

Where to add idle event in the react

MikeChenfu opened this issue · 6 comments

MikeChenfu commented

Hello, I try adding idle event into the react componentDidMount() or componentDidUpdate(). However, it seems to not work. I appreciate if anyone can help me.

tristen commented

👋 @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.

MikeChenfu commented

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.

tristen commented

My guess is that your version of mapbox-gl is out of date. The idle event was introduced in v0.52.0.

MikeChenfu commented

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>
MikeChenfu commented

I try the moveendevent 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'));
    });
  }
MikeChenfu commented

@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.

  • 🎉1