# Loading GeoJson with its style

**URL:** <https://community.cesium.com/t/loading-geojson-with-its-style/5780>\
**Category:** CesiumJS\
**Created:** [July 11, 2017, 3:23pm UTC](https://community.cesium.com/t/loading-geojson-with-its-style/5780 "2017-07-11T15:23:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pinkyamh](https://avatars.discourse-cdn.com/v4/letter/p/74df32/32.png) [@pinkyamh](https://community.cesium.com/u/pinkyamh)\
**Post date:** [July 11, 2017, 3:23pm UTC](https://community.cesium.com/t/loading-geojson-with-its-style/5780/1 "2017-07-11T15:23:06Z")

</div>

Hi,

I am using GeoJSON files for my project with Cesium..

so far they are all loaded as yellow, transparent buildings.  
is there a way to load the styles saved via QGIS for example,  
it saves the styles in a different layer as SLD or a .qml

Any Ideas how I can achieve my pre-customised symbology?  
or other methods to get an attribute defined style, i.e. according to height or population?

Thanks a bunch 🙂

---

<div class="post-metadata">

**Author:** ![Rachel\_Hwang](https://avatars.discourse-cdn.com/v4/letter/r/d78d45/32.png) [@Rachel\_Hwang](https://community.cesium.com/u/Rachel_Hwang)\
**Post date:** [July 11, 2017, 8:18pm UTC](https://community.cesium.com/t/loading-geojson-with-its-style/5780/2 "2017-07-11T20:18:46Z")

</div>

Hi there,

I don’t know of a way to load a style file of that format, but fortunately it’s pretty easy to style your geojson files afterwards. See this sandcastle example: [http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=GeoJSON%20and%20TopoJSON.html&label=Showcases](http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=GeoJSON%20and%20TopoJSON.html&label=Showcases)

Hope that helps,

- Rachel

---

<div class="post-metadata">

**Author:** ![pinkyamh](https://avatars.discourse-cdn.com/v4/letter/p/74df32/32.png) [@pinkyamh](https://community.cesium.com/u/pinkyamh)\
**Post date:** [July 14, 2017, 11:08am UTC](https://community.cesium.com/t/loading-geojson-with-its-style/5780/3 "2017-07-14T11:08:16Z")

</div>

Hey Rachel,

Thank you so much for your help.  
but I have one more question:  
Will the code example of (3D Tiles Feature Styling) work for GeoJson data?

particularly the function: where is colours the data according to height.  
function colorByHeight() {  
&nbsp;&nbsp;&nbsp;&nbsp;tileset.style = new Cesium.Cesium3DTileStyle({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conditions: [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;["\{height\} &gt;= 300&quot;, &quot;rgba\(45, 0, 75, 0\.5\)&quot;\], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\[&quot;{height} \>= 200", "rgb(102, 71, 151)"],  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;["\{height\} &gt;= 100&quot;, &quot;rgb\(170, 162, 204\)&quot;\], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\[&quot;{height} \>= 50", "rgb(224, 226, 238)"],  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;["\{height\} &gt;= 25&quot;, &quot;rgb\(252, 230, 200\)&quot;\], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\[&quot;{height} \>= 10", "rgb(248, 176, 87)"],  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;["${height} \>= 5", "rgb(198, 106, 11)"],  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;["true", "rgb(127, 59, 8)"]  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;});  
}

"" tileset.style = new Cesium.Cesium3DTileStyle({""  
is there any way I can apply that to GeoJson data?

---

<div class="post-metadata">

**Author:** ![Rachel\_Hwang](https://avatars.discourse-cdn.com/v4/letter/r/d78d45/32.png) [@Rachel\_Hwang](https://community.cesium.com/u/Rachel_Hwang)\
**Post date:** [July 14, 2017, 2:56pm UTC](https://community.cesium.com/t/loading-geojson-with-its-style/5780/4 "2017-07-14T14:56:08Z")

</div>

Hi there,

Unfortunately that styling language is currently something that’s unique to 3D tiles.

Best,

- Rachel

---

<div class="post-metadata">

**Author:** ![pinkyamh](https://avatars.discourse-cdn.com/v4/letter/p/74df32/32.png) [@pinkyamh](https://community.cesium.com/u/pinkyamh)\
**Post date:** [July 14, 2017, 3:27pm UTC](https://community.cesium.com/t/loading-geojson-with-its-style/5780/5 "2017-07-14T15:27:08Z")

</div>

Thank you Rachel...  
you've been a great help