Why does Leaflet setStyle({color: "FFFFFF"}) make things black instead of white?

Question

I have a given polygon layer, I call setStyle(style) on it, style is {"color":"FFFFFF", fillColor":"FFFFFF"}. After the call the feature has its default color that I gave it during creation (even when this wasn't the style that the layer had before calling setStyle()).

I'm not really sure what code I could share here to demonstrate the problem, its really just the single function call. Does anyone know why this might be happening? Things I should check for to diagnose whats going on?

edit:

A screenshot of chrome devtools showing whats going on. The dark polygon on the left is the one which is supposed to be set white right now, but it is instead colored gray (its original color at creation).

This may be a structural issue in your code, i.e. where you're calling `setStyle`, is some other function being called as well that's also resetting the style. Can you provide a codesandbox / codepen of your relevant code so we can see it and try to diagnose the issue? — Seth Lutske, Jul 20 '20 at 19:06
theres a lot of moving parts for me to try to recreate the setup in the codepen, but I can tell from chrome dev tools that it is 100% setting it to default values somewhere within that exact function call. Nothing else is calling any similar functions at the same time or after I change it. — cebo, Jul 20 '20 at 19:10
Hmmm, without seeing more code, its hard to say why its not behaving as expected. Are you sure the `style` object you're using as the argument is what you think it is? — Seth Lutske, Jul 20 '20 at 19:15
It is. I will upload a screenshot of the devtools to show whats going on a bit better — cebo, Jul 20 '20 at 19:18
It looks like you're setting the `style` property of the `MapController` itself....you can see your desired values there. What is `MapController.getLayer`? It seems like its not returning the `drawLayer` that you are trying to affect? — Seth Lutske, Jul 20 '20 at 19:32
No its definitely setting the style of the layer. Its getting the layer in the first line of that function. You can see the layer in the `Scope` field on the right, its definitely a normal leaflet layer. Then I am calling setStyle() on it with those options. If I was setting anything else then it wouldn't have colored only the right polygon with the wrong color, it would've done all sorts of other stuff or raised exceptions. — cebo, Jul 20 '20 at 19:44

score 2 · Accepted Answer · answered Jul 20 '20 at 19:48

TL;DR: You're using color: "FFFFFF", but you should be using color: "#FFFFFF", or color: "white".

The "FFFFFF" string is not a valid CSS colour definition anymore.

Once upon a time, browsers used to use fallback techniques when it came to CSS colour definitions, and that caused much confusion with the color: chucknorris CSS rule. Nowadays, this behaviour seems to be deprecated in most browsers, which will fall back to a colour of their choice.

Leaflet is doing its job of passing the colour to the SVG paths (or to the canvas draw calls), e.g. code like this...

L.circleMarker([0,0], { 
    radius: 100,
    weight: 10,
    color: "FFFFFF",
    fillColor: "FFFFFF",
    fillOpacity: 1
}).addTo(map);

...will produce a SVG element on the DOM which looks like this...

<path class="leaflet-interactive" stroke="FFFFFF" stroke-opacity="1" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" fill="FFFFFF" fill-opacity="1" fill-rule="evenodd" d="M304,405a100,100 0 1,0 200,0 a100,100 0 1,0 -200,0 "></path>

...and the browser won't understand those colours, and will most probably fall back to no stroke, and black fill, like this:

This is not exclusive to SVG elements; try this, which shall fall back to transparent background and black text:

<div style="background: 00ffff; color: ff0000">I should be red text on cyan background</div>

By sheer chance, the browser is falling back to a colour you were defining already, which is causing confusion.

So, in essence this is a GIGO problem, and you should make sure to define your CSS colours the right way.

Thats the one! I knew I had to be missing something simple or else something deep in leaflet was going wrong. Thanks for catching that, I was already using the # for every other color in my program and just didnt notice that I forgot this one — cebo, Jul 20 '20 at 20:24

Why does Leaflet setStyle({color: "FFFFFF"}) make things black instead of white?

1 Answers1