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 Default
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: vp.width === 'compact',
            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: vp.width === 'compact' ? 'bottomleft' : 'bottom',
                translate: { x: (vp.width === 'compact' ? 10 : 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

In the above default configuration, the variable vp corresponds to a call to the 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"

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

Last modified: May 09, 2019