Cluster zoomOnClick BUG

[JLeggatt]

When passing true to the zoomOnClick prop to a cluster, it throws an error

Uncaught TypeError: Cannot read property 'points' of undefined
    at SuperCluster.getChildren (index.js:82)
    at SuperCluster._appendLeaves (index.js:147)
    at SuperCluster.getLeaves (index.js:100)
    at Cluster._this.zoomToClusterBounds (cluster.js:79)
    at HTMLUnknownElement.boundFunc (ReactErrorUtils.js:63)
    at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69)
    at executeDispatch (EventPluginUtils.js:83)
    at Object.executeDispatchesInOrder (EventPluginUtils.js:103)
    at executeDispatchesAndRelease (EventPluginHub.js:41)
    at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:52)

this is due to the clusterZoom property of getChildren method being set to Infinity, therefore it can never access the array.

Using the cluster, almost exactly like the example.

<Cluster
     ClusterMarkerFactory={this.clusterMarker.bind(this)}
     zoomOnClick={true}
>
   {
       geoJson.features.map((venue, index) => {
              return (
                    <Marker
                        key={index}
                        coordinates={venue.geometry.coordinates}
                        anchor="bottom"
                        onClick={this.showPopup.bind(this, venue.properties, venue.geometry.coordinates)}
                     >
                           <img
                              style={{zIndex: 1}}
                              src="//api.tiles.mapbox.com/mapbox.js/v2.3.0/images/marker-icon.png"
                           />
                       </Marker>
              );
         })
    }
</Cluster>

Any thoughts?

[alex3165]

cf @Wykks

[guptaprav]

Did you find any solution?

My code worked ok, however I get same issue when I upgrade to latest version of mapbox-gl, react-mapbox-gl and @mapbox/mapbox-gl-draw

New versions,

"mapbox-gl": "^0.41.0",
"react-mapbox-gl": "3.1.0",
"@mapbox/mapbox-gl-draw": "^1.0.4",
"@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",

Previous version worked OK with following versions

"@mapbox/mapbox-gl-draw": "^0.18.1",
"mapbox-gl": "^0.37.0",
"react-mapbox-gl": "^1.11.0",

Error,

index.js:82 Uncaught TypeError: Cannot read property 'points' of undefined
    at SuperCluster.getChildren (index.js:82)
    at SuperCluster._appendLeaves (index.js:147)
    at SuperCluster.getLeaves (index.js:100)
    at FloorMap.selectCluster (floor-map.js:853)
    at e.<anonymous> (floor-map.js:923)
    at e.s (mapbox-gl.js:456)
    at e.Evented.fire (mapbox-gl.js:482)
    at h (mapbox-gl.js:422)
    at HTMLDivElement.s (mapbox-gl.js:422)

File: webpack:///./node_modules/supercluster/index.js Module:

var kdbush = require('kdbush');
module.exports = supercluster;

[mhamdizo]

i had the same problem (Cannot read property 'points' of undefined) , it was fixed by adding a second argument getChildren(feature.properties.cluster_id,0)

getChildren: function(t, n) { for (var o = this.trees[n + 1].points[t], e = this.options.radius / (this.options.extent * Math.pow(2, n)), i = this.trees[n + 1].within(o.x, o.y, e), r = [], u = 0; u < i.length; u++) { var a = this.trees[n + 1].points[i[u]]; a.parentId === t && r.push(a.numPoints ? s(a) : this.points[a.id]) } return r }

when n is undefined => this.trees[n + 1] = undefined i think the second argument must be the zoom

-- i also got another problem (Cannot read property 'points' of undefined) because i tried to getChilden of a signle marker, so i had to check that i am working with a cluster before using getChildren