React-map-gl: Draw a circle on a marker

[altrang]

Hello , I m new to this library and i couldnt find what i m looking for in the docs.
I have a map with a Marker and i would like to draw a circle with my marker as center with a certain radius.
My marker is a bus stop and the circle should show users a certain radius in meter
If anyone has clue on that
Thanks

[xintongxia]

There is Marker example and Custom Overlay example in the repo.

Also you can check Marker, Custom Overlay and other docs.

[altrang]

Ok so to solve this i have to create my own custom component and insert it in my map component right? There is no build in solution for this ?

[xintongxia]

Yes. Something like the following.

 <MapGL ...>
   <Marker ... />
   <CircleOverlay .../>   
 </MapGL>

For the implementation of the circle, you can draw it on canvas (refer Custom Overlay, Canvas Overlay).

Or alternatively you can use deck.gl (refer DeckGL Overlay, DeckGL Scatterplot Layer).

<MapGL ...>
  <DeckGL>
    {...viewport}
    layers={[
      new ScatterplotLayer({
        data: [...],
        ...,
      })
    ]}
  />
</MapGL>

[altrang]

thanks a lot for your answers !

[tsaiDavid]

@dmi3y - might be relevant for you

[derwaldgeist]

Also missing this in the standard library. This was all so easy with Leaflet...

[derwaldgeist]

I just found a simple workaround to do this:

1. Create a GeoJSON polygon that mimics the shape of the circle, using @turfjs/circle
2. Add this GeoJSON to a custom layer
3. Add this layer to your map