Custom Map Markers

[deecay]

What type of PR is this? (check all applicable)

• Feature

Description

Adds the feature to customize the looks of the map markers. You can change marker colors according to visualizations/ColorPalette, and marker icons with Font Awesome.

Before

After (Showing train stations with 'train' icon)

Related Tickets & Documents

Library used: https://github.com/marslan390/BeautifyMarker
Available icons: https://fontawesome.com/v4.7.0/icons/

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

editor (rectangle shape with 'ambulance' icon)

(dot shape, similar look to current circleMarker)

(circle with icon)

WIP Because...

• Is Font Awesome okay? Upgrade from FontAwesome v4 to v5 may become difficult because of this feature. Icon names have changed from v4 to v5, so if we save the icon name as setting, we might need to migrate.
• How to incorporate this with Groups? Icon per group?
• Should we create a list of possible icon names as a list (+600)?

[ranbena]

10x @deecay!

Some UX issues I noticed:

1. The different markers types do not indicate the same exact location. Here's all of 'em together:
   
   The "X" marks the correct coordinate and only "Doughnut" seems to adhere to it.

2. There actually is already a design related tab, which is "Map Settings" since it allows changing tile color themes. So better group 'em in one tab named "Style", with "Tile" and "Marker" headings.

3. "Text Color" seems unclear to me cause there ain't no text. Perhaps "Foreground color" would be more suitable?

4. I fiddled with the settings but it didn't take effect. Then I realized it's disabled by default with the checkbox on top. To avoid such confusion I suggest:
   a. Disable the color boxes when unchecked.
   b. Perhaps change checkbox label to sth like "Override default style".

5. Let's help our users know what font icons they can use. Add a link next to "Icon Font" that points to FA4.7 icons, like we do here.

[deecay]

@ranbena, thanks for your evaluation and input.

1. The different markers types do not indicate the same exact location.

I didn't expect this kind of behavior. Thanks for examining. This should be adjustable, so I will look into this first.

For all other suggestions, I will make additional commits after fixing #1.

[deecay]

@ranbena
Where do you think the rectangle marker should align?

The 'x' should come at the center point of the bottom edge of the rectangle? Right on, or do we want some margin between the 'x' and the box?

Another option could be that 'x' comes at the rectangle's center of gravity. Icon will hide what's at the 'x' point, but it is arguably more accurate.

WDYT?

[deecay]

In addition to the feedback, I have

1. Added new shape type 'Circle', which was missing. Screenshot added to the original comment.

2. Made Rectangle a square shape. And it will be positioned so that the specified coordinates comes to the center of its gravity. Screenshot updated.

3. Added Color Name to color dropdown list.

[ranbena]

@ranbena
Where do you think the rectangle marker should align?

The 'x' should come at the center point of the bottom edge of the rectangle? Right on, or do we want some margin between the 'x' and the box?

Another option could be that 'x' comes at the rectangle's center of gravity. Icon will hide what's at the 'x' point, but it is arguably more accurate.

WDYT?

Sorry for disappearing @deecay. Was on vacation 🏝
I think having all shapes (except for the "Marker") be in exact center makes sense.

[ranbena]

@deecay great work! Really!
I put some comments/suggestions in code.

[ranbena]

I'd like to suggest a bit more verbosity. Sth like:

[deecay]

Much better 😄

[ranbena]

Almost there!

[deecay]

@ranbena, ready for review again.

[ranbena]

🕺Go ahead if and remove the '[WIP]' and I'll merge.

[deecay]

Thank you @ranbena for your support.

[ranbena]

Thanks @deecay for putting in the time to make this a feature available to all Redash users 🍾