Is there a way to render marker thru layers and feature?

[howdyhyber]

It works in this code.

<Layer type="symbol" type="circle" id="marker" paint={{ 'circle-color': "#ff5200", 'circle-stroke-width': 1, 'circle-stroke-color': '#fff', 'circle-stroke-opacity': 1 }}

{ this.state.assets.map((element, index) => { return <Feature key={index} coordinates={[element..longitude, element.latitude]} anchor="bottom" /> }) }

But how am i going to put my image per coordinates and not the circles?

[mklopets]

Answered your question on Stack Overflow as well, here it is again:

To render something with layers and features, put one or more Feature components inside of a Layer component. You can give each Feature a position using the coordinates prop.

Now, what's left over is to style these features. How you do this depends on what your markers previously contained, but for example, if you'd like to draw circles for each of the positions, you can set the Layer's type to circle and under the paint prop, provide values for circle-color and circle-radius (these are described in the mapbox-gl API docs.

For drawing images for each coordinate, you can use the icon-image layout property on the Layer (you would have to either use a preexisting icon or upload one to Mapbox Studio).

You can see some sample code in the demos, for example the all-shapes demo styles data with circles.

[howdyhyber]

Thanks for the response.

[howdyhyber]

I have tried uploading icon image on Mapbox and it works.

<Layer type="symbol" layout={{ "icon-image": "car_active", 'text-allow-overlap': true, 'icon-allow-overlap': true, }}

{ this.state.assets.map((element, index) => { return <Feature key={index} coordinates={[element.longitude, element.latitude]} style={{ transform: rotate(${element.bearing}deg) }} --> doesn't work /> }) }

What i want is that every coordinates has different icon-image, how do i do it?

[mklopets]

You can't style features using CSS, they are not HTML elements but instead rendered natively using WebGL.

One way to have every coordinate have a different icon-image is to have a separate layer for each different image, but depending on the amount you need, this might have a significant performance hit.

Another way is to give every Feature a property signifying the icon you want, e.g

<Feature
  {...otherProps}
  properties={{
    thisCanBeNamedWhatever: 'car-1'
  }}
/>
<Feature
  {...otherProps}
  properties={{
    thisCanBeNamedWhatever: 'car-2'
  }}
/>

and then instead of hardcoding the icon-image value as a string in the layer paint options, use mapbox-gl-js's identity functions, referring to the property name you set above:

<Layer
  {...otherProps}
  layout={{
    'icon-image': {
      'type': 'identity',
      'property': 'thisCanBeNamedWhatever'
    }
  }}
/>

btw please mark the answer as accepted on Stack Overflow if it answered your question.