Where to add idle event in the react #4

MikeChenfu · 2019-12-09T17:22:32Z

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 · 2019-12-09T17:32:37Z

👋 @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 · 2019-12-09T17:45:43Z

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 · 2019-12-09T17:47:39Z

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

MikeChenfu · 2019-12-09T19:17:07Z

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 · 2019-12-09T20:16:01Z

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 · 2019-12-10T01:20:09Z

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

MikeChenfu closed this as completed Dec 10, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Where to add idle event in the react #4

Where to add idle event in the react #4

MikeChenfu commented Dec 9, 2019

tristen commented Dec 9, 2019

MikeChenfu commented Dec 9, 2019

tristen commented Dec 9, 2019

MikeChenfu commented Dec 9, 2019 •

edited

Loading

MikeChenfu commented Dec 9, 2019

MikeChenfu commented Dec 10, 2019

Where to add idle event in the react #4

Where to add idle event in the react #4

Comments

MikeChenfu commented Dec 9, 2019

tristen commented Dec 9, 2019

MikeChenfu commented Dec 9, 2019

tristen commented Dec 9, 2019

MikeChenfu commented Dec 9, 2019 • edited Loading

MikeChenfu commented Dec 9, 2019

MikeChenfu commented Dec 10, 2019

MikeChenfu commented Dec 9, 2019 •

edited

Loading