React-mapbox-gl: mapbox-gl-draw compatibility

[z0d14c]

Hi again, sorry for all of the issues lately but I like the project and want to get it to be compatible with more of mapbox-gl-js' features. I understand all our needs are different so it will be some effort to keep everything nice and modular.

drawing is a required feature in our app; when we used leaflet, leaflet-draw was the answer. for mapbox-gl-js, it appears that https://github.com/mapbox/mapbox-gl-draw is the appropriate library to integrate drawing into the app.

does anyone have experience with or ideas on how to integrate mapbox-gl-draw into react-mapbox-gl? I'll update the thread too if I come up with some possible directions.

[alex3165]

Hey, I have a bit of experience with leaflet-draw, I am also maintaining react-leaflet-draw but I never tried mapbox-gl-draw. In case you want to do something with this, I encourage you to separate it to a different repository to keep it consistent with how Mapbox split the two functionality as well. I am happy to help you on this one once you create the repository and I will add a link in the readme of react-mapbox-gl

[alex3165]

I guess you can create a DrawControl component, something like this maybe:

import MapboxDraw from '@mapbox/mapbox-gl-draw';
import React from 'react';

export default class DrawControl extends React.Component {
  static contextTypes = {
    map: PropTypes.object,
  };

  componentWillMount() {
    const { map } = this.context;
    const Draw = new MapboxDraw();
    map.addControl(Draw);
  }

  render() {
    return null;
  }
}

[z0d14c]

hmm. ok, i'll be experimenting around with this and i'll post a repo if i come up with one. anyone, feel free to give input.

[z0d14c]

We have a solution currently implemented in our app but it would take a bit of work to genericize it and separate it into its own repo. I would very much like to do that but there's some hoops to jump through and so I will be closing this issue for now and re-opening when I find the time to do that, but I can't 100% guarantee that I will find the time to do so.

[medv]

@z0d14c could you comment on any big gotchas / rough direction you took for making this work? Thank you

[sohibul]

@alex3165 do you plan to implement this?

[alex3165]

Nope I haven't worked on it, if I find some times at some point I might work on it but if someone want to go ahead please do, I can give a hand.

[amaurym]

Hi all! I needed draw controls for my own project, so went ahead and created a repo based on @alex3165's code: https://github.com/amaurymartiny/react-mapbox-gl-draw.

Any comments are welcome.

[alex3165]

@amaurymartiny That's really good stuff! Some things you could add:

• Remove control on component unmount removeControl
• Update your readme in the example folder

I would be happy to add an example for react-mapbox-gl-draw on the website http://alex3165.github.io/react-mapbox-gl/ if you agreed. I will also add a link in the readme of react-mapbox-gl

[amaurym]

Hi @alex3165, I added the removeControl on unmount: https://github.com/amaurymartiny/react-mapbox-gl-draw/blob/master/src/index.js.

However I get an error on unmount. If I put a console.log(this.context.map); before line 12 in the above file, I see that the style field is null, and that's what's causing the error. However, it's not null in the other phases of the react component lifecycle.

I think the error is related to react-mapbox-gl, where this.context.map.state gets nullified before it should, but I didn't look too deeply into your code to know why it happens.

You can use this gist to replace examples/src/App.js to have a repro of the problem. If it's not easily solvable I'll create a separate issue.

Edit: No problem for adding an example on your website :)