Sand castle: load geojson and extrude code snippet

CesiumJS
1

Thank you for this community.

I am aware of all the tutorials you have available. Thank you.
Its a bit intimidating; the sheer quantity is overwhelming.

Do you have a ready made code snippet that does the following please:

  • Read geojson from ION My Assets;
  • extrude based on a property (a key in the geojson * a certain value)
2

Hi,

Welcome to the community.

I am not aware of a code snippet that does exactly that, but I can point you to one that extrudes, and another for loading assets from Ion.

Iā€™m also going to transfer this to the CesiumJS category since it is more relevant to how to accomplish something in the CesiumJS viewer. That will give it more visibility to people who might be able to point you to a single example.

Loading from Ion

For loading assets from Ion there is a code example in the bottom of the assets detail panel (shown when you select an asset from the My Assets page). This will give you a short example of how to load that particular asset. You can also click Open complete code example to see it in a sandcastle demo.

Extruding GeoJSON

In the GeoJSON and TopoJSON example if you click the Custom Styling button you will see the GeoJSON extruded based on a property value.

1 Like
3

Thank you.
Although the geojson does not extrude.

Cesium.Ion.defaultAccessToken = 'token here';

var viewer = new Cesium.Viewer('cesiumContainer');

// Replace 'YOUR_ASSET_ID' with the ID of your uploaded GeoJSON asset on Cesium Ion
var assetId = 2436204;

var dataSourcePromise = Cesium.IonResource.fromAssetId(assetId)
    .then(function (resource) {
        return Cesium.GeoJsonDataSource.load(resource);
    })
    .then(function (dataSource) {
        viewer.dataSources.add(dataSource);

        // Extrude buildings based on 'building:levels' property multiplied by 2.5
        var entities = dataSource.entities.values;
        for (var i = 0; i < entities.length; i++) {
            var entity = entities[i];
            var buildingLevels = entity.properties.getValue('building:levels');

            if (Cesium.defined(buildingLevels) && !isNaN(buildingLevels)) {
                // Check if the entity has a polygon geometry, if not, create one
                if (!Cesium.defined(entity.polygon)) {
                    entity.polygon = {};
                }

                // Extrude each building based on building:levels * 2.5
                var extrudedHeight = buildingLevels * 2.5;
                entity.polygon.extrudedHeight = extrudedHeight;
            }
        }

        viewer.zoomTo(dataSource);
    })
    .catch(function (error) {
        console.error(error);
    });

My challenge might be the .GeoJSON:

"features": [
    {
      "type": "Feature",
      "properties": {
        "@id": "relation/12212783",
        "addr:city": "Cape Town",
        "addr:housename": "Post Graduate Residence",
        "addr:postcode": "7530",
        "addr:suburb": "Bellville",
        "building": "dormitory",
        "building:levels": "2",
        "residential": "university",
        "type": "multipolygon"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [

As you can see the extrude height is building:levels.
Could this be the challenge? How do I share the snippet without revealing my access token?