In this task of the project, we need to allow the user to select each layout supported by the page. We can do this by using a <select> box which we populate at page load with each of the different layouts.
First of all we can add the <select> element to the page. This can go in between the search field and the button at the top of the page in console.html:
<select id="layouts"></select>
Next we need to make a request at page load to populate the <select>element with an <option> for each of the different layouts. We can do this in the click handler for the <button> that we added in console.js earlier.
It will need to go into the first branch of the conditional that checks a URL has been entered into the <input>, directly before where we set the src of the <iframe>:
$.ajax({
url: "/heat-map.asmx/getLayouts",
data: JSON.stringify({ url: url })
}).done(function (layouts) {
...