Stylable marker/feature in react-mapbox-gl?

Question

Im using https://github.com/alex3165/react-mapbox-gl

My question is how to style the marker or feature component?

Feature does not accept children nor style prop.

Marker accepts style and children, however it doesnt render anything passed as props and even if I style it with, eg {{ background: 'blue' }} it has no any effects on the style.

Have I missed something? Thanks

Answer 1

Marker and Feature are two different components which work in different ways but can both achieve what you are trying to do. Let's start with Markers.

Marker Styling

You will note that in the react-mapbox-gl documentation that the style attribute will only effect the marker's container, not the marker itself. If you want to change the style of a Marker you should pass in your own marker as a child to the Marker component. Failing to pass in a child will result in the default light blue, droplet shaped marker being used. Note that this child you pass in as the marker could be a custom svg or even an html component that is styled with CSS .

<Marker
  coordinates={[-0.2416815, 51.5285582]}
  anchor="bottom">
  <img src={linkToMyCustomMarker}/>
</Marker>

or...

<Marker
  coordinates={[-0.2416815, 51.5285582]}
  anchor="bottom">
  <div class="mapMarkerStyle"></div>
</Marker>

Here's a Code Sandbox showing this in action: https://codesandbox.io/s/my2p15knj8

Layer Styling

In order to style Features you will first need to use the Layer component, as mentioned in the documentation for Feature . In the documentation for the Layer component you can see that you must set up your layer first and then pass in the Feature component(s) as a child for every location on the map that you would like to render this Layer. Like so:

<Layer type="circle" id="marker" paint={{
  'circle-color': "#ff5200",
  'circle-stroke-width': 1,
  'circle-stroke-color': '#fff',
  'circle-stroke-opacity': 1
 }}>
  <Feature coordinates={[-0.132,51.518]}/>
  <Feature coordinates={[-0.465,51.258]}/>
</Layer>

Here is a Code Sandbox showing the above in action: https://codesandbox.io/s/l42n3np7xm

In order to change the look and feel of the Layer that is displayed you can play around with the layout property on the Layer component. All of the settings that you can change can be found in the Mapbox Style Definition .