urbica / react-map-gl-draw

React Component for Mapbox GL Draw
https://urbica.github.io/react-map-gl-draw
MIT License
50 stars 11 forks source link

can not draw when using custom style in MapGL #11

Open timeroute opened 4 years ago

timeroute commented 4 years ago

When I use custom style in MapGL, I can not draw with react-map-gl-draw, It raised the error as follow:

Uncaught TypeError: Cannot read property 'setDirty' of null

Here is my code:

<MapGL
    style={{ width: "100%", height: "400px" }}
    mapStyle={{
            version: 8,
            name: 'custom',
            glyphs: 'http://.../font/{fontstack}/{range}.pbf',
            sources: {
              ...
            },
            layers: [
              ...
            ]
          }}
    accessToken={MAPBOX_ACCESS_TOKEN}
    latitude={35.78}
    longitude={119.41}
    zoom={8}
  >
    <Draw
        mode={state.mode}
        onDrawModeChange={({ mode }) => setState({ mode })}
    />
  </MapGL>
KaiHuebner commented 4 years ago

I experience a similar issue which is probably related to it.

I just added a dynamic mapStyle change to your Set Initial Features Example:

import React from 'react';
import MapGL from '@urbica/react-map-gl';
import Draw from '@urbica/react-map-gl-draw';
import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';  

initialState = {
  mapStyle: 'mapbox://styles/mapbox/light-v9',
  data: {
    type: "FeatureCollection",
    features: [{
      type: "Feature",
      properties:{},
      geometry: {
        coordinates: [
          -122.41411987304815,
          37.792209769935084
        ],
      type: "Point"
      }
    }]
  }
};

<>
 <button onClick={() => setState({mapStyle: 'mapbox://styles/mapbox/dark-v9'})}>
 Change Style
 </button>
  <MapGL
    style={{ width: "100%", height: "400px" }}
    mapStyle={state.mapStyle}
    accessToken={MAPBOX_ACCESS_TOKEN}
    latitude={37.78}
    longitude={-122.41}
    zoom={11}
  >
    <Draw
      data={state.data}
      onChange={(data) => setState({data})}
    />
  </MapGL> 
  <div>  
    {JSON.stringify(state.data)}
  </div>
</>

After changing the mapStyle and selecting a drawing tool you get the following error:

Uncaught TypeError: Cannot read property 'getAll' of null
    at t.exports.t.getAll (2.5604371f.js:1)

None of the drawing tools are working after the style change.

stepankuzmin commented 4 years ago

/cc @device25

timeroute commented 4 years ago

I had the same problem when I open the draw mode again.

TypeError: Cannot read property 'getAll' of null
t.exports.t.getAll
node_modules/@urbica/react-map-gl-draw/dist/react-map-gl-draw.esm.js:2436
 }, t.getAll = function () {
   return {
     type: u.geojsonTypes.FEATURE_COLLECTION,
    features: e.store.getAll().map(function (e) {
      return e.toGeoJSON();
   })
};
device25 commented 4 years ago

@chinesejar sorry for the long wait, I'll try to fix it this week

watch2raff commented 3 years ago

@device25 How about this problem ? I have last versions package of @urbica/react-map-gl-draw, but i have this problem