Symbology and label enhancements

[abettermap]

Summary

Based on some recent discussions w/Ross on labels relative to icon symbols, just thought I'd widen the convo a bit.

This MB Basic Style will be used as reference.

Strategies

MB's streets style (aka Basic if you're making a new Style in Studio) has some excellent examples of how to deal with or prevent label/symbol conflicts. Some are way overkill for this project, but using theirs as the golden approach provides a good baseline of what can be done.

Zoom-dependent everything

Things appear/disappear as you go in/out:

Two sets of icons

Used in tandem w/the zooms...

Small:

Large:

We are not using the Maki icons so not exactly the same concept, but we could achieve similar results.

Icons + labels in single layer

These are coming from a single map layer and therefore a single style config, which is how I'm doing it for Status (as of yesterday) as opposed to separate layers like I'm doing with World Region and Size. The standard practice seems to be separating into two layers, but not for icons. So if we can get the two non-Status layers into icons, we can use single-layer config across the board (currently I have an inconsistency-prone dual config for the combo vs non-combo approaches).

[abettermap]

@rperlin-ela if you want to see some strategies for how to symbolize and label effectively, MB does a great job with their own styles.

If you have any objections to loosely basing ours off of theirs (specifically with regard to icon/label/zoom relationships) let me know, otherwise I'll shoot for that.

[rperlin-ela]

No objections, go for it!

On Sep 16, 2020, at 1:54 PM, Jason Lampel notifications@github.com wrote:

@rperlin-ela https://github.com/rperlin-ela if you want to see some strategies for how to symbolize and label effectively, MB does a great job https://api.mapbox.com/styles/v1/elalliance/ckf5nzrhc06kk19pidek50a3s.html?fresh=true&title=view&access_token=pk.eyJ1IjoiZWxhbGxpYW5jZSIsImEiOiJja2M1Nmd6YnYwZXQ4MnJvYjd6MnJsb25lIn0.AC_4h4BmJCg2YvlygXzLxQ#12/40.7128/-73.96 with their own styles.

If you have any objections to loosely basing ours off of theirs (specifically with regard to icon/label/zoom relationships) let me know, otherwise I'll shoot for that.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Language-Mapping/language-map/issues/83#issuecomment-693564650, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5AYWEAZZATUYRQZX3DSGD3WNANCNFSM4RPGCKKA.

[abettermap]

cool. as of this afternoon we are now JSON-free (still have Jason though). Cue that "Now we are free" theme song from Gladiator, but in beep-boop computer tones.

it is SO much easier to work with this way, but so much so that it may open a new can of worms for symbology and labels. we'll see where it goes but the handiness of it is superb so far.

i also went all-in with the icons, so now we only have MB symbol types rather than circle. the latter is far more complex but also more capable. on your end, you shouldn't be able to tell the difference as i fortunately found a way to set icon colors on the fly (another one-liner that i wasn't aware of when i was setting up the Status icons):

a big bonus to all this is the simplicity of zoom-dependent everything.

points far:

mid:

and close:

same with labels and text size...

far:

mid:

close:

Before you ask to show all labels 24/7

...don't. just don't:

there's just not enough room to show 1000+ points and their labels all the time. i've followed some of the mb suggestions to show them "sooner", and if i show them all the time then it defeats the purpose because they're so crowded and illegible anyway.

the icons, however, look fine with some overlap. just know that turning on the labels is when it goes downhill.

still got some kinks to work out after the icons-only migration but it's coming along well and i should have a push later today.

[abettermap]

part of the worm-can includes label colors matching their symbol:

i only did it for Status as quick example but are we thinking do this for all the "Show by" types?

another variation i tried but turned out poorly:

would be cool if the full background of the text was filled in, but i only found mb properties for the outline.

let me know about the label color for all Show By instances though.

[abettermap]

the print map called, it wants its colors back 😆

does look cool, although i don't think i can get away with same-color text for all of them. the lighter ones either need darker text or a subtle darker text halo around them

[abettermap]

i did that for a few of the lighter ones, looking pretty good. pushed what i had, might be it for tonight, but if things are working as planned then your newer Notos should be showing in the deploy based on your shiny new sheet: https://deploy-preview-81--languagemapping.netlify.app/

some temporarily broken byproducts of the icons-only approach:

not broken but tiny icons for the non-circles:

not broken but no color (this one may be hard to fix, or at least will be for the circle ones):

let me know what ya think.

[rperlin-ela]

Besides the endonyms working great straight from the sheet, the colored labels are looking pretty fantastic.

Color on the Status icons doesn’t seem crucial because I think color for us can primarily symbolize region (though interesting with Status that it’s still on the map but not in the legend). I also feel Size is just fine as it is, color-wise.

But the size of the Status icons is a little too small— some like the house faring better than others.

Otherwise all great!

On Sep 16, 2020, at 9:33 PM, Jason Lampel notifications@github.com wrote:

i did that for a few of the lighter ones, looking pretty good. pushed what i had, might be it for tonight, but if things are working as planned then your newer Notos should be showing in the deploy based on your shiny new sheet: https://deploy-preview-81--languagemapping.netlify.app/ https://deploy-preview-81--languagemapping.netlify.app/ some temporarily broken byproducts of the icons-only approach:

https://user-images.githubusercontent.com/4974087/93409012-241bd800-f853-11ea-9223-9cb293dddfc3.png https://user-images.githubusercontent.com/4974087/93409040-35fd7b00-f853-11ea-8b32-1fbfd2348f8e.png not broken but tiny icons for the non-circles:

https://user-images.githubusercontent.com/4974087/93409087-52011c80-f853-11ea-9c85-65bcf5277d5d.png not broken but no color (this one may be hard to fix, or at least will be for the circle ones):

https://user-images.githubusercontent.com/4974087/93409127-6cd39100-f853-11ea-8e45-1618b0b43081.png let me know what ya think.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Language-Mapping/language-map/issues/83#issuecomment-693754338, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5HS4Q6SYS3QKVIGLTTSGFRPFANCNFSM4RPGCKKA.

[abettermap]

Color on the Status icons doesn’t seem crucial because I think color for us can primarily symbolize region

so just black for labels on everything except Show By World Region then?

(though interesting with Status that it’s still on the map but not in the legend).

not sure what you mean but yeah there's a pretty big gap code-wise between the map and the legend unfortunately. they're definitely tied together and legend is based on the data mostly, but esp after the circles-to-icons migration it's made things a little dicier in the code. i threw some comments in for Future Devs so hopefully better than nothing. kind of a mess though since i started with a focus on non-icon circles (the MB "symbol" type, used by icons, has waaaaaaay more complexity than the regular circles).

I also feel Size is just fine as it is, color-wise.

for the labels right? so just black then. k will leave as-is.

But the size of the Status icons is a little too small— some like the house faring better than others.

yep i think i mentioned i hadn't touched that yet, have since fixed though. had to turn off the "allow icon overlap" thing though. works fine for the dots but it was out of control with non-circle icons. total mess, mainly because there are so many "Residential" points.

[rperlin-ela]

Awesome, I’m pysched to see all the latest — region and size colors in the table! — when I get a chance in a few hours.

The little red whatchamacallit showing that there’s a filter on is a big win too, though I wonder if this can be distinguished a bit from the red circle that means Southern Asia. Would something like white be weird?

Thinking this is really totally there and beyond in terms of the current SOW. Do you think ready to show the whole team, or is there anything else?

so just black for labels on everything except Show By World Region then?

Seems fine to me (though interesting with Status that it’s still on the map but not in the legend).

not sure what you mean but yeah there's a pretty big gap code-wise between the map and the legend unfortunately. they're definitely tied together and legend is based on the data mostly, but esp after the circles-to-icons migration it's made things a little dicier in the code. i threw some comments in for Future Devs so hopefully better than nothing. kind of a mess though since i started with a focus on non-icon circles (the MB "symbol" type, used by icons, has waaaaaaay more complexity than the regular circles).

good to know in general, even I don’t grasp the details

But the size of the Status icons is a little too small— some like the house faring better than others.

yep i think i mentioned i hadn't touched that yet, have since fixed though.

Cool, sorry, yeah I think I wasn’t sure you meant, but looking good now.

[abettermap]

The little red whatchamacallit

"Badge" 😃

though I wonder if this can be distinguished a bit from the red circle that means Southern Asia.

wow yeah you're right, they're almost identical in size, shape, color.

Would something like white be weird?

i think so. white is pretty much text. i used Material's "error" color and they only give you a few other options. i think "secondary" is probably the best of the 4 as there's little similarity w/any of the regions and either way it's pretty far from them:

Thinking this is really totally there and beyond in terms of the current SOW. Do you think ready to show the whole team, or is there anything else?

there's always something else 😄 nah it's looking pretty bomb and i'd feel good showing it to the world. will reply via email.