# Trouble styling and hiding entity's paths

**URL:** <https://community.cesium.com/t/trouble-styling-and-hiding-entitys-paths/5190>\
**Category:** CesiumJS\
**Created:** [February 20, 2017, 10:33pm UTC](https://community.cesium.com/t/trouble-styling-and-hiding-entitys-paths/5190 "2017-02-20T22:33:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Johnknelson3](https://avatars.discourse-cdn.com/v4/letter/j/4491bb/32.png) [@Johnknelson3](https://community.cesium.com/u/Johnknelson3)\
**Post date:** [February 20, 2017, 10:33pm UTC](https://community.cesium.com/t/trouble-styling-and-hiding-entitys-paths/5190/1 "2017-02-20T22:33:19Z")

</div>

Hi all, my goal is to show arcs above the surface of the earth connecting two points. I have achieved this by emulating this example:

> **[Cesium Sandcastle](https://sandcastle.cesium.com/index.html?src=Hello%20World.html&label=All&gist=c08b0482a3a74973344637f67a0694a1)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

I am now experiencing two style issues

1. Changing an entities “show” field ONLY changes the visibility of the point which is traveling along the path, it does NOT change the visibility of the path.

2. ALL of the paths are the same color, regardless of what color I set them to. I have stepped through this code and verified many times that the rgb color values I’m passing in are distinct and valid, but every time, all of the paths assume ONE color. Interestingly enough, all of the points are assigned the correct color. Also, occasionally, when I programatically hide some lines, all of lines change to a different color at once.

I’ve included a code snippet below, which is pretty much just the sandcastle example code (big shout out to that person for the example); I’ve omitted my location calculations but that is all good and fine so far.

var startTime = that.map.viewer.clock.startTime;

var midTime = Cesium.JulianDate.addSeconds(startTime, 43200, new Cesium.JulianDate());

var stopTime = Cesium.JulianDate.addSeconds(startTime, 86400, new Cesium.JulianDate());

// CODE FOR CALCULATING POSITION (which I don’t have any issues with) GOES HERE

var color = that.getRelationshipColorByType(rel.Type, RelationshipService.CESIUM\_COLOR);

// Create a straight-line path.

var property = new Cesium.SampledPositionProperty();

var startPosition = Cesium.Cartesian3.fromDegrees(leftLocation.Longitude, leftLocation.Latitude, 0);

property.addSample(startTime, startPosition);

var stopPosition = Cesium.Cartesian3.fromDegrees(rightLocation.Longitude, rightLocation.Latitude, 0);

property.addSample(stopTime, stopPosition);

// Find the midpoint of the straight path, and raise its altitude.

var midPoint = Cesium.Cartographic.fromCartesian(property.getValue(midTime));

midPoint.height = Cesium.Math.nextRandomNumber() \* 500000 + 2500000;

var midPosition = that.map.viewer.scene.globe.ellipsoid.cartographicToCartesian(

midPoint, new Cesium.Cartesian3());

// Redo the path to be the new arc.

property = new Cesium.SampledPositionProperty();

property.addSample(startTime, startPosition);

property.addSample(midTime, midPosition);

property.addSample(stopTime, stopPosition);

if ((leftLocation != null) && (rightLocation != null)) {

/\* Update or create an Entity to show the arc \*/

// If this is already an entity, simply update it

if ((\<cesium.Viewer\>that.map.viewer).entities.getById(rel.Id) != null) {

var entity: cesium.Entity = (\<cesium.Viewer\>that.map.viewer).entities.getById(rel.Id);

entity.position = property;

}

// If it is not an entity, add it

else {

var arcEntity = that.map.viewer.entities.add({

id: rel.Id,

position: property,

// The point is optional, I just wanted to see it.

point: {

pixelSize: 8,

color: Cesium.Color.TRANSPARENT,

outlineColor: color,

outlineWidth: 3

},

// This path shows the arc as a polyline.

path: {

show: that.showRelationships,

resolution: 1200,

material: new Cesium.PolylineGlowMaterialProperty({

glowPower: 0.16,

color: color

}),

width: 10,

leadTime: 1e10,

trailTime: 1e10

}

});

}

// This is where it becomes a smooth path.

arcEntity.position.setInterpolationOptions({

interpolationDegree: 5,

interpolationAlgorithm: Cesium.LagrangePolynomialApproximation

});

Any help or pointers as to why my process might produce entities with the same color lines or lines that don’t like to be hidden or shown would be greatly appreicated! I am using Cesium 1.28 .

---

<div class="post-metadata">

**Author:** ![Johnknelson3](https://avatars.discourse-cdn.com/v4/letter/j/4491bb/32.png) [@Johnknelson3](https://community.cesium.com/u/Johnknelson3)\
**Post date:** [February 20, 2017, 11:51pm UTC](https://community.cesium.com/t/trouble-styling-and-hiding-entitys-paths/5190/2 "2017-02-20T23:51:29Z")

</div>

Update: I am also able to manually edit the color variable per entity creation within the Chrome dev tools and can confirm that the color still only applies to the point traveling along the path, while all of the paths themselves remain one color.

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [February 21, 2017, 1:59pm UTC](https://community.cesium.com/t/trouble-styling-and-hiding-entitys-paths/5190/3 "2017-02-21T13:59:35Z")

</div>

Hello,

I couldn’t reproduce either of the problems you are seeing using the code example you provided

[![](https://lh3.googleusercontent.com/-vYZovUmyk3A/WKxHS9lBuAI/AAAAAAAAK5w/dU_NELBLyIAagXovZv1MWM-xr4b1wDbEACLcB/s320/path-example.png)](https://lh3.googleusercontent.com/-vYZovUmyk3A/WKxHS9lBuAI/AAAAAAAAK5w/dU_NELBLyIAagXovZv1MWM-xr4b1wDbEACLcB/s1600/path-example.png)

I was able to hide all of the paths and points using this code:

```
viewer.entities.values.forEach(function(entity) {
    entity.show = false;
});

```

``

Try clearing your cache/cookies. Sometimes that can cause weird side effects. If that doesn’t work, try upgrading to the latest version of Cesium.

Otherwise, what browser and OS are you using? And what is your graphics card?

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![Johnknelson3](https://avatars.discourse-cdn.com/v4/letter/j/4491bb/32.png) [@Johnknelson3](https://community.cesium.com/u/Johnknelson3)\
**Post date:** [February 21, 2017, 6:41pm UTC](https://community.cesium.com/t/trouble-styling-and-hiding-entitys-paths/5190/4 "2017-02-21T18:41:14Z")

</div>

Thank you for looking into it Hannah! Clearing the cache and cookies didn’t seem to help… I will also point out that I am able to hide the lines if I execute that code in the scope of their instantiation using the entity objects I’ve created, but my code that is called back later is not hiding the whole entity. That code that hides it uses getById to retrieve an entity from my viewer.entities, that TypeScript is below:

var arcEntity: cesium.Entity = (\<cesium.Viewer\>this.map.viewer).entities.getById(rel.Id);

arcEntity.show = false;

``

I am also about to update Cesium and see if that helps at all. Still looking into coloring issue as well.

---

<div class="post-metadata">

**Author:** ![Johnknelson3](https://avatars.discourse-cdn.com/v4/letter/j/4491bb/32.png) [@Johnknelson3](https://community.cesium.com/u/Johnknelson3)\
**Post date:** [February 21, 2017, 9:24pm UTC](https://community.cesium.com/t/trouble-styling-and-hiding-entitys-paths/5190/5 "2017-02-21T21:24:47Z")

</div>

Problem solved by updating to Cesium 1.30!!! It’s possible that it could’ve been related to this: [https://github.com/AnalyticalGraphicsInc/cesium/issues/898](https://github.com/AnalyticalGraphicsInc/cesium/issues/898) “Investigate potential issues with duplicate polyline vertices”. My entities were seperate arc entiites with their own paths but were all connected, like the path of a bouncing ball. In any case, thanks for the suggestion Hannah, it saved my day!

---

<div class="post-metadata">

**Author:** ![Mark\_Erikson](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/mark_erikson/32/2024_2.png) [@Mark\_Erikson](https://community.cesium.com/u/Mark_Erikson)\
**Post date:** [February 21, 2017, 10:06pm UTC](https://community.cesium.com/t/trouble-styling-and-hiding-entitys-paths/5190/6 "2017-02-21T22:06:21Z")

</div>

Hey, I recognize that issue/thread! Not entirely sure if it’d be related here, but that was a fun issue to track down and report 🙂
