Highlight hotspots from an automatically generated select element

trigger-draw-attention.js

jQuery(document).ready(function($){

	/* Select the container for the hotspots */
	var daImage = $('.hotspots-container');
	/* Select all the areas in the container */
	var areas = daImage.find('area');

	/* Create a new select element */
	var newSelect = $('<select id="daSelector"><option>Island</option></select>');
	/* Prepend the select before the container */
	newSelect.prependTo(daImage);

	/* Loop through the areas and create a new option for the select for each one */
	areas.each(function(){
		var $this = $(this);
		/* Use the href value of the area as the value of the option */
		newSelect.append('<option value="' + $this.attr('href') + '">' + $this.attr('title') + '</option>');
	});

	/* Bind an onchange event handler to the select */
	newSelect.on('change', function(){
		/* Get the value of the select box, which is the id of the more info box associated with the selected item */
		var area = $(this).val()
		/* Find the area of the map that links to the more info box */
		var hotspot = daImage.find('area[href="' + area + '"]');

		/* Trigger a click event on the area - that fires off the Draw Attention functionality to highlight the spot and display the more info box */
		var spotName = area.replace('#', ''); // Get the spot name
		hotspots.infoSpots[spotName].fire('click');
	});

});