feat: update map pin icons

[benfurber]

Description

A cute little update to the map pin icons

Design notes and requirements by @dalibormrska

This issue talks only about the map pins. The issue of clusters will be in scope of a different issue later on.

1. First requirement

This is the behaviour that we would like to achieve: https://codepen.io/vsync/pen/mdEJMLv

First of all, by default the old map pins were funky circles with a lot of vector points, but since they are being displayed so small, they were practically invisible and my assumption was that they were slowing down the interface by taking computing power to display all the vector points. So I simplified the pins to pure circles. I also simplified the symbols inside the circles to be more lightweight.

I based it on a modular idea, since the two circles and the animation of opening the pin would be the same across all the pins. The only thing that would change is the color of the 2 circles and the icon in the center.

However, I don't know how implementable this modular idea is. Have a look at what would be a good solution and let me know, I can provide you with any SVGs you might need.

2. Second requirement

For the user it would be very useful to see the relation between the cards and the map pins. Therefore we would love to have a simple interaction animation that highlights the hovered map pin. If the pin is in a cluster, I would say to highlight the whole cluster.

We DON'T WANT the map pins to be hoverable by themselves, it would create a lot of distraction while just hovering over the map. And we also don't need to have the vice-versa interaction (that on hover of the map pin, the card would get highlighted, since the user would get the same information by just clicking the map pin).

Build suggestion

• The function to update is createMarkerIcon in src/pages/Maps/Content/MapView/Sprites.tsx
• How to do the onclick/select effect might require some thought.

[Klozon-cs]

Hi! I'm not sure why would you want to separate the circles in the svg to two different circle. You could just make one with a given fill and stroke color and just change the stroke-width. But there is still a other problem with the svg background circle... its harder to animate the hover effect (if you still want to use two circle).
Instead i recommend using a div or one circle, easy to animate and resize.
Div is still better then circle bc with circle you can only achive outside grow while div can do inside and outside grow.

Here is example for each: https://codepen.io/Klozon-cs/pen/jOgEONO

// if you want the div to grow outwards then remove box-sizing: border-box; //For the hover effect you must use js bc if the card is not a parent or sibling to the icon then you cant use css combinators (~ + > it will not work)

[dalibormrska]

Heyyy Klozon, thanks for the input and the examples! I see the point that it would be easier with just a stroke. If we would be talking just about the hover animation, that would make sense. The way I separated the two circles is due to the pin opening animation where the bottom circle changes shape.

Another question that I as a designer don't see too much into is how to implement that with Leaflet, which we use for showing the map pins.