Layer List for ArcGIS API for JavaScript

Provides a layer list UI control for a map.

Demo

Demo: http://wsdot-gis.github.io/arcgis-js-layer-list/demo

webmap parameter

You can try the demo a webmap from ArcGIS online by adding the webmap query string parameter.

Example

http://wsdot-gis.github.io/arcgis-js-layer-list/demo?webmap=927b5daaa7f4434db4b312364489544d

CSS

.layer-list

This class is applied to the layer list's root <ul> element.

.layer-label

A layer's label will have this class.

.control-container

This is for styling the per-layer controls' container, which contains opacity and sublayer controls.

.sublayer-list

List of a layer's sublayers will have this class.

opacity-slider

The <input type='range'> element that controls a layer's opacity will have this class.

.badge

The badge classes use the :before pseudo-class.

.badge-supports-dynamic-layers

A badge that is used to indicate a layer supports the dynamicLayers capability introduced at ArcGIS Server 10.3.

layer type badges

• layer-type-arcgis-feature-layer
• layer-type-arcgis-map-service-layer
• layer-type-arcgis-tiled-map-service-layer

.toggle-closed

Clicking a layer's label will add or remove this class from the corresponding layer's list item element. This is used to hide layer's controls.

.toggle-closed .control-container {
    display: none;
}

API

Modules

badgeUtils

LayerList

LayerOptionsDialog

miscUtils

SublayerList

LegendHelper

LegendItem

LegendLayer

LegendResponse

External

OperationalLayer : Object

Represents an operation layer in a web map.

badgeUtils

• badgeUtils
  • .createBadge(...classNames) ⇒ HTMLSpanElement
  • .createLayerTypeClass(layerType) ⇒ string
  • .createLayerTypeBadge(layerType) ⇒ HTMLSpanElement

badgeUtils.createBadge(...classNames) ⇒ HTMLSpanElement

Creates an HTML span with classes applied.

Kind: static method of badgeUtils
Returns: HTMLSpanElement - Returns the HTML span element that can be styled into a badge.

Param	Type	Description
...classNames	string	One or more class names to be added to the span.

badgeUtils.createLayerTypeClass(layerType) ⇒ string

Creates a CSS class name based on a operationalLayers elements' layerType value.

Kind: static method of badgeUtils
Returns: string - A string that can be used as a CSS class name.

Param	Type	Description
layerType	string	The layer type's name

badgeUtils.createLayerTypeBadge(layerType) ⇒ HTMLSpanElement

Creates a span element with a layer type class and "badge" class.

Kind: static method of badgeUtils
Returns: HTMLSpanElement - An HTML span element that can be transformed into a badge via CSS.

Param	Type	Description
layerType	string	Layer type name

LayerList

• LayerList
  • LayerList ⏏
    • new LayerList(operationalLayers, domNode)
    • instance
      • .setScale(scale)
    • inner
      • ~root : external:HTMLUListElement | external:HTMLOListElement
      • ~dialog : external:HTMLDialogElement

LayerList ⏏

Kind: Exported class

new LayerList(operationalLayers, domNode)

Param	Type	Description
operationalLayers	Array.<external:OperationLayer>	An array of operational layers.
domNode	external:HTMLUListElement | external:HTMLOListElement	The root DOM node: either an UL or OL.

layerList.setScale(scale)

Call this function to update the out-of-scale classes on layers.

Kind: instance method of LayerList

Param	Type	Description
scale	number	The new scale

Example

// map is an esri/Map object.
map.on("zoom-end", function () {
    // Update layer list items to show if they are not visible due to zoom scale.
    layerList.setScale(map.getScale());
});

LayerList~root : external:HTMLUListElement | external:HTMLOListElement

Kind: inner property of LayerList

LayerList~dialog : external:HTMLDialogElement

Kind: inner property of LayerList

LayerOptionsDialog

• LayerOptionsDialog
  • .createLayerOptionsDialog() ⇒ HTMLDialogElement
  • .showLayerOptionsDialog(opLayer) ⇒ HTMLDialogElement

LayerOptionsDialog.createLayerOptionsDialog() ⇒ HTMLDialogElement

Creates the layer options dialog. The layer list will use a single dialog for the options of all layers. The controls and contents will be updated when called for a layer.

Kind: static method of LayerOptionsDialog
Returns: HTMLDialogElement - Returns a dialog that the user can use to set layer options.

LayerOptionsDialog.showLayerOptionsDialog(opLayer) ⇒ HTMLDialogElement

Shows the layer options dialog with options for the specified layer.

Kind: static method of LayerOptionsDialog
Returns: HTMLDialogElement - The layer options dialog for the input operational layer.

Param	Type	Description
opLayer	OperationalLayer	An operational layer

miscUtils

• miscUtils
  • ~arrayContains(array, value) ⇒ Boolean
  • ~parseIntList(s) ⇒ Array.<number>
  • ~splitWords(s, [re]) ⇒ Array.<string>

miscUtils~arrayContains(array, value) ⇒ Boolean

Determines if an array contains a given value.

Kind: inner method of miscUtils
Returns: Boolean - Returns true if the array contains the given value, false otherwise.

Param	Type	Description
array	Array	An array to be searched.
value	*	The value to search for in the array.

miscUtils~parseIntList(s) ⇒ Array.<number>

Parses a string containing comma-separated integer values into an array of integers.

Kind: inner method of miscUtils
Returns: Array.<number> - Returns the integers listed in the input string as an array of numbers.

Param	Type	Description
s	string	A string containing a comma-separated list of integers.

miscUtils~splitWords(s, [re]) ⇒ Array.<string>

Splits a camel-case or Pascal-case variable name into individual words.

Kind: inner method of miscUtils
Returns: Array.<string> - The input string, split into different parts.

Param	Type	Default	Description
s	string		A camel-case or Pascal-case string.
[re]	RegExp	/([A-Za-z]?)([a-z]+)/g	Regular expression used for detecting the start of a new word.

SublayerList

• SublayerList
  • SublayerList ⏏
    • new SublayerList(layer)
    • ~root : HTMLUListElement
    • ~createSublayerListItem(layerInfo) ⇒ HTMLLIElement

SublayerList ⏏

Kind: Exported class

new SublayerList(layer)

A list of a map service's sublayers.

Param	Type	Description
layer	esri/layers/Layer	A layer.

SublayerList~root : HTMLUListElement

Kind: inner property of SublayerList

SublayerList~createSublayerListItem(layerInfo) ⇒ HTMLLIElement

Creates a sublayer list item representing a layer info.

Kind: inner method of SublayerList
Returns: HTMLLIElement - A sublayer list item representing the input layer info object.

Param	Type	Description
layerInfo	esri/layers/LayerInfo	A LayerInfo object.

LegendHelper

LegendHelper~getLegendInfo(mapServiceUrl, [dynamicLayers]) ⇒ Promise

Gets legend info for a map service.

Kind: inner method of LegendHelper

Param	Type	Description
mapServiceUrl	string | esri/layers/layer	Either the URL of a map service or a Layer class from the ArcGIS API for JavaScript.
[dynamicLayers]	Array.<Object>	Dynamic layer definitions.

LegendItem

• LegendItem
  • LegendItem ⏏
    • new LegendItem(json)
    • .label : string
    • .url : string
    • .imageData : string
    • .contentType : string
    • .height : number
    • .width : number
    • .values : Array.<number>
    • .getDataUrl() ⇒ string
    • .toHtmlTableRow() ⇒ HTMLTableRowElement

LegendItem ⏏

Kind: Exported class

new LegendItem(json)

Represents an item in a layer's legend.

Param	Type	Description
json	Object	Initializes member values.

legendItem.label : string

Kind: instance property of LegendItem

legendItem.url : string

Kind: instance property of LegendItem

legendItem.imageData : string

Kind: instance property of LegendItem

legendItem.contentType : string

Kind: instance property of LegendItem

legendItem.height : number

Kind: instance property of LegendItem

legendItem.width : number

Kind: instance property of LegendItem

legendItem.values : Array.<number>

Kind: instance property of LegendItem

legendItem.getDataUrl() ⇒ string

Returns a data URL for the legend item's image.

Kind: instance method of LegendItem
Returns: string - Data URL of an image.

legendItem.toHtmlTableRow() ⇒ HTMLTableRowElement

Creates a table row representation of a legend item.

Kind: instance method of LegendItem

LegendLayer

• LegendLayer
  • LegendLayer ⏏
    • new LegendLayer(json)
    • .layerId : number
    • .layerName : string
    • .layerType : string
    • .minScale : number
    • .maxScale : number
    • .legend : Array.<LegendItem>
    • .createHtmlTable() ⇒ HTMLTableElement

LegendLayer ⏏

Kind: Exported class

new LegendLayer(json)

Represents a layer of a map service.

Param	Type	Description
json	Object	Corresponds to members to initialize their values.

legendLayer.layerId : number

Kind: instance property of LegendLayer

legendLayer.layerName : string

Kind: instance property of LegendLayer

legendLayer.layerType : string

Kind: instance property of LegendLayer

legendLayer.minScale : number

Kind: instance property of LegendLayer

legendLayer.maxScale : number

Kind: instance property of LegendLayer

legendLayer.legend : Array.<LegendItem>

Kind: instance property of LegendLayer

legendLayer.createHtmlTable() ⇒ HTMLTableElement

Creates an HTML table for a legend layer.

Kind: instance method of LegendLayer

LegendResponse

• LegendResponse
  • LegendResponse ⏏
    • new LegendResponse(json)
    • instance
      • .layers : Array.<LegendLayer>
      • .createHtmlTables() ⇒ Array.<HTMLTableElement>
    • static
      • .parseJson(jsonString) ⇒ LegendResponse

LegendResponse ⏏

Kind: Exported class

new LegendResponse(json)

The top level of a response for a Legend request.

Param	Type
json	Object
json.layers	Array.<LegendLayer>

legendResponse.layers : Array.<LegendLayer>

Kind: instance property of LegendResponse

legendResponse.createHtmlTables() ⇒ Array.<HTMLTableElement>

Creates an array of HTML tables with a layer's legend. Array ordinals correspond to layer IDs. Some elements may be undefined if there is no corresponding layer.

Kind: instance method of LegendResponse

LegendResponse.parseJson(jsonString) ⇒ LegendResponse

Parses legend response text into a LegendResponse object.

Kind: static method of LegendResponse

Param	Type	Description
jsonString	string	Response from a map service legend request.

OperationalLayer : Object

Represents an operation layer in a web map.

Kind: global external
See: ArcGIS REST API: operationalLayer
Properties

Name	Type	Description
id	string	The ID that will be given to the layer when added to a map.
layerType	string	The type of layer.
url	string
visibility	Boolean
opacity	Number
title	string
itemId	string	ArcGIS Online item id
minScale	Number
maxScale	Number