✨ add support for style prop in Marker (#1698)

Author: a-tokyo

docs/api-reference/marker.md

@@ -144,6 +144,12 @@ Stop propagation of dblclick event to the map component. Can be used to stop map
 
 Stop propagation of pointermove event to the map component. Can be used to stop map from calling the `onMouseMove` or `onTouchMove` callback when this component is hovered.
 
+##### `style` (object)
+
+- default: `undefined`
+
+Optional extra style object to be applied to the marker. Can be used to add properties like `zIndex` to the marker as inline style.
+
 ## Styling
 
 Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

src/components/marker.d.ts

@@ -4,7 +4,8 @@ import type {DraggableControlProps} from './draggable-control';
 export type MarkerProps = DraggableControlProps & {
   className?: string,
   longitude: number,
-  latitude: number
+  latitude: number,
+  style?: { [key: string]: string | number }
 };
 
 export default function Marker(props: MarkerProps): ReactElement;

src/components/marker.js

@@ -32,7 +32,9 @@ const propTypes = Object.assign({}, draggableControlPropTypes, {
   // Longitude of the anchor point
   longitude: PropTypes.number.isRequired,
   // Latitude of the anchor point
-  latitude: PropTypes.number.isRequired
+  latitude: PropTypes.number.isRequired,
+  // Custom style
+  style: PropTypes.object
 });
 
 const defaultProps = Object.assign({}, draggableControlDefaultProps, {
@@ -66,7 +68,7 @@ function Marker(props) {
   const thisRef = useDraggableControl(props);
   const {state, containerRef} = thisRef;
 
-  const {children, className, draggable} = props;
+  const {children, className, draggable, style} = props;
   const {dragPos} = state;
 
   const [x, y] = getPosition(thisRef);
@@ -80,7 +82,8 @@ function Marker(props) {
       left: 0,
       top: 0,
       transform,
-      cursor
+      cursor,
+      ...style
     };
 
     return (