nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Fliter Map using drop down box

deleted-user-yA_w_FC9FKe5

I want to Filter a map by using some different filters and a drop down box.

So for example I might want to filter the map by "climate" with the drop down options "hot, cold, warm". However, I might have another filter called "Cluster" with dropdown options for "A++, A+, B" etc.

I need a good example for this or at least a good starting point example.

Thanks,

Michael

Vind meer berichten getagd met

Accepted answers

kenbuja

Either can be used as a showcase for seeing how the code works.

Are you sure it's not working? It's designed to filter when you click on the "Apply filter" text. For example, choosing Smallmouth Bass and LMBV will show 2 features. You could alter it to apply the filter when you select the dropdown box instead.

All comments

kenbuja

deleted-user-yA_w_FC9FKe5

This is how it looks like in a JSBin.

Thanks for doing that. I had never heard of the jsbin before. Interesting. What is the difference between that and jsfiddle?

I tried playing with the application and it does not work for me on my server and it at least shows up as intended in the jsbin but does not seem to work when you go to filter something. I'm surprised I can't find a simple solution to what I have to think is a common question here. I've spent way too many hours on google searching for something with at least two filters. Let alone using a dropdown box.

kenbuja

This is how it looks like in a JSBin.

deleted-user-yA_w_FC9FKe5

Take a look at this thread where the original poster had a question on his map that showed features using a dropdown list of choices.

Had high hopes for that but it does not seem to be working correctly at all. I don't even see the drop down box using the initial code

kenbuja

Take a look at this thread where the original poster had a question on his map that showed features using a dropdown list of choices.

deleted-user-yA_w_FC9FKe5

Thanks Brad. I have been using this sample but I don't like the way it is setup. I want to have multiple searches on it.

https://developers.arcgis.com/javascript/jssamples/find_map.html

So for example lets say I wanted to the filter on the following three different filters where we had three text boxes.
Owner is like 'Katz'
RESYRBLT > 1955
RESSTRTYP = 'Colonial/2Sty'

I'm not sure how I would do that. I created the text boxes but not sure how to include this in the search and skip if null.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Display Find Task results in Dojo DataGrid</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      require([
        "esri/map",
        "esri/tasks/FindTask",
        "esri/tasks/FindParameters",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
          
        "esri/Color",
        "dojo/on",
        "dojo/dom",
        "dijit/registry",
        "dojo/_base/array",
        "dojo/_base/connect",
        "dojox/grid/DataGrid",
        "dojo/data/ItemFileReadStore",
        "dijit/form/Button",
        "dojo/parser",
          
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser
      ) {      
        var findTask, findParams;
        var map, center, zoom;
        var grid, store;
        
        parser.parse();        
        
        registry.byId("search").on("click", doFind);
        
        center = [-83.266, 42.568];
        zoom = 11;
        map = new esri.Map("map", {
          basemap: "streets",
          center: center,
          zoom: zoom
        });

        //Create Find Task using the URL of the map service to search
        findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/");

        map.on("load", function () {
          //Create the find parameters
          findParams = new FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [0];
          findParams.searchFields = ["OWNERNME1", "OWNERNME2"];
          findParams.outSpatialReference = map.spatialReference;
          console.log("find sr: ", findParams.outSpatialReference);
        });                  
        
        function doFind() {
          //Set the search text to the value in the box
          findParams.searchText = dom.byId("ownerName").value;
          findTask.execute(findParams, showResults);
        }

        function showResults(results) {
          //This function works with an array of FindResult that the task returns
          map.graphics.clear();
          var symbol = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_SOLID, 
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2), 
            new Color([98, 194, 204, 0.5])
          );

          //create array of attributes
          var items = arrayUtils.map(results, function (result) {
            var graphic = result.feature;
            graphic.setSymbol(symbol);
            map.graphics.add(graphic);
            return result.feature.attributes;
          });

          //Create data object to be used in store
          var data = {
            identifier : "PARCELID", //This field needs to have unique values
            label : "PARCELID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
            items : items
          };

          //Create data store and bind to grid.
          store = new ItemFileReadStore({
            data : data
          });
          var grid = registry.byId("grid");
          grid.setStore(store);
          grid.on("rowclick", onRowClickHandler);

          //Zoom back to the initial map extent
          map.centerAndZoom(center, zoom);
        }

        //Zoom to the parcel when the user clicks a row
        function onRowClickHandler(evt) {
          var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).PARCELID;
          var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
            return ((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId);
          });
          if ( selectedTaxLot.length ) {
            map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
          }
        }
      });      
    </script>
  </head>
  <body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="height:40px;">
      <p>Owner name: 
        <input type="text" id="ownerName" size="10" value="Katz" />   
      </p>
      <p>    
     Year Built: 
        <input type="text" id="txtYearBuilt" size="10" value=">1955" />        
      </p>
      <p>Residence Type: 
        <input type="text" id="txtResType" size="30" value="'Colonial/2Sty'" />        
      </p>
 
      <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search       
      </button>
    </div>
    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
     <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
      <thead>
        <tr>
          <th field="PARCELID">Parcel ID</th>
          <th field="OWNERNME1" >Owner 1</th>
          <th field="OWNERNME2">Owner 2</th>
          <th field="RESYRBLT ">Year Built</th>
          <th field="RESSTRTYP  ">Res Type</th>          
          <th field="SITEADDRESS" width="100%">Address</th>
        </tr>
      </thead>
    </table>
    </div>
  </div>
  </body>
</html>

BradleySnider

Hi Michael,

You can always peruse the samples here: https://developers.arcgis.com/javascript/jssamples/

I think the following two samples will be helpful.

Populates a dropdown, queries based on the selected choice: https://developers.arcgis.com/javascript/jssamples/time_streetTrees.html

Finds features based on various characteristics. Instead of a search field, the sample could be modified to a dropdown list: https://developers.arcgis.com/javascript/jssamples/find_map.html

Best,

Brad

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.