Layer Element Methods

This section describes the methods that can be used in code to manipulate the Layer Element object.

applySettings(settings)

Applies the layer element settings and updates element appearance.

Parameters:
settings: Object
A configuration object for the element.

The settings object should contain one or more options to be changed for the layer element. The options available to change using this method are listed in the layers option description.

Note that you cannot change the dataSource option for a separate layer element.

Show Example:
jQuery

Click the button below the map to highlight the markers one-by-one.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
<div style=" height:50px; margin-top:5px; text-align:center">
	<div id="buttonContainer"></div>
</div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    attributes: {
        text: 'Sacramento'
    }
}, {
    coordinates: [-97.75, 30.25],
    attributes: {
        text: 'Austin'
    }
}, {
    coordinates: [-73.7572, 42.6525],
    attributes: {
        text: 'Albany'
    }
}, {
    coordinates: [-84.2533, 30.455],
    attributes: {
        text: 'Tallahassee'
    }
}, {
    coordinates: [-89.65, 39.783],
    attributes: {
        text: 'Springfield'
    }
}, {
    coordinates: [-76.8756, 40.2697],
    attributes: {
        text: 'Harrisburg'
    }
}, {
    coordinates: [-82.9833, 39.9833],
    attributes: {
        text: 'Columbus'
    }
}, {
    coordinates: [-84.39, 33.755],
    attributes: {
        text: 'Atlanta'
    }
}, {
    coordinates: [-84.5467, 42.7336],
    attributes: {
        text: 'Lansing'
    }
}, {
    coordinates: [-78.6447, 35.8189],
    attributes: {
        text: 'Raleigh'
    }
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'markers',
            dataSource: markers
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
    });

    var highlightedMarker = 0;
    $("#buttonContainer").dxButton({
        text: 'Highlight next marker',
        onClick: function () {
            var map = $('#mapContainer').dxVectorMap('instance');
            var markers = map.getLayerByIndex(1).getElements();
            highlightedMarker %= markers.length;
            if (highlightedMarker > 0)
                markers[highlightedMarker - 1].applySettings({ color: '#ba4d51' });
            if (highlightedMarker == 0)
                markers[markers.length - 1].applySettings({ color: '#ba4d51' });
            markers[highlightedMarker++].applySettings({ color: 'powderblue' });
        }
    });
});

attribute(name)

Gets the value of an attribute.

Parameters:
name: String
The name of an attribute.
Return Value: any
The value of the required attribute.

The map marker data source can contain an object of attributes assigned to the attributes field. These attributes can hold any information you require. To obtain the value of an attribute, call the attribute(name) method with the name of the required attribute passed as the parameter.

Show Example:
jQuery

In this example, the attribute(name) method is used to obtain the name of the marker that is currently hovered over. This name is displayed by a tooltip.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var markers = [{
	coordinates: [-121.2808, 38.3320],
	attributes: { name: 'Sacramento' }
}, {
	coordinates: [-97.75, 30.25],
	attributes: { name: 'Austin' }
}, {
	coordinates: [-73.7572, 42.6525],
	attributes: { name: 'Albany' }
}, {
	coordinates: [-84.2533, 30.455],
	attributes: { name: 'Tallahassee' }
}, {
	coordinates: [-89.65, 39.783],
	attributes: { name: 'Springfield' }
}, {
    coordinates: [-76.8756, 40.2697],
    attributes: { name: 'Harrisburg' }
}, {
    coordinates: [-82.9833, 39.9833],
    attributes: { name: 'Columbus' }
}, {
    coordinates: [-84.39, 33.755],
    attributes: { name: 'Atlanta' }
}, {
    coordinates: [-84.5467, 42.7336],
    attributes: { name: 'Lansing' }
}, {
    coordinates: [-78.6447, 35.8189],
    attributes: { name: 'Raleigh' }
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'markers',
            dataSource: markers
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
        tooltip: {
            enabled: true,
            customizeTooltip: function (element) {
                if (element.layer.type == 'marker') {
                    return {
                        text: element.attribute('name')
                    };
                }
            }
        }
    });
});

attribute(name, value)

Sets the value of an attribute.

Parameters:
name: String
The name of an attribute.
value: any
The new attribute value.

coordinates()

Gets the layer element coordinates.

Return Value: Object
The element coordinates.

selected()

Gets the selection state of the layer element.

Return Value: Boolean
Is *true* when the element is selected, otherwise, *false*.

Show Example:
jQuery

In this example, the selected() method is used to check whether the clicked marker is already selected. If so, this marker deselects using the selected(state) method. Otherwise, it selects using the same method.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    text: 'Sacramento'
}, {
    coordinates: [-97.75, 30.25],
    text: 'Austin'
}, {
    coordinates: [-73.7572, 42.6525],
    text: 'Albany'
}, {
    coordinates: [-84.2533, 30.455],
    text: 'Tallahassee'
}, {
    coordinates: [-89.65, 39.783],
    text: 'Springfield'
}, {
    coordinates: [-76.8756, 40.2697],
    text: 'Harrisburg'
}, {
    coordinates: [-82.9833, 39.9833],
    text: 'Columbus'
}, {
    coordinates: [-84.39, 33.755],
    text: 'Atlanta'
}, {
    coordinates: [-84.5467, 42.7336],
    text: 'Lansing'
}, {
    coordinates: [-78.6447, 35.8189],
    text: 'Raleigh'
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'markers',
            dataSource: markers,
            selectedColor: 'powderblue',
            selectionMode: 'multiple'
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
        onClick: function (info) {
            var clickedMarker = info.target;
            if (clickedMarker != null && clickedMarker.layer.type == "marker")
                clickedMarker.selected(!clickedMarker.selected());
        }
    });
});

selected(state)

Sets the selection state of the layer element.

Parameters:
state: Boolean
Pass *true* to select the element and *false* to deselect it.

Show Example:
jQuery

In this example, the selected() method is used to check whether the clicked marker is already selected. If so, this marker deselects using the selected(state) method. Otherwise, it selects using the same method.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    text: 'Sacramento'
}, {
    coordinates: [-97.75, 30.25],
    text: 'Austin'
}, {
    coordinates: [-73.7572, 42.6525],
    text: 'Albany'
}, {
    coordinates: [-84.2533, 30.455],
    text: 'Tallahassee'
}, {
    coordinates: [-89.65, 39.783],
    text: 'Springfield'
}, {
    coordinates: [-76.8756, 40.2697],
    text: 'Harrisburg'
}, {
    coordinates: [-82.9833, 39.9833],
    text: 'Columbus'
}, {
    coordinates: [-84.39, 33.755],
    text: 'Atlanta'
}, {
    coordinates: [-84.5467, 42.7336],
    text: 'Lansing'
}, {
    coordinates: [-78.6447, 35.8189],
    text: 'Raleigh'
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'markers',
            dataSource: markers,
            selectedColor: 'powderblue',
            selectionMode: 'multiple'
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
        onClick: function (info) {
            var clickedMarker = info.target;
            if (clickedMarker != null && clickedMarker.layer.type == "marker")
                clickedMarker.selected(!clickedMarker.selected());
        }
    });
});