Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

can not draw when using custom style in MapGL #11

Open
timeroute opened this issue Sep 24, 2019 · 5 comments
Open

can not draw when using custom style in MapGL #11

timeroute opened this issue Sep 24, 2019 · 5 comments
Assignees
Labels
bug Something isn't working

Comments

@timeroute
Copy link

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>
@stepankuzmin stepankuzmin added the bug Something isn't working label Sep 24, 2019
@KaiHuebner
Copy link

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
Copy link
Member

/cc @device25

@timeroute
Copy link
Author

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
Copy link
Member

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

@device25 device25 self-assigned this Nov 27, 2019
@watch2raff
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants