Local Status: choose icons

[abettermap]

Description

Define icons to symbolize by Local Status.

Related items

(discussion started in Lang Map UI Scenarios doc)

(Ross): I find React's "FaPlaceOfWorship" icon not bad for a generic icon to symbolize all the Liturgical languages.

(Jason): Excellent. I should have pointed you to the built-in MB icons since there are fewer steps involved: https://labs.mapbox.com/maki-icons/ . They are super small but you can do "CMD + =" to zoom in, or go to the source page for a full alphabetized list then click a file name to see the icon: https://github.com/mapbox/maki/tree/master/icons

Your place of worship icon is actually in there, so we're set on that one. How about for the others?

• Historical: maybe https://github.com/mapbox/maki/blob/master/icons/watch-15.svg or https://github.com/mapbox/maki/blob/master/icons/town-hall-15.svg ??
• Non-Residential: maybe https://github.com/mapbox/maki/blob/master/icons/commercial-15.svg or https://github.com/mapbox/maki/blob/master/icons/village-15.svg or https://github.com/mapbox/maki/blob/master/icons/city-15.svg or https://github.com/mapbox/maki/blob/master/icons/town-15.svg or https://github.com/mapbox/maki/blob/master/icons/building-15.svg ??
• Reviving: I couldn't find any Maki icons for this, but I picture some kind of upward arrow or FaChartLine from react-icons
• Residential: presumably some kind of house, e.g. https://github.com/mapbox/maki/blob/master/icons/home-15.svg

If none of these are meeting your needs, feel free to say so and we can use react-icons as needed (assuming their licensing permits it).

(Ross):

• For Residential, totally good with https://github.com/mapbox/maki/blob/master/icons/home-15.svg.
• For Non-Residential (now changd to Institutional), I think I like https://github.com/mapbox/maki/blob/master/icons/building-alt1-15.svg
• For Reviving, good idea, but shouldn't be too stock-markety, maybe IoIosArrowUp?
• For Historical, I think https://github.com/mapbox/maki/blob/master/icons/town-hall-15.svg is ok.
• For Liturgical, I definitely think the house of worship is good, but I wonder if there will be confusion because in many cases religious institutions are marked as "Institutional" (since it's the language not the place that's being symbolized as "Liturgical"). My instinct is to try https://github.com/mapbox/maki/blob/master/icons/library-15.svg as being closer to the idea that these are book languages, actually.

How hard are these to change if necessary a little down the line?

[abettermap]

@rperlin-ela

I also forgot about a great site called Iconmonstr, which I've been using for years. I grabbed a few of the icons from there but let me know if you find some better alternatives than what I picked. More details below.

To answer your question:

How hard are these to change if necessary a little down the line?

...not very if you already have an icon that's properly sized and styled. The upload step is trivial, it's just a pain to create the icons w/color (more details at bottom). Iconmonstr's icons are already sized nicely at 24x24, React Icons are larger, and Maki's are smaller so I had to resize in a desktop editor (but in hindsight I could have left them as-is and simply bumped the size up in MB).

I actually didn't have much luck with the "built-in" MB icons so I ended up uploading others anyway. I think Iconmonstr has enough options so maybe we can scrap Maki (sorry you had to browse through them but hopefully it churned up some ideas!).

Reviving icon

I tried a similar arrow on Iconmonstr to your IoIosArrowUp but it doesn't stand out very well:

This one seems mildly better but I think there's room for improvement (while adhering to non-stock-markety haha):

My fave with that one was when I increased the size a bit and gave it a 45-deg rotation:

Bunch of stuff I just learned

...about using symbols or icons in MB:

• It is not possible to change icon color or icon background color dynamically in MB Studio. I can do it in code, but breaking away from Studio-based styling for 5% of the symbology and 95 for code is not a road I want to go down.
• The default icon black and it doesn't look good.
• Going to use white for the icon and manually created colors as icon backgrounds.
• Tried to make separate layers just for the icon BG, total mess on several levels.

Will have more info as I go along...

[abettermap]

Evidence of MB Studio icon color limitation in case Future Jason needs it: https://docs.mapbox.com/help/troubleshooting/using-recolorable-images-in-mapbox-maps/#mapbox-studio

[rperlin-ela]

I also forgot about a great site called Iconmonstr, which I've been using for years. I grabbed a few of the icons from there but let me know if you find some better alternatives than what I picked.

Thanks, cool site.

How hard are these to change if necessary a little down the line?

...not very if you already have an icon that's properly sized and styled. The upload step is trivial, it's just a pain to create the icons w/color (more details at bottom). Iconmonstr's icons are already sized nicely at 24x24, React Icons are larger, and Maki's are smaller so I had to resize in a desktop editor (but in hindsight I could have left them as-is and simply bumped the size up in MB).

That's good. Obviously I don't want to be switching a lot of things up on you, but I wouldn't be surprised if others who are not focused on this conversation right now will have strong opinions once they see our best effort on the map itself.

Reviving icon

I tried a similar arrow on Iconmonstr to your IoIosArrowUp but it doesn't stand out very well:

This one seems mildly better but I think there's room for improvement (while adhering to non-stock-markety haha):

My fave with that one was when I increased the size a bit and gave it a 45-deg rotation:

This is definitely an improvement, but I think maybe something more organic is called for, maybe this? https://iconmonstr.com/tree-7-svg/

Bunch of stuff I just learned

...about using symbols or icons in MB:

• It is not possible to change icon color or icon background color dynamically in MB Studio. I can do it in code, but breaking away from Studio-based styling for 5% of the symbology and 95 for code is not a road I want to go down.
• The default icon black and it doesn't look good.
• Going to use white for the icon and manually created colors as icon backgrounds.
• Tried to make separate layers just for the icon BG, total mess on several levels.

Can't totally follow all this, but would just say that while icon-symbolizing "Type" (what we used to call "Local Status") promises to be cool, we don't want to put too much time into it at the expense of other things

[abettermap]

but I wouldn't be surprised if others who are not focused on this conversation right now will have strong opinions once they see our best effort

Understandable and expected. So far I think you and I have gotten a decent start on icon-ing and styles in general but yes, an n of 2 probably isn't as representative of popular opinion as group input would be.

This is definitely an improvement, but I think maybe something more organic is called for, maybe this? https://iconmonstr.com/tree-7-svg/

Ooh, very nice! Will incorporate this.

Can't totally follow all this

Ha sorry mostly just me thinking/typing out loud, TLDR is that icons are plenty doable but nowhere near as flexible as I'd hoped.

but would just say that while icon-symbolizing "Type" (what we used to call "Local Status") promises to be cool, we don't want to put too much time into it at the expense of other things

Indeed. I'm past the research/learning hurdle on most of it and we have some potential icons in place, so hopefully the bulk of the icon work is behind me. And when I say it takes longer to initially implement it in MB Studio, I mean like 15 minutes per icon. So not that bad. I haven't wired it up in code yet, however, so that might take a minute, but it's a one-off and I think it's worth it (not to mention we only have 5 icons in total to worry about, so hopefully worth the time!).

[abettermap]

@rperlin-ela what do you think about not having a background color? Total accident but I think it looks badass:

I'll try it on the others as well (good to be consistent), but I have a hunch it will look good and free up some of the bulkiness. Will send screenshot but let me know what you think of the tree so far.

[rperlin-ela]

Looks great to me, go for it!

…

On Aug 12, 2020, at 10:39 PM, Jason Lampel ***@***.***> wrote:  @rperlin-ela what do you think about not having a background color? Total accident but I think it looks badass: I'll try it on the others as well (good to be consistent), but I have a hunch it will look good and free up some of the bulkiness. Will send screenshot but let me know what you think of the tree so far. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[abettermap]

Cool. I think they're looking decent, and I was able to reduce size a bit:

...although now w/o the background + white icon, the lighter colors do not stand out as much 🤔 .

I also swapped building for this one which seems like a slight upgrade, but only slight. So holler if you find a better one!

Same goes for book as I think the lines are a little too thin:

[abettermap]

Pushed up a preview: https://deploy-preview-61--languagemapping.netlify.app/

[rperlin-ela]

I like it! To me stands out just fine and a definite improvement. Tree looks great and the building is an upgrade, though I will look later in case there are other options.

…

On Aug 12, 2020, at 11:17 PM, Jason Lampel ***@***.***> wrote: Pushed up a preview: https://deploy-preview-61--languagemapping.netlify.app/ <https://deploy-preview-61--languagemapping.netlify.app/> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#53 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMNKB5HAUVGYKRL6QOFNGS3SANLNLANCNFSM4PJCUCEA>.

[rperlin-ela]

For what's now called "Institutional"—I know we promised as few schema changes as possible, so big apologies—could we change the name to "Communal" and use this icon or something similar showing multiple, or at least two, people (https://iconmonstr.com/user-29-svg/)? React Icons has similar things under "Team".