1

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

Have I missed something? Thanks

Patrickkx
  • 1,740
  • 7
  • 31
  • 60

1 Answers1

3

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.

MattC
  • 847
  • 6
  • 15
  • Unfortunately none of your proposals regarding marker did work. Marker stays the same even if I pass children to it. Whats more - even if I pass inline styles to it, nothing changes... – Patrickkx Jul 22 '18 at 20:06
  • Perhaps you could create a CodePen that recreates the issue, so that I can better understand? – MattC Jul 22 '18 at 21:17
  • Here you go, as you can see nothing happens with the Marker :( https://codesandbox.io/s/8x2pmzkj59 – Patrickkx Jul 24 '18 at 15:26
  • Just updated my answer with Code Sandboxes showing you how to get things working. I think that you need to read my answer more closely because in your Sandbox you have components within a component, which I specifically mention won't work. – MattC Jul 25 '18 at 23:02
  • I'm trying to use a custom Feature component (that returns a ``), but unless it's direct child is a pure ``, it's giving the error "cannot read property 0 of undefined"? – Alexander Mattoni Sep 03 '19 at 20:26