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:

{
    "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.