UI

User Interface configuration

UI JSON tree

"ui": {
"fullscreen": ...,
"theme": ...,
"logoUrl": ...,
"title": ...,
"restrictNavigation": ...,
"failureFeedback": {
"failureMessage": ...,
"failureImageUrl": ...
},
"appBar": {
"sideMenu": ...,
"geoSearch": ...,
"basemap": ...,
"layers": ...
},
"navBar": {
"extra": ...
},
"sideMenu": {
"logo": ...,
"items": [ ]
},
"about": {
"content": ...,
OR
"folderName": ...
},
"help": {
"folderName": ...,
},
"legend": {
"reorderable": ...,
"allowImport": ...,
"isOpen": {
"large": ...,
"medium": ...,
"small": ...
}
},
"tableIsOpen": {
"id": ...,
"large": ...,
"medium": ...,
"small": ...
}
}

ui

User Interface configuration.

Type	Author section	Advance	Required
object	UI	-	-

⬆️ back to UI

ui:fullscreen

Indicates viewer takes up entire viewport at first load.

Type	Default value	Example	Author section	Advance	Required
boolean	`false`	`false`	UI/General	-	-

⬆️ back to UI

ui:theme

UI theme of the viewer. For now, only "default" value is available

Type	Default value	Example	Author section	Advance	Required
string	`"default"`	`"default"`	UI/TBD	-	-

⬆️ back to UI

ui:logoUrl

An optional image to be used in the place of the default viewer logo.

Type	Default value	Example	Author section	Advance	Required
string	-	`"data:image/png;base64,image encoded"`	UI/Side Menu	Yes	-

⬆️ back to UI

ui:title

An optional title to be used in the place of the default viewer title.

Type	Default value	Example	Author section	Advance	Required
string	-	`My custom title`	UI/Side Menu	-	-

⬆️ back to UI

ui:restrictNavigation

Will restrict the user from panning beyond the maximum extent.

Type	Default value	Example	Author section	Advance	Required
boolean	`false`	`false`	UI/Navigation	-	-

⬆️ back to UI

ui:failureFeedback

Failure information.

Type	Author section	Advance	Required
object	UI/General	Yes	-

ui:failureFeedback:failureMessage

An optional message to be used in place of the failure message.

Type	Default value	Example	Author section	Advance	Required
string	-	`"That's a fail :-("`	UI/General	Yes	-

ui:failureFeedback:failureImageUrl

An optional image to be used in place of the failure Image.

Type	Default value	Example	Author section	Advance	Required
string	-	`"https://path2Image/MyFailureImage.gif"`	UI/General	Yes	-

⬆️ back to UI

ui:appBar

Provides configuration to the main app toolbar. If not supplied, the default appbar controls are displayed. To completely hide the toolbar, provide the following: { sideMenu: false, geoSearch: false, layers: false }.

Type	Author section	Advance	Required
object	UI/Application Bar	-	-

ui:appBar:sideMenu

Shows the side menu button in the main app toolbar.

Type	Default value	Example	Author section	Advance	Required
boolean	`true`	`true`	UI/Application Bar	-	-

ui:appBar:geoSearch

Shows the geosearch button in the main app toolbar. The button will be hidden if geosearch component is disabled or no search service URLs are provided.

Type	Default value	Example	Author section	Advance	Required
boolean	`true`	`true`	UI/Application Bar	-	-

ui:appBar:basemap

Shows the basemap selector button in the main app toolbar.

Type	Default value	Example	Author section	Advance	Required
boolean	`true`	`true`	UI/Application Bar	-	-

ui:appBar:layers

Shows the layers button in the main app toolbar.

Type	Default value	Example	Author section	Advance	Required
boolean	`true`	`true`	UI/Application Bar	-	-

⬆️ back to UI

ui:navBar

Provides configuration to the nav bar. If not supplied the default nav bar buttons are shown.

Type	Author section	Advance	Required
object	UI/Navigation	-	-

ui:navBar:extra

Set visible navigation bar buttons. Possible values: "geoLocator", "home", "basemap", "help", "fullscreen", "geoSearch", "sideMenu", "layers"

Type	Default value	Example	Author section	Advance	Required
array	`["fullscreen", "geoLocator", "home", "help"]`	`["home", "help", "fullscreen", "geoSearch", "sideMenu", "layers"]`	UI/Navigation	-	-

⬆️ back to UI

ui:sideMenu

Specifies which options are available in the left side menu.

Type	Author section	Advance	Required
object	UI/Side Menu	-	-

ui:sideMenu:logo

Indicates if the logo should be shown in the left side menu.

Type	Default value	Example	Author section	Advance	Required
boolean	`true`	`true`	UI/Side Menu	Yes	-

ui:sideMenu:items

Side Menu set of buttons. Divide the menu using array symbols []. Possible values are "layers", "basemap", "geoSearch", "about", "fullscreen", "export", "share", "touch", "help", "language", "plugins"

Type	Default value	Example	Author section	Advance	Required
array	`[["layers", "basemap"], ["fullscreen", "export", "share", "touch", "help", "about"], ["language"], ["plugins"]]`	`[["layers", "basemap"], ["fullscreen", "export", "about"], ["language"]]`	UI/Side Menu	-	-

⬆️ back to UI

ui:about

Specifies the location/content of the about section.

Type	Author section	Advance	Required
object	UI/Side Menu	-	-

ui:about:content

The content of the about section.

Type	Default value	Example	Author section	Advance	Required
string	-	`"This is about about"`	UI/Side Menu	-	-

ui:about:folderName

Help folder name which contains the about file(s) and image(s). The viewer will look inside a folder named about for the specified folder name (e.g. /about/aboutisHere). Afterward, it'll check for a markdown file named en-CA.md if you are in the English flavor of the viewer and fr-CA.md for the French. Images need to reside inside the specified folder.

Type	Default value	Example	Author section	Advance	Required
string	-	`aboutIsHere`	UI/Side Menu	-	-

⬆️ back to UI

ui:help

Specifies details for the Help section.

Type	Author section	Advance	Required
object	UI/Side Menu	Yes	-

ui:help:folderName

Help folder name which contains the help description and image(s). The viewer will look inside a folder named help for the specified folder name (e.g. /help/helpIsHere). Afterward, it'll check for a markdown file named en-CA.md if you are in the English flavor of the viewer and fr-CA.md for the French. Images need to reside inside the specified folder. NOTE The viewer has already a default help. Consequently, you will use this parameter only if you want a custom help.

Type	Default value	Example	Author section	Advance	Required
string	-	`HelpIsHere`	UI/Side Menu	Yes	Yes

⬆️ back to UI

ui:legend

Specifies options for the legend like reordering, importing, etc.

Type	Author section	Advance	Required
object	UI/General	-	-

ui:legend:reorderable

Specifies if the items in the legend can be reordered; structured legend ignores this property.

Type	Default value	Example	Author section	Advance	Required
boolean		`true`	`true`	UI/General	-

ui:legend:allowImport

Specifies if the user-added layers are allowed.

Type	Default value	Example	Author section	Advance	Required
boolean	`true`	`true`	UI/General	-	-

ui:legend:isOpen

Specifies whether the legend is opened by default on initial loading of the map for small, medium, and large viewports. ||| UI/General.

Type	Author section	Advance	Required
object	UI/General	-	-

ui:legend:isOpen:large

Whether the legend is opened by default on initial loading of the map for large viewports.

Type	Default value	Example	Author section	Advance	Required
boolean	`false`	`false`	UI/General	-	-

ui:legend:isOpen:medium

Whether the legend is opened by default on initial loading of the map for medium viewports.

Type	Default value	Example	Author section	Advance	Required
isOpen : medium	boolean	`false`	`false`	UI/General	-

ui:legend:isOpen:small

Whether the legend is opened by default on initial loading of the map for small viewports.

Type	Default value	Example	Author section	Advance	Required
boolean		`false`	`false`	UI/General	-

⬆️ back to UI

ui:tableIsOpen

A set of service endpoints used by the viewer.

Type	Author section	Advance	Required
object	UI/General	Yes	-

Type	Default value	Example	Author section	Advance	Required
tableIsOpen : id	string	The id of the layer for referencing within the viewer.	-	`"mylayerID"`	UI/General

ui:tableIsOpen:large

Whether the table panel is opened by default on initial loading of the map for large viewports.

Type	Default value	Example	Author section	Advance	Required
boolean	`false`	`false`	UI/General	Yes	-

ui:tableIsOpen:medium

Whether the table panel is opened by default on initial loading of the map for medium viewports.

Type	Default value	Example	Author section	Advance	Required
boolean	`false`	`false`	UI/General	Yes	-

ui:tableIsOpen:small

Whether the table panel is opened by default on initial loading of the map for small viewports.

Type	Default value	Example	Author section	Advance	Required
boolean	`false`	`false`	UI/General	Yes	-

⬆️ back to UI

Annex

ui : fullscreen

    "ui"{
        ...,
        "fullscreen": true,
        ...
    }

⬆️ back to fullscreen

ui : theme

    "ui"{
        ...,
        "theme": "default",
        ...
    }

⬆️ back to theme

ui : logoUrl

Note: if you want your custom logo to be shown, you have to set "sideMenu" {"logo": true} (see sideMenu)

    "ui"{
        ...,
        "logoUrl": "data:image/png;base64,image encoded",
        ...
    }

⬆️ back to logoUrl

ui : title

    "ui"{
        ...,
        "title": "Custom title",
        ...
    }

title

⬆️ back to title

ui : restrictNavigation

    "ui"{
        ...,
        "restrictNavigation": true,
        ...
    }

⬆️ back to restrictNavigation

ui : failureFeedback

    "ui"{
        ...,
        "failureFeedback": {
            "failureMessage": "That's a fail :-(",
            "failureImageUrl":"https://files.gitter.im/AleksueiR/eR5s/dinoscream.gif"
        },
        ...
    }

failureFeedback

⬆️ back to failureFeedback

ui : appBar

The application bar could be found at the top left corner of the viewer.

    "ui"{
        ...,
        "appBar": {
            "sideMenu": true,
            "geoSearch": true,
            "basemap": true,
            "layers": true
        },
        ...
    }

Putting false to an element will hide it. Also, basemap button will appear only after layers button has been pushed.

appBar

⬆️ back to appBar

ui : navBar

The application bar could be found at the bottom right corner of the viewer.

    "ui"{
        ...,
        "navBar": {
            "extra": ["fullscreen", "geoLocator", "home", "help", "basemap", "geoSearch", "sideMenu", "layers"]
        },
        ...
    }

navBar

⬆️ back to navBar

ui : sideMenu

The sidemenu can be accessed through button.

This code snippet will generate a sidemenu containing four categories with a title and a logo at the top. A custom logo can be defined here and a custom title here.

    "ui"{
        ...,
        "sideMenu": {
            "logo": true,
            "items": [["layers", "basemap"], ["fullscreen", "export", "share", "touch", "help"], ["language"], ["plugins"]]
        },
        ...
    }

sideMenu

⬆️ back to sideMenu

ui : about

The about section can be accessed in the sidemenu. NOTE You can't put both content and folderName they are mutually exclusive.

    "ui"{
        ...,
        "about": {
            "content": "This is about the about section"
            OR
            "folderName": "indexOne"
        },
        ...
    }

Here's an example with content. ui-about-content.gif

about content

Here's an example with a folderName. The folder is structured like this:

about\
    indexOne\
        images\
            canada.png
        en-CA.md
        fr-CA.md

about folderName

⬆️ back to about

ui : help

The help section can be accessed in the sidemenu or in the navigation bar.

    "ui"{
        ...,
        "help": {
            "folderName": "myHelp"
        },
        ...
    }

Here's the corresponding files and folders structure:

help\
    myHelp\
        images\
            image1.png
            image2.png
            ...
        en-CA.md
        fr-CA.md

⬆️ back to help

ui : legend

    "ui"{
        ...,
        "legend": {
            "isOpen": {
                "large": true,
                "medium": true,
                "small": false
        },
        ...
    }

⬆️ back to legend

ui : tableIsOpen

    "ui"{
        ...,
        "tableIsOpen": {
            "id": "DateLayer",
            "large": true,
            "medium": true,
            "small": false
        },
        ...
    }