React-mapbox-gl: Support for MapboxGL plugins

Created on 13 Jul 2017 · 10Comments · Source: alex3165/react-mapbox-gl

Can we have a way to install mapboxgl plugins like mapboxgl-compare for example using yarn/npm install && ES6 import?

Source

s-chand

👍2

Most helpful comment

Hey, it is possible to write your own react component that add those features, for example for the mapbox-gl-language plugin, the component would probably look like this:

import { Component } from 'React';
import PropTypes from 'prop-types';

import MapboxLanguage from '@mapbox/mapbox-gl-language';

class MapboxLanguage extends React.Component {
  static contextTypes = {
    map: PropTypes.object
  };

  componentWillMount() {
    const language = new MapboxLanguage();
    this.context.map.addControl(language);
  }

  componentWillUnmount() {
    // Remove control from the map here
  }

  componentWillReceiveProps() {
    // Update control if necessary
  }

  render() {
    return null;
  }
}

Alternatively you could get the instance of the map using onStyleLoad prop and add the control from the component you instantiate the map component.

alex3165 on 19 Jul 2017

👍3

All 10 comments

And mapbox-gl-language

barbagrigia on 17 Jul 2017

Hey, it is possible to write your own react component that add those features, for example for the mapbox-gl-language plugin, the component would probably look like this:

import { Component } from 'React';
import PropTypes from 'prop-types';

import MapboxLanguage from '@mapbox/mapbox-gl-language';

class MapboxLanguage extends React.Component {
  static contextTypes = {
    map: PropTypes.object
  };

  componentWillMount() {
    const language = new MapboxLanguage();
    this.context.map.addControl(language);
  }

  componentWillUnmount() {
    // Remove control from the map here
  }

  componentWillReceiveProps() {
    // Update control if necessary
  }

  render() {
    return null;
  }
}

Alternatively you could get the instance of the map using onStyleLoad prop and add the control from the component you instantiate the map component.

alex3165 on 19 Jul 2017

👍3

Thanks @alex3165 . Lovely example. I tried to follow the example to extend the mapboxgl-compare. Sigh.

s-chand on 21 Jul 2017

Tried to get mapboxgl-compare running this way but failed, too... any hints?

gijs on 26 Jul 2017

@gijs Can you send me a link to a git repository with you implementation? I am happy to help you

alex3165 on 15 Aug 2017

Hi @alex3165 thanks for getting back to me - I solved it by using vanilla mapbox-gl for now. (project went over its deadline)

gijs on 15 Aug 2017

I would suggest to have a look at @amaurymartiny adaptation of mapbox-gl-draw for react-mapbox-gl for inspirations https://github.com/amaurymartiny/react-mapbox-gl-draw

alex3165 on 30 Aug 2017

Is there a way to access this.context.map, without creating a child component?

viktorstrate on 30 Aug 2017

Yes using onStyleLoad prop of the Map component, the first argument passed is the instance of the map.

alex3165 on 30 Aug 2017

👍1

@alex3165 am i missing something or this approach doesnt work?
It seems that addControl only works when called before map is mounted, but triggered this way after mount as well as onStyleLoad is also gets called too late.
I tried without react and it works when addControl is used immediately or like with 100ms timeout, but DOES NOT when it called after 1000ms.

https://github.com/sergei-zelinsky/react-mapbox-gl-language is exactly the same as your example and does not work for me at all as well.