Applying a new style (stroke color) to a GeoJSON polygon

CesiumJS
1

Second chapter of an old question of mine (which I was able to solve): Applying a new style to a GeoJSON polygon

Now I want to dynamically change the stroke color of a geojson loaded source.

          loaded = await datasource.load(figure, {
            stroke: BORDER_COLOR.withAlpha(0.7)
            fill: A_COLOR
          });

Setting the stroke is working properly (not the stroke strokeWidth, but as I read, this can be a limitation of WebGL).

Unluckily I’m not able to change that color later. If I try something like entity.polygon.outlineColor = new Cesium.ColorMaterialProperty(NEW_COLOR); it just makes stroke color white.

Is this supported someway?

2

Hi @keul, thanks for the question

You can change the polygon outline color by just specifying the color, you don’t need to create a new material property

entity.polygon.outlineColor = Cesium.Color.PINK;

Quick sandcastle showing changing outline colors on click here

3

Hi @jjspacem thanks for the reply. outlineColor is exactly the API I tried, but is not working for me. Nor seems to work in your example: I don’t see countries borders to be PINK or any pink on the page

4

@keul the sandcastle I posted above changes the outline after you click a state. I thought it would better illustrate changing the outline after the primitives are created, I’m sorry if this caused confusion.

IMG_0069
IMG_00691397×786 267 KB

I have confirmed this working across 2 devices so I would expect it to work for you but maybe there’s something else wrong. If it’s still not working for you would you be able to provide a minimal sandcastle of the code that’s not working?

5

OK, in facts this is working and is quite similar to what I’m trying to obtain.
But in my page, changing the color makes them white, no matter which color I use.

I’ll try to arrange a sandcastle, but is not easy.

Thanks!

6

@jjspace OK, quickly back on this.

In facts, your code is working, but TypeScript is not happy! :smiley:

This is why I were using entity.polygon.outlineColor = new Cesium.ColorMaterialProperty(Cesium.Color.RED);

If I just use a color(with no ColorMaterial wrapper). Running tsc I get:

app/components/MapBrowser.client.tsx:197:15 - error TS2739: Type 'Color' is missing the following properties from type 'Property': isConstant, definitionChanged, getValue

197               entity.polygon.outlineColor = Cesium.Color.RED;
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in app/components/MapBrowser.client.tsx:197

Any idea on what is wrong here?

BTW: also you sandcastle stop working if I provide the wrapper (see here). Can this be a Cesium issue then?

7

Any idea on what is wrong here?

Actually yes! That info helps a lot. This is not the first weird little quirk of using CesiumJS in Typescript and probably won’t be the last. I actually found exactly this same issue previously reported in github: Typescript errors when setting color properties of various Cesium objects · Issue #9667 · CesiumGS/cesium · GitHub

Borrowing words from a previous comment:

These are Property instances, just not a MaterialProperty, i.e.

graphics.outlineColor = new ConstantProperty(Color.BLUE);
graphics.outlineColor = new SampledProperty(Color);

graphics.outlineColor = Color.BLUE; works but will result in graphics.outlineColor being a ConstantProperty (using implicit conversion borrowed from C#).

Changing your code to use ConstantProperty should work and make typescript happy, see an updated sandcastle. Maybe not ideal but hopefully that works for you for now.

Longer term we’ve recently been working on improving how we generate our Types files in the first place which should hopefully make creating actual fixes for issues like these easier.

2 Likes
8

Thanks @jjspace! Seems you fixed my issue!

1 Like
9

Just back on this to leave something to posterities in case other hit this issue.

Although the approach above works, there is a drawbacks on modifying the graphics.outlineColor in this way: it seems to trigger a full repaint of the feature.

The issue is similar to one I already faced on that thread.

On that thread I was trying something very similar (modifying a GeoJSON color) and the solution was to use CallBackProperty.
This is not working with outlineColor or I fall again in the original issue: Cesium doesn’t complain, but the color is just white.

So: there’s something a bit weird here.