Cesium – Styling GeoJSON by Attributes

cesiumgeojsonjavascript

Situation:

I have 30 3D heat maps (for 30 years) stored in GeoServer, my goal is to create an animation showing the change year by year. I found Cesium and was really impressed. Right now I am trying to style the GeoJSON layers according to the heat map symbol ID (a field in my layer) and I am having trouble getting it to work. Cesium has a sandbox showing an example styling GeoJSON by random colors but that's not exactly what I'm trying to do and I can't figure out what I am doing wrong. I think it has something to do with the "if" that is within "if (!color)", but again I don't know.

JS Code:

        var promise = Cesium.GeoJsonDataSource.load('My_GeoServer_GeoJSON');
        promise.then(function (dataSource) {
            viewer.dataSources.add(dataSource);
            var entities = dataSource.entities.values;
            var colorhash = {};

            for (var i = 0; i < entities.length; i++) {
                var entity = entities[i];
                var Symbol = entity.SymbolID;
                var color = colorhash[Symbol];

                if (!color) {
                    if (entity.properties.SymbolID === 0) {
                        color = Cesium.Color.FORESTGREEN.withAlpha(0.4);
                        colorhash[name] = color;
                    } else if (entity.properties.SymbolID === 1) {
                        color = Cesium.Color.GOLD.withAlpha(0.4);
                        colorhash[name] = color;
                    } else if (entity.properties.SymbolID === 2) {
                        color = Cesium.Color.ORANGERED.withAlpha(0.4);
                        colorhash[name] = color;
                    } else {
                        color = Cesium.Color.MAROON.withAlpha(0.4);
                        colorhash[name] = color;
                    }
                }
                entity.polygon.material = color;
                entity.polygon.extrudedHeight = entity.properties.Count * 20;
            }
        }).otherwise(function (error) {
            window.alert(error);
        });

Question:

Can anyone help me figure out how to style a 3D GeoJSON by attributes in Cesium? I'm 100% open to suggestions and am eager to learn!

If you need more information, let me know and I will try my best to explain.

Edit: I changed around my code a bit and I think I'm getting close but I'm not there yet!

Best Answer

I figured it out! I was on the right track with my most recent edit. I was using '===' when I should have been using '=='. Here is my final code that got me the result I wanted. If anyone has any further suggestions let me know! 

                for (var i = 0; i < entities.length; i++) {
                var entity = entities[i];
                var name = entity.properties.Name;
                var color = colorhash[name];
                var outcolor;
                var symID = entity.properties.SymbolID;

                if (!color) {
                    if (symID == 0) {
                        color = Cesium.Color.FORESTGREEN.withAlpha(0.7);
                        outcolor = Cesium.Color.FORESTGREEN.withAlpha(1.0);
                        colorhash[name] = color;
                    } else if (symID == 1) {
                        color = Cesium.Color.GOLD.withAlpha(0.7);
                        outcolor = Cesium.Color.GOLD.withAlpha(1.0);
                        colorhash[name] = color;
                    } else if (symID == 2) {
                        color = Cesium.Color.ORANGERED.withAlpha(0.7);
                        outcolor = Cesium.Color.ORANGERED.withAlpha(1.0);
                        colorhash[name] = color;
                    } else {
                        color = Cesium.Color.MAROON.withAlpha(0.9);
                        outcolor = Cesium.Color.MAROON.withAlpha(1.0);
                        colorhash[name] = color;
                    }
                }
                entity.polygon.material = color;
                entity.polygon.outlineColor = outcolor;
                entity.polygon.extrudedHeight = entity.properties.Count * 20;
            }
Related Question