# Coloring everything outside of a polygon

**URL:** <https://community.cesium.com/t/coloring-everything-outside-of-a-polygon/2588>\
**Category:** CesiumJS\
**Created:** [June 2, 2015, 5:56pm UTC](https://community.cesium.com/t/coloring-everything-outside-of-a-polygon/2588 "2015-06-02T17:56:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Minh\_Nguyen](https://avatars.discourse-cdn.com/v4/letter/m/ec9cab/32.png) [@Minh\_Nguyen](https://community.cesium.com/u/Minh_Nguyen)\
**Post date:** [June 2, 2015, 5:56pm UTC](https://community.cesium.com/t/coloring-everything-outside-of-a-polygon/2588/1 "2015-06-02T17:56:00Z")

</div>

Hello,

Is it possible to color everything outside of a polygon geometry? For example, if I had a RectangleGeometry inside the U.S. then everything outside of that RectangleGeometry would be colored differently. Initially I looked at the [SandCastle Polygon example](https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Polygon.html&label=Geometries) and the [PolygonHierarchy](https://cesiumjs.org/Cesium/Build/Documentation/PolygonHierarchy.html) seemed to the best approach, so I created a PolygonHierarchy with 6 positions that fill the globe with a color. Next I added a hole of a rectangle inside the U.S. that I thought would be a hole within this polygon.

So, this is what it looks like when I fill the globe, which appears to work okay except it takes 10+ seconds to render, when compared to 1 second for a normal RectanglePolygon:

[![](https://lh3.googleusercontent.com/-mi-1E87MZSQ/VW3sAI65k8I/AAAAAAAAAcY/hg9Mtc2sPF0/s320/filled_globe.png)](https://lh3.googleusercontent.com/-mi-1E87MZSQ/VW3sAI65k8I/AAAAAAAAAcY/hg9Mtc2sPF0/s1600/filled_globe.png)

Next, when I add a rectangle hole (taken from the original Polygon sandcastle demo) in the U.S., I see the following unexpected result:

[![](https://lh3.googleusercontent.com/-6w--o2dL3JY/VW3sTnkF6eI/AAAAAAAAAcg/goUTzBH-OWo/s320/polygon_hierarchy_hole.png)](https://lh3.googleusercontent.com/-6w--o2dL3JY/VW3sTnkF6eI/AAAAAAAAAcg/goUTzBH-OWo/s1600/polygon_hierarchy_hole.png)

However, I expected to see something like the following (except the non-hole polygon fills the rest of the globe):

[![](https://lh3.googleusercontent.com/-KTsUnUvEYb8/VW3syzzE9zI/AAAAAAAAAco/ATIvB6t8tIU/s1600/expected.png)](https://lh3.googleusercontent.com/-KTsUnUvEYb8/VW3syzzE9zI/AAAAAAAAAco/ATIvB6t8tIU/s1600/expected.png)

Here’s a [Github gist of the Sandcastle code](https://gist.github.com/minhongrails/b7e5fea5813cbe9ecfe5) that can illustrate the above problems (PolygonHierarchy takes too long to render when compared to a normal RectanglePolygon and holes don’t appear properly?): [https://gist.github.com/minhongrails/b7e5fea5813cbe9ecfe5](https://gist.github.com/minhongrails/b7e5fea5813cbe9ecfe5)

Does anyone know of any alternative approaches? I was thinking of just creating my own polygon that replicates the PolygonHierarchy but it would be nice to use the existing API if possible.

Thanks!

Minh

---

<div class="post-metadata">

**Author:** ![Michael\_Lodge-Paoli1](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@Michael\_Lodge-Paoli1](https://community.cesium.com/u/Michael_Lodge-Paoli1)\
**Post date:** [June 4, 2015, 8:25pm UTC](https://community.cesium.com/t/coloring-everything-outside-of-a-polygon/2588/2 "2015-06-04T20:25:42Z")

</div>

var viewer = new Cesium.Viewer(‘cesiumContainer’);

viewer.entities.add({  
name : ‘Positive Longitude’,  
polygon : {  
hierarchy : {  
positions : Cesium.Cartesian3.fromDegreesArray([ 0, 80,  
0,-80,  
179.9999,-80,  
179.9999, 80])  
},  
material : Cesium.Color.BLUE.withAlpha(0.5)  
}  
});

viewer.entities.add({  
name : ‘Negative Longitude’,  
polygon : {  
hierarchy : {  
positions : Cesium.Cartesian3.fromDegreesArray([ -179.9999, 80,  
-179.9999,-80,  
0.0 ,-80,  
0.0 , 80])  
},  
material : Cesium.Color.BLUE.withAlpha(0.5)  
}  
});

``

It’s not really a bug as when you try to create a polygon it determines if your going to be going east or west to fill, so if you go beyond 180 degrees for your width it’s going to switch to filling in via the smaller area.

To work around that you can create 2 polygons that wrap the globe.

---

<div class="post-metadata">

**Author:** ![Minh\_Nguyen](https://avatars.discourse-cdn.com/v4/letter/m/ec9cab/32.png) [@Minh\_Nguyen](https://community.cesium.com/u/Minh_Nguyen)\
**Post date:** [June 4, 2015, 9:59pm UTC](https://community.cesium.com/t/coloring-everything-outside-of-a-polygon/2588/3 "2015-06-04T21:59:23Z")

</div>

```auto
Thanks Mike for your response, you're always so helpful! :)

I don't think I'm understanding the PolygonHierarchy correctly but if I add holes to the PolygonHierarchy, shouldn't it create a hole within the polygon? For example, I modified the second part of your sample to add a hole (I also created a [Sandcastle Github gist here](https://gist.github.com/minhongrails/fea0dd84b917cf9cbb9c)):

```

viewer.entities.add({  
name : ‘Negative Longitude’,  
polygon : {  
hierarchy : {  
positions : Cesium.Cartesian3.fromDegreesArray([ -179.9999, 80,  
-179.9999,-80,  
0.0 ,-80,  
0.0 , 80])  
},  
material : Cesium.Color.BLUE.withAlpha(0.5)  
}  
});

```auto

However, I see the following result:

```

[![](https://lh3.googleusercontent.com/-h6bXIg51wH0/VXDCgkob5kI/AAAAAAAAAdI/9xHXe0ZXY98/s320/Screen%2BShot%2B2015-06-04%2Bat%2B5.26.11%2BPM.png)](https://lh3.googleusercontent.com/-h6bXIg51wH0/VXDCgkob5kI/AAAAAAAAAdI/9xHXe0ZXY98/s1600/Screen%2BShot%2B2015-06-04%2Bat%2B5.26.11%2BPM.png)

```auto

```

Shouldn’t the “Negative Longitude” entity still show the entity except for the rectangle hole? I tried it with other polygons that yielded similar results. I’m also still seeing a ~4 second delay before the polygons are rendered (this is faster than my previous example of a single polygon, which took ~8-9 seconds) so I’m thinking maybe it has something to do with the PolyHierarchy and its usage of Triangulation by Ear Clipping by David Eberly (I saw this mentioned in the [PolygonGeometry](https://github.com/AnalyticalGraphicsInc/cesium/blob/1.10/Source/Core/PolygonGeometry.js) source)?

At any rate, I’ve been exploring alternatives to using the PolygonHierarchy. In particular, I’m working on using the [earcut](https://github.com/mapbox/earcut) library to triangulate a polygon representation of the globe with holes. This library I believe also uses David Eberly’s implementation but has some optimizations from [FIST](http://www.cosy.sbg.ac.at/~held/projects/triang/triang.html) as well.

Alternatively I was also looking at maybe using the [SingleTileImageryProvider](https://cesiumjs.org/Cesium/Build/Documentation/SingleTileImageryProvider.html) but from a quick glance it appears to only support rectangles while I need to support arbitrary polygons and circles.

```auto

```

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [June 5, 2015, 12:57am UTC](https://community.cesium.com/t/coloring-everything-outside-of-a-polygon/2588/4 "2015-06-05T00:57:38Z")

</div>

This looks like a bug in the triangulation code, so I submitted the following issue for us to look at: [https://github.com/AnalyticalGraphicsInc/cesium/issues/2788](https://github.com/AnalyticalGraphicsInc/cesium/issues/2788)

mapbox’s earcut actually uses the same algorithm that we do. We looked at using it in Cesium at one point but it actually failed in many cases. It’s entirely possible they’ve improved it since then but I’m not sure.

---

<div class="post-metadata">

**Author:** ![Michael\_Lodge-Paoli1](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@Michael\_Lodge-Paoli1](https://community.cesium.com/u/Michael_Lodge-Paoli1)\
**Post date:** [June 5, 2015, 2:15am UTC](https://community.cesium.com/t/coloring-everything-outside-of-a-polygon/2588/5 "2015-06-05T02:15:55Z")

</div>

I try 🙂

I believe the speed issue is because of the sheer volume of the global polygon(s). I haven’t tried, but I wondering if more smaller polygons would speed up the rendering. I don’t know if there is a better way to accomplish your goals. Hopefully some others in the forum can chime in with some advise.

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [June 6, 2016, 7:04pm UTC](https://community.cesium.com/t/coloring-everything-outside-of-a-polygon/2588/6 "2016-06-06T19:04:13Z")

</div>

FYI, this issue has been fixed and will be part of Cesium 1.23 on July 1st. See [https://github.com/AnalyticalGraphicsInc/cesium/pull/3998](https://github.com/AnalyticalGraphicsInc/cesium/pull/3998) for details.