map is undefined when implementing the example

weisssean commented 5 years ago

I implemented the example and am getting: Uncaught TypeError: Cannot read property 'addControl' of undefined.

Here is my map component:

`import React, {Component} from 'react'; import ReactMapboxGl from "react-mapbox-gl"; import DrawControl from "react-mapbox-gl-draw"; import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";

const Map = ReactMapboxGl({ accessToken: '' });

class MapboxMap extends Component { onDrawCreate = ({ features }) => { console.log(features); };

onDrawUpdate = ({ features }) => { console.log({ features }); };

render(){ return <div style={{ height: '100%', width: '100%' }}> <Map style="mapbox://styles/mapbox/streets-v9" containerStyle={{ height: '100%', width: '100%' }}> <DrawControl position="top-left" onDrawCreate={this.onDrawCreate} onDrawUpdate={this.onDrawUpdate}/>

; } } export default MapboxMap;`

Here's my package.json

{ "name": "my_app", "version": "0.1.0", "private": true, "dependencies": { "@mapbox/mapbox-gl-draw": "^1.1.1", "@material-ui/core": "^3.9.2", "@material-ui/icons": "^3.0.2", "mapbox-gl": "^0.53.0", "material-ui-icons": "^1.0.0-beta.36", "prop-types": "^15.7.2", "react": "^16.8.2", "react-dom": "^16.8.2", "react-leaflet": "^2.2.0", "react-leaflet-draw": "^0.19.0", "react-mapbox-gl": "^4.2.0", "react-mapbox-gl-draw": "^1.0.5", "react-scripts": "2.1.5", "recharts": "^1.5.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] }

RobinDvorak commented 5 years ago

You need to install "react-mapbox-gl": "3.9.1". V 4 is not supported.

amaury1093 commented 5 years ago

Closing in favor of #18

amaury1093 / react-mapbox-gl-draw

map is undefined when implementing the example #21