Im using

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

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, e.g. {{ background: 'blue' }} it has no any effects on the style.

Have I missed something? Thanks

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

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

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, e.g. {{ background: 'blue' }} it has no any effects on the style.

Have I missed something? Thanks

• javascript
• reactjs
• mapbox
• mapbox-gl-js
• react-map-gl

Share Improve this question Follow asked Jul 21, 2018 at 20:18 PatrickkxPatrickkx 1,88099 gold badges3838 silver badges6666 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Marker and Feature are two different ponents 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 ponent. 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 ponent 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 ponent, as mentioned in the documentation for Feature. In the documentation for the Layer ponent you can see that you must set up your layer first and then pass in the Feature ponent(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 ponent. All of the settings that you can change can be found in the Mapbox Style Definition.