nebula.gl
nebula.gl copied to clipboard
TypeError: this._renderToolbar is not a function
Code
import React, { Component } from "react";
import MapGL from "react-map-gl";
import { Editor, DrawPolygonMode } from "react-map-gl-draw";
const DEFAULT_VIEWPORT = {
width: 800,
height: 600,
longitude: -122.45,
latitude: 37.78,
zoom: 14,
};
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
viewport: DEFAULT_VIEWPORT,
modeHandler: null,
};
}
_updateViewport = (viewport) => {
this.setState({ viewport });
};
render() {
const { viewport } = this.state;
const mode = new DrawPolygonMode();
return (
<MapGL
{...viewport}
width="100%"
height="100%"
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
onViewportChange={this._updateViewport}
>
<Editor
// to make the lines/vertices easier to interact with
clickRadius={12}
mode={mode}
/>
{this._renderToolbar()}
</MapGL>
);
}
}
Error
TypeError: this._renderToolbar is not a function
App.render
src/MapGlDraw.jsx:37
34 | mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
35 | onViewportChange={this._updateViewport}
36 | >
> 37 | <Editor
| ^ 38 | // to make the lines/vertices easier to interact with
39 | clickRadius={12}
40 | mode={mode}
View compiled