1

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.

  • i want dropdown layers and filds and search bothe code in arc gis sample code – Balu Mahendra Jul 23 '18 at 16:14
  • If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review – Kadir Şahbaz Jul 23 '18 at 16:54
2

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();
    }
  });
0

If you don't mind trading the dropdown menu with text for a dropdown menu with thumbnail images of the basemaps, the ArcGIS Basemap Gallery Widget can help you with this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.