Special Marker Designs [Design Input Needed]

[jasonkalmeida]

There might be a need for special marker designs - i.e. category markers (rally, call banks, etc.) OR special/standout events (Senator Warren rally) - to call out visually to users events on the map.

One tricky aspect of this is that the markers currently on the map represent a venue, and a single venue can have multiple events in it. So maybe it should be a modified marker to suggest there is a special event at the venue... but not the only thing going on at said venue.

As the title of this issues suggest, input is needed 😅

[Hucxley]

If you can replace the "W" inside the marker with an avatar of Sen. Warren when we KNOW she'll be somewhere, it would encourage turnout at that event. As much as I love the W avatar and the current markers, it may be worth changing the color based on what kind of event it is and adding a legend to explain what the mapping from color to event type.

[danielnarey]

I’m not sure how well an image will work because the pixel size of the markers is pretty small - a high contrast graphic is most distinguishable. Different colors would be easy to do, but if you have more than, say, 3, it’s probably not the best user experience to have to refer to the legend to figure out what they mean.

[Hucxley]

They probably look smaller on desktop, then. When I looked on mobile, the icons seemed reasonable (though the "avatar" could even be something like "See Liz" in the banners design I think you made, @danielnarey). As far as events go, you might end up with 4 major categories: local volunteer events (meetups, debate watch parties, etc - perhaps just white for this), outreach (canvassing/texting/phone banking - light green, for grassroots 😄 ), caucus/voting/registration (light blue), and "See Liz" (for rallies where she is speaking in person - dark blue with white W logo with the bar underneath).

Perhaps we could look at some icon imagery for the event clusters. I have a membership to thenounproject.com, so we can use anything on there without attribution in any way we'd like. I just need to know what to pull, the format, and the basic color options, and I can grab it and pass it along.

[danielnarey]

You’re right that there is a 2x size for high-res screens that might be large enough for an image, but I’m assuming the smaller one gets loaded on desktop. You can see them both here: https://github.com/techforwarren/design-assets/tree/master/map-marker/option-2

[Hucxley]

@danielnarey looking at them again, I think just using different colors as outlined in my post above - based on event type "clusters" - applied similar to the light versions of the icons you made for each marker should work. Especially if we can also do some scaling on the markers on hover/selected to get them closer to the 2x version that shows on mobile for desktop users (though I used 1.5 in the pen because 2x is too big in a desktop browser).

I put together a quick pen for demonstration:
https://codepen.io/KHam0425/pen/NWKmERG

Also, it looks like this would need to happen in two places, whatever is triggering the event on mouseover in the event list to change the icon center color to red and on hover on the icon itself. Adding a hover: transform(scale: 1.5, 1.5); to both of those places should go a long way to helping with any sort of readability issues we may have in using event-type specific graphics within the inner circle of the map marker.

I'm planning on hooking into this project over the weekend, but it has been deployment week for a 9-month project at work (hell week as my colleagues have begun to refer to it) and my kid has had something every single night this week after work, which is why I've been replying to you in the mornings over coffee before I take her to school.

[danielnarey]

@Hucxley I like these suggestions. Let’s get some additional input on the category breakdown, and then I will make the color variations to test out.

[Hucxley]

One thing we may need to be careful about is some of the leaflet marker classes have hard-coded values for the width and height, with offsets with hard-coded -x and -y values to center the marker on the location. I'm not sure if we add a class that we can use to apply the hover with will cause the markers to move after the transform is applied.

We either need to attach the :hover to a very soecific marker leaflet class, or replace the hardcoded height, width, and offset-x and offset-y with %-values instead.

Here is the start of the relevant block of code where this probably should be done:

eventmap/src/Map.js

Line 68 in 9dd5393

var generalIcon = new L.Icon({

[jasonkalmeida]

So the event objects seem to have an event_type attribute - https://api.mobilize.us/v1/organizations/1316/events?timeslot_start=gte_now

The response that link just gave had the values for the event_type attribute:

• MEETING
• HOUSE PARTY
• COMMUNITY
• CANVASS
• PHONE_BANK
• TRAINING

I don't know if/think this is an exhaustive list though.

[danielnarey]

Let’s table this issue until after the initial release, or otherwise we’re going to get into a cycle of endless refinements.

[chief-dweeb]

Given that there are so many different kinds of events, maybe a better UX would be to allow users to filter events through some separate UX and leave the markers/pins simple (as they currently are).