peterqliu / threebox

A three.js plugin for Mapbox GL JS, with support for basic animation and advanced 3D rendering.
MIT License
528 stars 320 forks source link

Uncaught ReferenceError: map is not defined with mapbox v0.54 and React #71

Open shaunlandy opened 5 years ago

shaunlandy commented 5 years ago

I've actually came up with a resolution to this myself but it took quite some time to work out the error. I have recently updated my threebox version from a much older version and found I got this error.

Uncaught ReferenceError: map is not defined
    at va.obj._setObject 
    at va.obj.set 
    at va.obj.setCoords

The source of the error can be tracked to AnimationManager as it takes a map parameter but it actually doesn't appear to ever get fed in a value or used. The actual value used is a more global map value. I found two easy methods that resolved the issue. By adding a global map reference once the map has been provided through onAdd.

onAdd(map, mbxContext) {
    window.map = map;
    //...other onAdd stuff
}

Or to ensure that the map container object has an id set to 'map'

<div id={'map'} className={classes.container}>
    <Map
        //...other map stuff
    >
    </Map>
</div>

Comes across as misleading as you'd expect the map object to be passed through to everything rather than using a global or an explicitly named id as well. Animation manager could probably just get access to the map within init at the same time as CameraSync or at least have a mention in the documentation about having to explicitly use an id of 'map'.