Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Map marker overlap #2530

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Conversation

k-nut
Copy link
Collaborator

@k-nut k-nut commented Feb 2, 2025

Description

This PR ensures that the markers in the center of the area in a map are positioned on top of the individual markers.

Screenshots

before after
CleanShot 2025-02-02 at 09 02 11@2x CleanShot 2025-02-02 at 09 01 15@2x

Changes

There are two commits:

  • The first one extracts some duplicated code for ordering areas on the map (not strictly necessary for this PR)
  • The second one adds the zIndexOffset property to the DivIconMarker and uses it on the markers for the center of the areas.

The leaflet library automatically sets z indexes on all markers so that they display properly. It allows providing the zIndexOffset to explicitly place some markers on a higher level which is just what we want here.

Related issues

Resolves #2445

@@ -308,24 +308,9 @@ const OrganizerMapRenderer: FC<OrganizerMapRendererProps> = ({
return -1;
} else {
// When none of the two areas are selected, sort them
// by size, so that big ones are underneith and the
// by size, so that big ones are underneath and the
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

@river-bbc river-bbc self-requested a review February 2, 2025 13:19
Comment on lines +6 to +12
export const DivIconMarker: FC<
{
iconAnchor?: [number, number];
} & Pick<
MarkerProps,
'children' | 'draggable' | 'eventHandlers' | 'position' | 'zIndexOffset'
>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dit is aba geil

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Area assignments: location markers end up on top of what's in the center of the area
3 participants