Skip to content

Model Dimensions

Model dimensions can be used to define dropdown menus in the workbench that update model JSON - think of it as a dropdown that patches the model JSON with a new value. This is useful for changing the appearance of a dataset, such as changing the colourMap for a CSV.

Basic example

For example - this renders a new drop down called "Color" that changes the colorPalette trait - test link

{
    "type": "csv",
    "url": "test/NSW_LGA_NEXIS_201212.csv",
    "name": "NSW LGA NEXIS 2012",
    "modelDimensions": [
        {
            "id": "cols",
            "name": "Color",
            "selectedId": "Red",
            "options": [
                {
                    "id": "Red",
                    "value": {
                        "defaultStyle": {
                            "color": {
                                "colorPalette": "Reds"
                            }
                        }
                    }
                },
                {
                    "id": "Blue",
                    "value": {
                        "defaultStyle": {
                            "color": {
                                "colorPalette": "Blues"
                            }
                        }
                    }
                }
            ]
        }
    ]
}

Example with Mustache template

Model dimensions also supports the use of Mustache templates - this means you can refer to other parts of the model JSON in the value of the model dimension. For example, this changes the colorPalette trait based on the value of another trait colorPalette2:

{
    "type": "csv",
    "url": "test/NSW_LGA_NEXIS_201212.csv",
    "name": "NSW LGA NEXIS 2012",
    "modelDimensions": [
        {
            "id": "Cols",
            "selectedId": "Red",
            "options": [
                {
                    "id": "Red",
                    "value": {
                        "defaultStyle": {
                            "color": {
                                "colorPalette": "{{modelDimensions.0.selectedId}}"
                            }
                        }
                    }
                },
                {
                    "id": "Blue",
                    "value": {
                        "defaultStyle": {
                            "color": {
                                "colorPalette": "{{modelDimensions.0.selectedId}}"
                            }
                        }
                    }
                }
            ]
        }
    ]
}

This is a silly example - but the template approach means you can have "interaction" between modelDimensions

{
    ...,
    "modelDimensions": [
        {
            "id": "some-dim",
            "selectedId": "some-option",
            "options": [
                {
                    "id": "some-option",
                    "value": {
                        "url": "https://example.com/{{modelDimensions.0.selectedId}}-and-{{modelDimensions.1.selectedId}}.geojson"
                    }
                },
                ...
            ]
        }
    ],
    ...
}

Default selectedId

It is important to note that the selectedId does not apply/update the model JSON when the model is first loaded. So it is best to make sure that the selectedId matches your default model JSON.