React-mapbox-gl: Refresh on props changes

[13milliseconds]

Every time the props change (I'm using Flux.js), the map does a full refresh. It makes sense because in my map component, I wait for the component to be mounted and then require react-mapbox-gl

Here is how I do it:

componentDidMount() {
        ReactMapboxGl = require("react-mapbox-gl");
        Marker = ReactMapboxGl.Marker;
        this.forceUpdate();
 }

When the user hovers an element, a marker on the map is highlighted, but after a full refresh. How can I change the markers and zoom level on the map using props, without refreshing the map every time?

I tried requiring react-mapbox-gl from the beginning but I'm using Webpack and am hit with the ReferenceError: self is not defined error.

Thanks for your help. I'm relatively new to React and expecting my problem to be my fault, but haven't been able to find a solution online.

[alex3165]

Have a look at the examples and make sure you don't call the map factory in the render function of your component.

Cf: https://github.com/alex3165/react-mapbox-gl/blob/master/example/src/demos/londonCycle.tsx#L11

Also if you want more help I think it is best if you ask your question on stackoverflow 👍

[13milliseconds]

Thanks for replying, I was indeed wondering if it was the right place. I'll take that to StackOverflow.

[omarkhatibco]

@alex3165
I have the same problem here.

you said : make sure you don't call the map factory in the render function of your component.

what is the alternative when you have more than one Layer ?

[LudovicRiiotLabs]

Hi @omarkhatibco
I'm not sure i understand what's your problem but you can import a child component including all layers in your Map component:

import YourLayers  from '/your/path'

<ReactMapBox
      style={"mapbox://styles/mapbox/basic-v9"}
      center={[0, 0]}
      zoom={[1]}
>
    <YourLayers />}
</ReactMapBox>

In this way, you can use setState locally without influencing the ReactMapBox render (for example: to manage a popup event on a specific Layer).

I hope that help you.