Define a layout

Important: The layout has an items array that contains the components to display. Also, the layout displays the first component in items where when is true. So, if you put multiple components in items, you're only going to see one component. So, you must use a Container if you want to show multiple components.

The following example shows the basics of how to define a simple version of a Marker layout in an APL document. This layout takes a string parameter (markerURL) and assigns the parameter value to the "imageSource" property of an AlexaImage to display the marker. The reference to the parameter value is in the form of ${parameterName} that in this case is ${markerURL}. In the following example, observe that this AlexaImage component still uses an @imgHeight resource set previously:

"layouts": {
        "Marker": {
            "parameters": [
                {
                    "name": "markerURL",
                    "type": "string",
                    "description": "URL of marker"
                }
            ],
            "items": [
                {
                    "type": "AlexaImage",
                    "imageSource": "${markerURL}",
                    "imageRoundedCorner": false,
                    "imageHeight": "@imgHeight",
                    "imageAspectRatio": "square",
                    "imageBlurredBackground": false
                }
            ]
        }
    }

You can add more parameters if you need them by using the following format:

"parameters": [
                {
                    "name": "parameterName1",
                    "type": "string",
                    "description": "…"
                },
                {
                    "name": " parameterName2",
                    "type": "string",
                    "description": "…"
                }

            ]

You can also use other types, such as Booleans, numbers, and so on. For details, see APL Layout Parameters.