[GIS] JavaScript + ArcGIS + Dropdown menu with layers

arcgis-javascript-apiarcgis-serverjavascript

I have a script that generates a basemap with a layer that I have put on top of it. I am trying to create a dropdown menu in which the user of my HTML5 page can select the layer he wants on the basemap. I have both components: a dropdown list and a function that gives me the basemap + layer of choice.

So my question is: What is the best practice to combine these two components resulting in an interactive dropdown menu for a user to select the right layer on top of the basemap?

I have found multiple methods of getting there: http://jsfiddle.net/rn3nc/1/ and: https://stackoverflow.com/questions/1343178/change-active-li-when-clicking-a-link-jquery

Dropdown menu: 

<div class="container" z-order = 99999>
    <link rel="stylesheet" type="text/css" href="dropdown.css">
  <ul>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Schaalniveau<i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="#">Nederland</a></li>
        <li><a href="#">Gemeenten</a></li>
        <li><a href="#">Provincies</a></li>
        <li><a href="#">Wijken</a></li>
        <li><a href="#">Buurten</a></li>
      </ul>
    </li>
  </ul>
</div>

function for generating a basemap and my layer:

map.on("load", initOperationalLayer("Link to server and data"))

I want something like this dropdown menu: https://developers.arcgis.com/javascript/jssamples/dataadapterfeaturelayer.html

The code here is to difficult for me though.

Best Answer

It looks like you want to use Bootstrap for your dropdown menu. This sample does something similar, only the dropdown ("Maps" in the nav menu) changes the basemap instead of the operational layer:

http://esri.github.io/bootstrap-map-js/demo/dojo/maps.html

The relevant code is:

    query("#basemapList li").on(touch.press, function(e) {
      e.preventDefault();
      switch (e.target.text) {
        case "Streets":
          map.setBasemap("streets");
          break;
        case "Imagery":
          map.setBasemap("hybrid");
          break;
        case "National Geographic":
          map.setBasemap("national-geographic");
          break;
        case "Topographic":
          map.setBasemap("topo");
          break;
        case "Gray":
          map.setBasemap("gray");
          break;
        case "Open Street Map":
          map.setBasemap("osm");
          break;
      }
      // hide nav menu after selection on mobile
      if (query(".navbar-collapse.in").length > 0) {
        e.stopPropagation();
        query(".navbar-toggle")[0].click();
      }
  });

It sounds like you've already got the code that will show/hide the layer, so you just need to call that instead of map.setBasemap().

There's also a jQuery version:

  $("#basemapList li").click(function(e) {
    switch (e.target.text) {
      case "Streets":
        map.setBasemap("streets");
        break;
      case "Imagery":
        map.setBasemap("hybrid");
        break;
      case "National Geographic":
        map.setBasemap("national-geographic");
        break;
      case "Topographic":
        map.setBasemap("topo");
        break;
      case "Gray":
        map.setBasemap("gray");
        break;
      case "Open Street Map":
        map.setBasemap("osm");
        break;
    }
    // hide nav menu after selection on mobile
    if ($(".navbar-collapse.in").length > 0) {
      $(".navbar-toggle").click();
    }
  });
Related Question