React-map-gl: how to add marker by click on map?

[manvfx]

Hi
I want add marker by click, please help me

[mayteio]

Use the onClick callback of <InteractiveMap />, grab lngLat from the PointerEvent

import React from 'react';
import InteractiveMap, {Marker} from 'react-map-gl'

function App(){
  const [markers, setMarkers] = React.useState([])
  const handleClick = ({lngLat: [longitude, latitude]}) => 
    setMarkers(markers => [...markers, {longitude, latitude}])

  return <InteractiveMap onClick={handleClick}>
   {markers.map((m, i) => <Marker {...m} key={i} />)}
  </InteractiveMap>
}

Demo

[rgazelot]

You can also look at what https://nebula.gl/docs can do for you