Add interactivity

Interact with your data

It's very easy to interact with data that get shown by adding an event listener to the display. Here we're going to change the style of the feature that the user clicks on so that it highlights in a different color.

1. Define the style to use for the highlight

var clickedFeature;
// Define new line style
var selectedStyle = [{
    zIndex: 0,
    type: "Line",
    opacity: 0.7,
    strokeWidth: 16,
    stroke: "#FFFFFF"
}];

2. Then remember which feature is (or was clicked) so that it can revert to the normal style when antoher is selected

var clickedFeature;

3. Finally, add an event listener function to the display to fire when the mouse button is released revert the previous selection back to normal. If a feature was actually selected ev.target will contain it, and this can be used set it to the highlight style.

// add event listener to pointerup
display.addEventListener('pointerup', function(ev){
	// Restore default feature style
	if(clickedFeature)
		linkLayer.setStyleGroup(clickedFeature);

	// If a feature is clicked
	if(ev.target){
		clickedFeature = ev.target;

		// Set new feature style if mouse clicks on a feature
		linkLayer.setStyleGroup(clickedFeature, selectedStyle);
	}
});