Plugin Settings

Plugins can implement a number of properties and functions to configure how the framework interacts with it.

toolbarName: The name that will appear in the sidebar.

fullName: The text that will appear when hovering over the plugin icon

hasHelp: (optional) true or false, does the app provide in-app help? If so, the framework will add a help icon to the app container. See [In App Help](#In App Help)

allowIdentifyWhenActive: true|false, Should the framework call an identify() function on the plugin to get info back for a map click?

size: (optional) 'small', 'large', or 'custom', a string which specifies the width of the plugin. If the size property is not provided, plugin will default to 'small'. If 'custom' is provided, the plugin should specify a width property.

width: (optional, used for plugins with size of 'custom') number in pixels for the width of a plugin with a custom size. Ignored if size is set to 'small' or 'large'. This can be be changed dynamically when then app is executing by calling the app.resize.setWidth(newSize) method. It takes the string 'small' or 'large' or in integer supplied width, which implies 'custom'.

hasCustomPrint: (optional) true or false, specifies if the plugin has it's own print workflow. If true, a print button will be added to the plugin title bar that, when clicked, will launch a custom print workflow provided by the plugin. The plugin print process is documented in full here.

hideMinimizeButton: (optional) true or false, specifies if the plugin minimize button is shown.

Deprecated resizable: (optional) true or false, specifies if the plugin can be resized by the user by clicking and dragging the bottom-right corner of the plugin container.

Duplicating an existing plugin

Plugins can duplicate other plugins without having to copy the source code to new directories. The example "custom_layer_selector" plugin shows how to configure a new plugin that uses the existing layer selector plugin, but with a new name, settings and icon.

In App Help

If hasHelp is is set to true and the framework has displayed the help button the toolbar, it will invoke a the showHelp method on the plugin. The plugin is then responsible for arranging its UI to provide the help appropriate for that app. See an example implementation Sample Identify Point plugin

Show or Hide help on start

A method on the app object, supressHelpOnStartup(bool) can be called in response to the in-app help wanting to suppress the display of help on startup. This affects the value of the showHelp argument given to the activate method. Each time the activate method is called, you can check showHelp to see if the plugin should show the help screen. See an example implementation Sample Identify Point plugin

Export Text

Plugins can use two export as text options from the app object that is passed in during initialization.

• app.downloadAsCSv takes a JSON array of arrays (ex: [["one", 2, "thrice"], ["blue", "red", true]]) and a file name (ex: "my_download.csv") and initiates a download of that data as CSV.
• app.downloadAsPlainText takes a string and a filename, and returns the string unchanged as a file download.

See Draw & Report for an example implementation.

Displaying a modal image on clicking a thumbnail

To display a full-sized image modal on clicking a thumbnail, you can use a TINY.box modal already available in the framework. The Identify Point sample plugin has a sample implementation.

First create a clickable thumbnail in the plugin's initialize function:

$(this.container)
    .append('<p>Click the thumbnail to see a sample modal image popup</p>')
    .append('<img src="sample_plugins/identify_point/FutureHabitat_c.jpg"' +
            'id="sample-plugin-thumbnail" style="cursor: pointer" width="300" height="195" />');

Next add an event listener to call a function to render the modal on click:

$(this.container).find('#sample-plugin-thumbnail').on('click', function() {
    var modalImageSource = 'sample_plugins/identify_point/FutureHabitat_c.jpg';
    self.renderSampleImageModal(modalImageSource);
});

Last create a render function to display the modal using TINY.box:

renderSampleImageModal: function(imageSourcePath) {
    TINY.box.show({
        animate: false,
        html: '<img src="' + imageSourcePath + '"/>',
        fixed: true,
    });
}

Sample implementation

A sample implementation can be found in the Identify Point sample plugin.