<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 class="text-base font-semibold" for="id">Choose a state:</label>
        <select name="features" id="id" class="border px-1 py-1 rounded-lg">
          <option value="" selected disabled>Please select...</option>
          <option value="63">Florida</option>
          <option value="68">Kentucky</option>
          <option value="2">Montana</option>
          <option value="37">Washington</option>
        </select>
        
        
        <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="newSite()" />
      </form>
    </div>
    <div class="mx-none flex-1 flex-grow">
      <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>

// Inserts the value from the state selection input into the iframe.src
// gid is an internal Mango id, but you can use any unique field=value pair.
// For example, field=state&value=Kentucky

function newSite() {
  var fid = $("#id").val();
  var newURL =
    "https://mangomap.com/examples/maps/51841/category-map?layer=c02f3720-15d4-11e6-86d6-06c182e4d011&field=gid&value=" +
    fid;
  var iframe = document.getElementById("iframe");
  iframe.src = newURL;
  iframe.src = iframe.src;
}