Interactive Map App Configuration

When creating an interactive map application, you have the option to pass additional configuration options to override the default setup. These options are provided as a simple object and can contain values for any one or all of the supported options as outlined below.

Configuration

The following options are supported when configuring your InteractiveMapApp instance:

Option	Type	Description
map	`object`	Configuration options for the internal `InteractiveMap` instance.
panels	`object`	Panel configurations.
panels.layers	`object`	Layers panel configuration. Refer to the Layers Panel documentation for the supported configuration options and defaults.
panels.timeline	`object`	Timeline panel configuration. Refer to the Timeline Panel documentation for the supported configuration options and defaults
panels.info	`object`	Info panel configuration. Refer to the Info Panel documentation for the supported configuration options and defaults
panels.legends	`object`	Legends panel configuration. Refer to the Legends Panel documentation for the supported configuration options and defaults
panels.search	`object`	Search panel configuration. Refer to the Search Panel documentation for the supported configuration options and defaults

The following is the default configuration object for a InteractiveMapApp instance:

{
    map: {},
    panels: {
        layers: {
            title: 'Layers',
            enabled: true,
            toggleable: false,
            className: 'app__ui-panel-layers',
            position: {
                pin: 'topright',
                translate: { x: -10, y: 10 }
            },
            icon: (`
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 80.5">
                    <g>
                        <path d="M98.5,51.3l-13.7-7.3L58,58.2c-2.5,1.3-5.2,2-8,2c-2.8,0-5.5-0.7-8-2L15.2,44.1L1.5,51.3C0.6,51.8,0,52.8,0,53.8
                            s0.6,2,1.5,2.5l43.5,23c3.2,1.7,6.9,1.7,10.1,0l43.5-23c0.9-0.5,1.5-1.4,1.5-2.5S99.4,51.8,98.5,51.3L98.5,51.3z"/>
                        <path d="M1.5,29.2l43.5,23c1.6,0.8,3.3,1.2,5,1.2c1.7,0,3.5-0.4,5-1.3l43.5-23c0.9-0.5,1.5-1.4,1.5-2.5c0-1-0.6-2-1.5-2.5L55,1.3
                            C53.5,0.4,51.7,0,50,0c-1.7,0-3.4,0.4-5,1.3l-43.5,23C0.6,24.7,0,25.7,0,26.7C0,27.8,0.6,28.7,1.5,29.2L1.5,29.2z"/>
                    </g>
                </svg>
            `)
        },
        timeline: {
            enabled: true,
            position: {
                pin: 'bottom',
                translate: { x: 0, y: -10 }
            }
        },
        info: {
            enabled: true,
            position: {
                pin: 'topleft',
                translate: { x: 10, y: 10 }
            },
            marker: {
                svg: {
                    shape: {
                        type: 'circle',
                        fill: {
                            color: '#15a8e1'
                        },
                        stroke: {
                            color: '#ffffff',
                            width: 2
                        }
                    }
                },
                size: [20, 20]
            }
        },
        legends: {
            title: 'Legends',
            enabled: true,
            toggleable: true,
            position: {
                pin: 'bottomright',
                translate: { x: -10, y: -10 }
            },
            icon: (`
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 90 90">
                    <g>
                        <path d="M45,9c19.9,0,36,16.1,36,36S64.9,81,45,81S9,64.9,9,45C9,25.1,25.1,9,45,9 M45,0C20.1,0,0,20.1,0,45s20.1,45,45,45
                            s45-20.1,45-45C90,20.1,69.9,0,45,0z"/>
                        <path d="M48.7,29.3c0,1-0.4,1.9-1.1,2.7c-0.7,0.7-1.6,1.1-2.6,1.1c-0.5,0-0.9-0.1-1.4-0.3c-0.4-0.2-0.8-0.5-1.2-0.8
                            c-0.3-0.3-0.6-0.7-0.8-1.2c-0.2-0.5-0.3-0.9-0.3-1.5c0-0.5,0.1-0.9,0.3-1.3c0.2-0.4,0.5-0.8,0.8-1.2c0.3-0.3,0.7-0.6,1.2-0.8
                            c0.4-0.2,0.9-0.3,1.4-0.3s0.9,0.1,1.4,0.3c0.4,0.2,0.8,0.5,1.2,0.8c0.4,0.3,0.6,0.7,0.8,1.1C48.6,28.3,48.7,28.8,48.7,29.3
                            L48.7,29.3z M48.3,59.8c0,1.1-0.3,2-0.9,2.6c-0.6,0.7-1.4,1-2.4,1s-1.8-0.3-2.4-1c-0.6-0.7-0.9-1.5-0.9-2.6v-18
                            c0-1.1,0.3-2,0.9-2.6c0.6-0.7,1.4-1,2.4-1s1.8,0.3,2.4,1c0.6,0.7,0.9,1.5,0.9,2.6V59.8z"/>
                    </g>
                </svg>
            `)
        },
        search: {
            enabled: true,
            account: opts.account,
            position: {
                pin: 'top',
                translate: { y: 10 }
            }
        }
    }
}

Viewport-Based Layout

When configuring your interactive map application's panel layout, you may want to adjust the layout based on the device and/or screen size being used. The SDK includes viewportSizeClass() that is available in the layout utility functions. This allows different panel layout configurations based on the browser's viewport size to handle various phone, tablet and desktop screens:

const vp = viewportSizeClass();
console.log(vp.width);    // outputs "desktop"
console.log(vp.height);   // outputs "normal"

This allows you to change the layout and sizing of elements based on the resulting screen size class on the vp variable above, such as the position of a panel in the interactive map application:

position: {
    pin: vp.width === 'compact' ? 'bottomleft' : 'bottom',
    translate: { x: (vp.width === 'compact' ? 10 : 0), y: -10 }
}

A value of normal, compact or desktop is returned for both the width and height dimensions depending on the available width and height of the browser viewport:

Class	Size
`normal`	> 500px and < 1000px
`compact`	<= 500px
`desktop`	>= 1000px

Interactive Map App Events