TwoStepSelector

Custom Leaflet control which will display two select boxes. Selecting an item in the first box will populate the second. Selecting an item in the second box will update the map.

Options:

• id Unique id for the control
• position The location on the map (using leaflet's standard control positions). Default: topleft
• title The tooltip for the button. Default: 'Select...'
• firstStepItems array of items (key/value) to be displayed in the first selector (alternatively, use firstStepItemLookup)
• firstStepItemLookup Function callback to retrieve the list of items to be displayed in the first selector. Takes a single parameter: a callback function that must be called with the array of key/value pairs to populate the first selector.
• firstStepTitle Tooltip for the first select box
• firstStepPlaceholder Placeholder text for the first (null) item in the first selector. Default: 'Select one...'
• secondStepItemLookup Function callback to populate the second selector when the first selector is set. Takes 2 parameters: the key of the selected value from the first selector, and a callback function that must be called with the array of key/value pairs to populate the second selector.
• secondStepPlaceholder Placeholder text for the first (null) item in the second selector. Default: 'Select one...'
• secondStepTitle Tooltip for the second select box
• selectionAction Function callback to invoke when the second selector is set
• firstStepValue The initial value for the first selector
• iconClass The CSS class(es) for the button icon. Default: 'fa fa-globe'