nebula.gl icon indicating copy to clipboard operation
nebula.gl copied to clipboard

TypeError: this._renderToolbar is not a function

Open ats1999 opened this issue 4 years ago • 0 comments

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

ats1999 avatar Oct 20 '21 03:10 ats1999