SMK / Configuration / Tools

Bespoke Tool

The Bespoke tool can be used to extend the functionality of your SMK application. Use it to tailor panel content to your needs.

As a simple example, you could add a list of links in HTML. As a more complex example, you could add JavaScript code that calls into other JavaScript global objects, letting you call other SMK tools or libraries used by SMK such as Leaflet. Example code is in SMK’s debug/customization/bespoke directory.

The content is typically generated by the application at runtime, and the application can use a mechanism (Handlers) that allows SMK to notify the application when the panel is open and when it is closed. The content that the application generates will be interpreted as a Vue component.

This is default configuration for the Bespoke tool (click on a property name for more information):

{ "tools": [ {
    "type":      "bespoke",
    "instance":  null
    "title":     null,
    "showTitle": false,
    "enabled":   false,
    "icon":      "widgets",
    "order":     1,
    "position":  "toolbar",
    "component": null,
} ] }

Handlers

Unless you specify a static template for the "component" property, then you will need to use SMK handlers in your application to get notified when the panel is opened. Then the application will be able to set the component property with the content that is needed at that moment.

Handlers can be configured after smk.js is loaded into the application, either before or after the map is initialized. Multiple maps created in an application will share the same set of handlers.

To set a handler, make this method call:

SMK.HANDLER.set( <<id>>, <<method>>, <<handler>> )

Where:

• <<id>> is the tool id as described in the "instance" property.
• <<method>> is one of:
  • "initialized": fired when the map is initialized
  • "activated": fired when the tool is activated (button in toolbar is clicked, and tool wasn’t active)
  • "deactivated": fired when the tool is deactivated (close button clicked, or another tool activated)
  • "triggered": fired when the tool button in toolbar is clicked
• <<handler>> is a function that will be called to handle the condition specified by the method. It’s signature is:

    function ( smk, tool ) {
        // smk is the smkMap object
        // tool is the object being acted on.
        // Typically this handler will do something to change tool.component
        tool.component.template = "Hello!"
    }
  

Type Property

"type": String (Required)

The name of the type of this tool. Identifies the tool in the configuration, this is required.

Must be one of these values: "about", "basemaps", "bespoke", "coordinate", "directions", "identify", "layers", "legend", "list-menu", "location", "markup", "measure", "minimap", "pan", "query", "scale", "search", "select", "shortcut-menu", "toolbar", "version", or "zoom".

Instance Property

"instance": String

This tool is allowed to have multiple instances in an application. The instance property must be defined with an application-unique value for each use of the bespoke tool in the application configuration.

The handlers defined for this tool will use the instance id as part of the id passed to the HANDLER methods, it is concantenated with the "type" property seperated by "--".

For example, if the instance is "foo1" then the id given to the HANDLER methods would be "bespoke--foo1".

Title Property

"title": String

The title of this tool. Tools that display a panel will use this as the title of the panel. The toolbar button for this tool will use this as the tooltip. Tools have a default title, and setting this property will override the default title with one of the author’s choosing.

ShowTitle Property

"showTitle": Boolean

If true, then the title of the tool is shown beside the button in the toolbar. Defaults to false.

Enabled Property

"enabled": Boolean

If true then the tool will be available when the map starts. If false, then the tool will not be available.

Icon Property

"icon": String

If the tool adds a button to a toolbar, this property gives the name of the icon to display on the button. The icon set used is the Material Design Icons.

Order Property

"order": Integer

If the tool adds a button to a toolbar, this property controls the order in which the tools are added to the toolbar. The default value is 1, but some tools have other values as their default. The tools are added left-to-right in ascending order.

Position Property

"position": String

Some tools show a button that activates the tool, and that button must be positioned in one of the tool button containers. The tool button containers are: toolbar, list-menu, and shortcut-menu. This property’s value is the name of the container, or null to prevent button from appearing. The tool button container must itself be enabled.

Component Property

"component": Object

This property is assumed to be a Vue component definition.

The simplest use is to specify a template:

{ "tools": [ { "type": "bespoke", "instance": "demo",
    "component": {
        "template": "<h1>Hello World!</h1>"
    }
} ] }

Note

Because of the way Vue components work, the template must have a single root element.

Things like this will not work: "template": "<h1>Hello</h1><h2>World!</h2>"; so instead do this: "template": "<div><h1>Hello</h1><h2>World!</h2></div>",