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: 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

Last modified: September 05, 2019