Add ability to specify <Marker> z-index

[jaydenseric]

Is your feature request related to a problem? Please describe.

There appears to be no way to specify the z-index for <Marker>.

Generally, markers that are further south should layer on top to maintain the skeuomorphic pin effect. This type of layering is not automatic, so having the ability to specify marker z-index would be useful - otherwise we have to rely on sorting the marker point lists by latitude so they are looped at render in the right order.

Also, sometimes you want to be able to click a marker to have it expand and layer above all the others. For this use case, I can't think of an elegant solution. I've tried hiding the marker, and inserting a more detailed one after all the markers, which works at first render but after zooming in and out a few times the z-indexing of all the markers changes for some reason and the last marker in the JSX is no longer layered on top.

Describe the solution you'd like

Add a zIndex prop for the Marker component.

Describe alternatives you've considered

Add a styles prop on the Marker component. These styles would merge with and override the generated marker inline styles. This would allow customization of more styles that just z-index.

Additional context

Example layering issue when a marker is clicked and expanded:

[cazzer]

@jaydenseric I ran into the same problem before realizing that the Popup component can help with this problem; if I have content which should be open, I render it with that component after any other markers or clusters:

return (
  <MapGL>
    <Cluster ... />
    {selectedMarker && (
      <Popup ... />
    )}
  </MapGL>
)

[tonnoz]

@cazzer thanks that solved my issue