Last modified: May 28, 2024

Map

🚧 This documentation is a work in progress.

Usage

Anatomy

Properties

The following is an autogenerated list of the properties available for Map based on the component’s JSON schema file (linked below).

We are currently updating how we implement components, and the list of properties may not be entirely accurate.

JSON schema

Required properties: id,type

PropertyTypeDescription

id

stringThe component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with <dash><number>.

type

stringThe component type.

basicDataModelBindings

objectData model bindings for component
basicDataModelBindings.simpleBindingstringData model binding for components connection to a single field in the data model

basicTextResources

objectText resource bindings for a component.
basicTextResources.descriptionstringThe description text for the component
basicTextResources.helpstringThe help text for the component
basicTextResources.shortNamestringThe short name for the component (used in validation messages) (optional). If it is not specified, 'title' text is used.
basicTextResources.tableTitlestringThe text shown in column title when component is used in repeating group (optional). If it is not specified, 'title' text is used.
basicTextResources.titlestringThe title/label text for the component

required

booleanBoolean or expression indicating if the component is required when filling in the form. Defaults to false.

readOnly

booleanBoolean or expression indicating if the component should be presented as read only. Defaults to false. <br /> <i>Please note that even with read-only fields in components, it may currently be possible to update the field by modifying the request sent to the API or through a direct API call.<i/>

centerLocation

objectCenter location of the map
centerLocation.latitudenumberSet the latitude coordinate
centerLocation.longitudenumberSet the longitude coordinate

grid

objectSettings for the components grid. Used for controlling horizontal alignment.
Example(s): {xs: 12}
gridSettings.innerGridgridPropsOptional grid for inner component content like input field or dropdown. Used to avoid inner content filling the component width.
Example(s): {xs: 12}
See: gridProps
gridSettings.labelGridgridPropsOptional grid for the component label. Used in combination with innerGrid to align labels on the side.
Example(s): {xs: 12}
See: gridProps

hidden

booleanBoolean value or expression indicating if the component should be hidden. Defaults to false.

layers

objectMap layer
layers.attributionstringAscribing a work or remark to a particular unit for recognition
layers.subdomainsarrayList of subdomains. Used for balancing the load on different map tiling servers. A random one will replace {s} in the defined url.
layers.urlstringUrl to a map tile. {z}/{x}/{y} will be replaced with tile coordinates, {s} will be replaced with a random subdomain if subdomains are given

pageBreak

object
pageBreak.breakAfterstringPDF only: Value or expression indicating whether a page break should be added after the component. Can be either: 'auto' (default), 'always', or 'avoid'.
Example(s): auto,always,avoid
pageBreak.breakBeforestringPDF only: Value or expression indicating whether a page break should be added before the component. Can be either: 'auto' (default), 'always', or 'avoid'.
Example(s): auto,always,avoid

renderAsSummary

booleanBoolean or expression indicating if the component should be rendered as a summary. Defaults to false.

triggers

arrayAn array of actions that should be triggered when data connected to this component changes.

zoom

numberadjusts the default map-zoom

Configuration

We are currently updating Altinn Studio Designer with more configuration options! The documentation is continuously updated, and there may be more settings available than what is described here, and some settings may be in beta version.

Add component

    You can add a component in Altinn Studio Designer by dragging it from the list of components to the page area. Selecting the component brings up its configuration panel.

    Basic component:

    App/ui/layouts/{page}.json
    {
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
  {
    "data": {
      "layout": [
        {
          // Basic component (required properties)
        }
      ]
    }
  }
}

    Examples