<div class="font-sans antialiased w-screen">
  <div class="w-screen flex flex-col space-x-0 h-screen">
    <div class="flex-1 min-w-full p-4">
      <h3 class="text-xl font-semibold">Update an iframe src to load specific map features in Mango</h3>
      <ol class="text-base p-4">
        <li>Select a state from the dropdown list</li>
        <li>click "Update map" to update the permalink used as the iframe src using jQuery.</li>
      </ol>
      <p class="text-sm p-4">Switch to the JS view to see how this works</p>
      <hr>
      <form>
        <!-- Label for the dropdown; associates with the dropdown by the 'for' attribute pointing to 'id', which should be the same as the dropdown's ID. -->
        <label class="text-base font-semibold" for="id">Choose a state:</label>
        <!-- Dropdown menu where users select a state. Its 'id' attribute connects it to the label above and to the jQuery selector used in the JavaScript code. -->
        <select name="features" id="id" class="border px-1 py-1 rounded-lg">
          <option value="" selected disabled>Please select...</option>
          <!-- Each option represents a state with a unique value that corresponds to the 'gid' used in the JavaScript function to update the iframe source. -->
          <option value="63">Florida</option>
          <option value="68">Kentucky</option>
          <option value="2">Montana</option>
          <option value="37">Washington</option>
        </select>
        
        <!-- Button that triggers the JavaScript function 'loadSelection()' when clicked. This function updates the iframe's 'src' attribute based on the selected state. -->
        <input type="button" class="transition duration-300 ease-in-out px-4 py-1 rounded-lg bg-green-400 cursor-pointer hover:bg-green-700 hover:text-white" value="Update map" onClick="loadSelection()" />
      </form>
    </div>
    <div class="mx-none flex-1 flex-grow">
      <!-- Iframe that displays the map. The 'id' attribute 'iframe' connects it to the JavaScript function 'loadSelection()', which updates this iframe's 'src' based on the selected state. -->
      <iframe id="iframe" class="h-screen lg:w-screen md:w-screen sm:min-w-full" src="https://mangomap.com/examples/maps/51841/category-map"></iframe>
    </div>
  </div>
</div>

// Define a function called loadSelection that updates the source (src) of an iframe based on the user's selection from a dropdown menu.
function loadSelection() {
  // Use jQuery to get the value of the selected option from the dropdown menu with the id 'id'.
  // This value, referred to as 'gid' here, is an internal Mango identifier. 
  // Customers will need to use an attribute field and value from their own dataset.
  var gid = $("#id").val();
  
  // Construct a new URL for the iframe by appending parameters to the base URL.
  // 'layer' is a predefined parameter in the URL, likely specific to the map being used.
  // 'field=gid' specifies that the gid (geographic identifier) will be the field to use.
  // Users should replace 'gid' with an appropriate field key from their own data.
  // 'value=' is where the selected state's identifier (gid) is appended to the URL.
  var newURL =
    "https://mangomap.com/examples/maps/51841/category-map?layer=c02f3720-15d4-11e6-86d6-06c182e4d011&field=gid&value=" +
    gid;
  
  // Use plain JavaScript to select the iframe element by its ID ('iframe').
  var iframe = document.getElementById("iframe");
  
  // Update the 'src' attribute of the iframe to the new URL constructed above.
  // This change causes the iframe to reload with the map view corresponding to the selected state.
  iframe.src = newURL;
}