feat(marker): add onClick handler (#301)

* feat(marker): add onClick handler

src/components/Marker/README.md

@@ -40,3 +40,51 @@ const onDragEnd = (lngLat) => {
   </Marker>
 </MapGL>;
 ```
+
+## Marker onClick handler
+
+```jsx
+import React, { useState } from 'react';
+import MapGL, { Marker } from '@urbica/react-map-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+const [position, setPosition] = useState({
+  longitude: 0,
+  latitude: 0
+});
+
+const style = {
+  padding: '10px',
+  color: '#fff',
+  cursor: 'pointer',
+  background: '#1978c8',
+  borderRadius: '6px'
+};
+
+const onMapClick = (event) => {
+  setPosition({ longitude: event.lngLat.lng, latitude: event.lngLat.lat });
+};
+
+const onMarkerClick = (event) => {
+  alert('You clicked on marker');
+  event.stopPropagation();
+};
+
+<MapGL
+  style={{ width: '100%', height: '400px' }}
+  mapStyle='mapbox://styles/mapbox/light-v9'
+  accessToken={MAPBOX_ACCESS_TOKEN}
+  latitude={0}
+  longitude={0}
+  zoom={0}
+  onClick={onMapClick}
+>
+  <Marker
+    longitude={position.longitude}
+    latitude={position.latitude}
+    onClick={onMarkerClick}
+  >
+    <div style={style}>Click me! ✨</div>
+  </Marker>
+</MapGL>;
+```

src/components/Marker/index.js

@@ -69,6 +69,9 @@ type Props = {
    */
   rotationAlignment: string,
 
+  /** Fired when the marker is clicked */
+  onClick?: () => any,
+
   /** Fired when the marker is finished being dragged */
   onDragEnd?: (lngLat: LngLat) => any,
 
@@ -103,7 +106,14 @@ class Marker extends PureComponent<Props> {
   }
 
   componentDidMount() {
-    const { longitude, latitude, onDragEnd, onDragStart, onDrag } = this.props;
+    const {
+      longitude,
+      latitude,
+      onClick,
+      onDragEnd,
+      onDragStart,
+      onDrag
+    } = this.props;
 
     this._marker = new mapboxgl.Marker({
       element: this._el,
@@ -117,6 +127,10 @@ class Marker extends PureComponent<Props> {
 
     this._marker.setLngLat([longitude, latitude]).addTo(this._map);
 
+    if (onClick) {
+      this._el.addEventListener('click', onClick);
+    }
+
     if (onDragEnd) {
       this._marker.on('dragend', this._onDragEnd);
     }
@@ -145,6 +159,10 @@ class Marker extends PureComponent<Props> {
       return;
     }
 
+    if (this.props.onClick) {
+      this._el.addEventListener('click', this.props.onClick);
+    }
+
     this._marker.remove();
   }