# GeoJsonDataSource should be displayed with some height

**URL:** <https://community.cesium.com/t/geojsondatasource-should-be-displayed-with-some-height/4234>\
**Category:** CesiumJS\
**Created:** [June 13, 2016, 2:19pm UTC](https://community.cesium.com/t/geojsondatasource-should-be-displayed-with-some-height/4234 "2016-06-13T14:19:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![therrler90](https://avatars.discourse-cdn.com/v4/letter/t/977dab/32.png) [@therrler90](https://community.cesium.com/u/therrler90)\
**Post date:** [June 13, 2016, 2:19pm UTC](https://community.cesium.com/t/geojsondatasource-should-be-displayed-with-some-height/4234/1 "2016-06-13T14:19:32Z")

</div>

Hi, im new to Cesium. I want to add a GeoJsonDataSource. This worked fine. But is it possible that it "flies" a bit over the earth? It should have some height, like the polygons where i can say with wyoming.polygon.height = 250000; that the height is 250000.

heres my code for the moment:

\<script\>  
&nbsp;&nbsp;var viewer = new Cesium.Viewer('cesiumContainer');  
&nbsp;&nbsp;var camera = viewer.camera;

&nbsp;&nbsp;camera.setView({

&nbsp;&nbsp;&nbsp;&nbsp;destination : Cesium.Cartesian3.fromDegrees(8.53, 51.94, 15000.0),  
&nbsp;&nbsp;&nbsp;&nbsp;orientation: {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;heading : 0,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pitch : Cesium.Math.toRadians(-60),

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;roll : 0.0  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;});

&nbsp;&nbsp;loadMyData();

&nbsp;&nbsp;function loadMyData() {  
&nbsp;&nbsp;&nbsp;&nbsp;var myData = Cesium.GeoJsonDataSource.load('02tracksAny.json');

&nbsp;&nbsp;&nbsp;&nbsp;myData.then(function(dataSource) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewer.dataSources.add(dataSource);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Get the array of entities  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var entities = dataSource.entities.values;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i \< entities.length; i++) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var entity = entities[i];

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(entities);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// \*\*\*\*\*\*\*\*\*\*\* dieser Teil funktioniert leider nicht ; (  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var j = 0; j\< entity.polyline.positions.length; j++ ){

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var x = entity.polyline.positions[j].x;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var y = entity.polyline.positions[j].y;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var z = 20000 + (j \* 10);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;postions[j] = new Cesium.Cartesian3(x,y,z);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entity.polyline.material = new Cesium.PolylineGlowMaterialProperty({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glowPower : 0.4,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color : Cesium.Color.BLUE  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[//entity.polyline.extrudedHeight](https://entity.polyline.extrudedHeight) = 250000;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[//entity.polygon.extrudedHeight](https://entity.polygon.extrudedHeight) = entity.properties.Population / 50.0;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).otherwise(function(error){

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Display any errrors encountered while loading.  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.alert(error);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</script\>

---

<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:** [June 13, 2016, 2:59pm UTC](https://community.cesium.com/t/geojsondatasource-should-be-displayed-with-some-height/4234/2 "2016-06-13T14:59:47Z")

</div>

Hello,

Have you seen this demo: [http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=GeoJSON%20and%20TopoJSON.html&label=DataSources](http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=GeoJSON%20and%20TopoJSON.html&label=DataSources)

Example 3 will show you how to style your entities after they are loaded from the GeoJSON.

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![therrler90](https://avatars.discourse-cdn.com/v4/letter/t/977dab/32.png) [@therrler90](https://community.cesium.com/u/therrler90)\
**Post date:** [June 13, 2016, 3:10pm UTC](https://community.cesium.com/t/geojsondatasource-should-be-displayed-with-some-height/4234/3 "2016-06-13T15:10:34Z")

</div>

Hello,  
Yes i did already saw this example. But i get a error code that entity.polygon is undefinded.

My new Code:  
\<script\>  
&nbsp;&nbsp;var viewer = new Cesium.Viewer('cesiumContainer');  
&nbsp;&nbsp;var camera = viewer.camera;

&nbsp;&nbsp;camera.setView({

&nbsp;&nbsp;&nbsp;&nbsp;destination : Cesium.Cartesian3.fromDegrees(8.53, 51.94, 15000.0),  
&nbsp;&nbsp;&nbsp;&nbsp;orientation: {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;heading : 0,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pitch : Cesium.Math.toRadians(-60),

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;roll : 0.0  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;});

&nbsp;&nbsp;loadMyData();

&nbsp;&nbsp;function loadMyData() {  
&nbsp;&nbsp;&nbsp;&nbsp;var myData = Cesium.GeoJsonDataSource.load('02tracksAny.json');

&nbsp;&nbsp;&nbsp;&nbsp;myData.then(function(dataSource) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;viewer.dataSources.add(dataSource);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Get the array of entities  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var entities = dataSource.entities.values;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i \< entities.length; i++) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var entity = entities[i];

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entity.polyline.material = new Cesium.PolylineGlowMaterialProperty({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;glowPower : 0.4,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color : Cesium.Color.BLUE  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entity.polygon.extrudedHeight = 15000; }

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).otherwise(function(error){

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Display any errrors encountered while loading.  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.alert(error);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</script\>

I don't know how to fix this problem...

---

<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:** [June 13, 2016, 5:30pm UTC](https://community.cesium.com/t/geojsondatasource-should-be-displayed-with-some-height/4234/4 "2016-06-13T17:30:16Z")

</div>

Does you geojson data define a polygon or is it just the outline of shapes?