Support default mapbox-gl layer / source (addLayer, addSource) about react-map-gl

[alex3165]

The idea would be this : https://github.com/piemapping/react-map-gl/pull/1/files

[vicapow]

Hey @alex3165, Thanks for this PR. I like the idea of a React friendly API for describing the map styles. However, if I'm understanding the PR correctly, this would cause the API to no longer be stateless, which is one of the goals for the project. see: http://uber.github.io/react-map-gl/#/stateless If others felt strongly that this no longer desired, we can revise that goal, but it's a goal I still think is desirable. Specifically, if we exposed the underlying map object via the context, overlays could change the state of the map in unexpected ways.

For now, the use cases you're describing, adding geoJSON route and markers, can be achieved with the mapStyle prop of the MapGL object. It might also be worth iterating over the pain points in creating mapStyles and the ways to make it easier.

[alex3165]

Hey @vicapow the problem in my use case is that designers are designing the map on Mapbox studio so to use their design i need to use the link to Mapbox style as a mapStyle props so i cannot pass an object. At least passing the map through context to all childrens would give more flexibility to developers that use the library.

Another point is that i need to update the position of the marker, it's something that i do with :

    this.state.source.setData({
      type: "Point",
      coordinates: coordinates.toJS()
    });

The link you gave about stateless chapter on your documentation is not working, i am agree that having the map in state is not ideal but i need this to pass it through context.

[vicapow]

Hey @vicapow the problem in my use case is that designers are designing the map on Mapbox studio so to use their design i need to use the link to Mapbox style as a mapStyle props so i cannot pass an object. At least passing the map through context to all childrens would give more flexibility to developers that use the library.

For now, you can request the style yourself, then pass the style to the MapGL object after it's loaded.

Another point is that i need to update the position of the marker, it's something that i do with :

this.state.source.setData({
  type: "Point",
  coordinates: coordinates.toJS()
});

You could update the style with the new coordinates. react-map-gl should efficiently update the map style for you, without causing the entire style to reload.

The link you gave about stateless chapter on your documentation is not working, i am agree that having the map in state is not ideal but i need this to pass it through context.

whoops! try this one: http://uber.github.io/react-map-gl/

[DominikLevitsky]

@vicapow Hey. Can you explain how can I alter the mapStyle layer property or source property without causing the whole map to reload?

[abmai]

At this moment we have no intention to support changing the API layer. Most of these operations should be done through modifying the mapStyle object directly.

[cyrilchapon]

@abmai, this is very prohibitive isn't it ?

For example, my goal is to show a raw mapbox style, and add some overlay.
The API, for now, doesn't allow to

• Define a style (plugged to data)
• Add some client-side overlay

without redefining the whole base style.

This example from mapbox is basically impossible without redefining the whole style.

[vicapow]

@cyrilchapon it’s definitely possible. Just request the style yourself, modify it, then pass it to react-map-gl.

[cyrilchapon]

@vicapow you mean request the style.json ?

I realized that possibility afterward

[jalMogo]

it’s definitely possible. Just request the style yourself, modify it, then pass it to react-map-gl.

Does anyone have an example or a reference about how this can be done? For example, I have a Mapbox style url like 'mapbox://styles/mapbox/light-v10' and I want to load it as a basemap. Here is the Mapbox example of how this can be done with the imperative API: https://docs.mapbox.com/mapbox-gl-js/example/vector-source/

What would the equivalent look like with react-map-gl?