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; } } }

populating dropdown menu with query results

ChrisBerryman1

Hello, I am trying to create a dropdown menu for my routing app that allows a user to select from a list of buildings, and when the user selects a building the location of that building is added to the route for them to navigate to. I have gotten the the drop down menu to populate with buildings, but not from the query results. I was thinking that it might just be easier to hard code an array that includes all the buildings and the xy coordinates for each building.

here is the url for my app:

Vind meer berichten getagd met

Accepted answers

All comments

JoshVan_Kylen

Unfortunately, lots of links like this are now broken.

ChrisBerryman1

thats great, thanks. here is the working url with the dropdown menu if you select goto: gis.uww.edu/wordpress/jqmmap.php

ReneeMaxwell

Thank you Kelly. It's a shame that we still can't leverage the performance advantages of dojo 1.7.

khutchins

Renee,

You don't need to perform a significant re-write to upgrade to 3.0. Here's a version of your sample that works for me that uses 3.0 with the 1.6 style syntax:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--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>Dojo Dropdown Demo</title>

    <link rel="stylesheet" href="https://community.esri.com//serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
    <!-- ArcGIS API for JavaScript -->
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0compact"></script>



    <script type="text/javascript">


      dojo.require("esri.map");
      dojo.require("esri.tasks.Query");
      dojo.require("dijit.form.FilteringSelect");
      dojo.require("dojo.data.ItemFileReadStore");
      
      dojo.addOnLoad(init);

      var map,queryTask;

      function init() {     
        queryTask = new esri.tasks.QueryTask("http://armstrong.uww.edu/ArcGIS/rest/services/NewCampus/MapServer/27");
      
        map = new esri.Map("map");
    
        dojo.connect(map, "onLoad", function() {
          //populate dropdown 
          executeQuery();
        });

        // Add the campus basemap 
        var campusMap = new esri.layers.ArcGISTiledMapServiceLayer('http://armstrong.uww.edu/ArcGIS/rest/services/NewCampus/MapServer');
        map.addLayer(campusMap);
      }

      function executeQuery() {

          
        //execute the query task then populate the dropdown menu with list of building names 
        var query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = ["BldgName","FID"];
        query.where = "1=1";
        queryTask.execute(query,populateMenu);
        
      }
      function populateMenu(featureSet){
      
         var items = dojo.map(featureSet.features, function (item) {
                    return {
                        name: item.attributes.BldgName,
                        id:item.attributes.FID
                    };
                });
             var data = {
              identifier:"id",
              items:items
              };
             var objStore = new dojo.data.ItemFileReadStore({data:data});

          var filteringSelect = new dijit.form.FilteringSelect({
            style:'width:300px;',
            placeHolder:'Select a building or start typing',
            store:objStore,
            required:false,
            labelAttr:'name',
            fetchProperties:{sort:[{attribute:'name'}]},
            onChange:function(val){
                if(val){
                  var selectQuery = new esri.tasks.Query();
                  selectQuery.returnGeometry = true;
                  selectQuery.objectIds = [val];
                  queryTask.execute(selectQuery,function(featureSet){  
                    map.graphics.clear(); //clear any existing map graphics 
                    //get the first feature and add to map 
                        if(featureSet.features.length > 0){
                          var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                           new dojo.Color([255,0,0]), 2),new dojo.Color([255,255,0,0.25]));
                          var feature = featureSet.features[0];
                          var graphic = new esri.Graphic(feature.geometry,symbol);
                          map.graphics.add(graphic);
                    }
                });
                }
            }            
          },'bldgSelect');




      }

    </script>
  </head>

  <body class='claro' style="font-family: Arial Unicode MS,Arial,sans-serif;">

    <input id='bldgSelect'/>
    <div id="wrapper" style="position: relative; width: 700px; height: 500px; border:1px solid #000;">
      <!-- Map canvas -->
      <div id="map" style="position: absolute; width: 700px; height: 500px; z-index: 1;"></div>
    </div>
  </body>

</html>

   
�??

Thanks for directing me to that sample, that's what I've been hunting for. I wish they hadn't buried it there but at least it's a start.

I'm disappointed that I will apparently have to significantly rewrite and restructure pretty much all of my code on all of my sites with the new release. The differences are substantial.

ReneeMaxwell

Thanks for directing me to that sample, that's what I've been hunting for. I wish they hadn't buried it there but at least it's a start.

I'm disappointed that I will apparently have to significantly rewrite and restructure pretty much all of my code on all of my sites with the new release. The differences are substantial.

ReneeMaxwell

I've also tried using dojo's ItemFileReadStore (as per version 2.8) for the dropdown and according to dojo's documentation it should still work in dojo 1.7, but I haven't had any success. When I create that type of store the dropdown is empty but no errors are shown. I've also tried using declarative markup as well (not recommended by dojo) and that doesn't seem to make any difference either way.

khutchins

Renee,

We do have one sample that uses the new 1.7(AMD) style syntax here:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/fl_dgrid.html

ReneeMaxwell

Kelly,

Yes, I've read the Migrating doc and I've been reading the Dojo documentation pages and I'm still struggling to get my site to work. I'm having difficulty making sense of the new dojo require method and I'm really frustrated that there aren't any samples that show dojo 1.7 in use with the javascript API.

So far I'm trying to get one widget to work at a time and I've been stuck on this building dropdown for the last two days. I've been able to load the dropdown from a query but I can't get the onChange function to work. When you select a building from the dropdown the Firebug console shows this error: "this.store._oldAPI is undefined" which appears to be coming from dojo.

Here's my trial code:

require(["dojo/ready", "dojo/dom", "dojo/query",
    "esri/map",
    "esri/toolbars/navigation",
    "esri/tasks/query", 
    "esri/dijit/Scalebar",
    "dijit/dijit", "dijit/layout/ContentPane", "dijit/layout/TabContainer",
    "dijit/Toolbar",
    "dijit/form/Button", "dijit/form/ToggleButton",
    "dijit/form/FilteringSelect",
    "dijit/TitlePane",
    "dojo/store/Memory", "dojo/data/ObjectStore"
]);

var basemap, navToolbar, map, bldgStore, selectedBldg, visible = []; //
var mapURL = "http://.../rest/services/MU_Base/MapServer";
var bldgLayerId = 58;
var baseLayers = [58,59,61,62,63];

function Init() {
    map = new esri.Map("mapDiv", { logo: false });

    var imageParameters = new esri.layers.ImageParameters();
    imageParameters.format = "PNG24";  //set the image type to PNG24, note default is PNG8.
    basemap = new esri.layers.ArcGISDynamicMapServiceLayer(mapURL, { "imageParameters": imageParameters });
    map.addLayer(basemap);

    //** Add the navigation toolbar
    navToolbar = new esri.toolbars.Navigation(map);

    selectedBldg = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL,
     new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
     new dojo.Color([204, 0, 0]), 2));
    //** CONNECT MAP FUNCTIONS
    dojo.connect(map, "onLoad", loadBuildingStore);
    //dojo.connect(map, "onExtentChange", extentHistoryChangeHandler);

    //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in 
    var resizeTimer;
    dojo.connect(map, 'onLoad', function (theMap) {
        var scalebar = new esri.dijit.Scalebar({
            map: map,
            scalebarUnit: 'english'
        });
        dojo.connect(dojo.byId("mapPanel"), 'resize', function () {
            map.resize();
        });
        visible = basemap.visibleLayers;
    });
}

dojo.ready(Init);

function loadBuildingStore() {
    var bqTask = new esri.tasks.QueryTask(mapURL + "/" + bldgLayerId);
    var bldgQuery = new esri.tasks.Query();
    bldgQuery.returnGeometry = false;
    bldgQuery.outFields = ["OBJECTID", "NAME", "BLDCODE", "KEYWORDS", "TYPE", "STATUS", "ADDRESS"];
    bldgQuery.where = "CAMPUS_ID = 'MAIN' AND STATUS <> 'RESTRICTED'";
    bqTask.execute(bldgQuery);

    dojo.connect(bqTask, "onComplete", function (nResults) {
        var bldgItems = dojo.map(nResults.features, function (item) {
            //ATTEMPT TO SEE IF PROBLEM LIES IN INTEGER VALUE FOR IDENTIFIER IN DATASTORE? NO DIFFERENCE
            var idStr = item.attributes.OBJECTID.toString();
            item.attributes.OBJECTID = idStr;
            return item.attributes;
        });

        var data = {
            'identifier': "OBJECTID",
            'items': bldgItems
        };
        var objStore = new dojo.store.Memory({ data: data, idProperty: 'OBJECTID' });

        var select = new dijit.form.FilteringSelect({
            id: "bldgDD",
            style: "width: 300px;",
            placeHolder: "Select a building or start typing",
            store: dojo.data.ObjectStore({ objectStore: objStore }),
            required: false,
            labelAttr: 'NAME',
            fetchProperties: { sort: [{ attribute: 'NAME'}] },
            //            onChange: queryID
            onChange: function (val) {
                log(val);
                //queryID(val);
            }
        }, "bldgDD");
    });
}

khutchins

Renee,

I used jQuery because Chris's app used jQuery so I wanted to use an approach that would integrate well into his app. Dojo should work just fine - do you get any errors in the console if you run your app with Firebug or Chrome Dev Tools open? Have you taken a look at the 'Migrating to 3.0' help topic to see if your app needs any updates after upgrading?

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/migration_30.htm

ReneeMaxwell

I use a different method than kelly's above that doesn't require jquery. It works great in 2.8 but since 3.0 launched with the new version of dojo I haven't been able to get it to work. I'm wondering if that is why kelly's example uses jquery instead of dojo?

function loadSearch() {
    var bqTask = new esri.tasks.QueryTask(mapURL + "/" + bldgLayerId);
    var bldgQuery = new esri.tasks.Query();
    bldgQuery.returnGeometry = false;
    bldgQuery.outFields = ["OBJECTID", "NAME", "BLDCODE", "KEYWORDS", "TYPE", "STATUS", "LABEL", "CAMPUS_ID"];
    bldgQuery.where = "CAMPUS_ID = 'MAIN' AND STATUS <> 'Restricted'";
    bqTask.execute(bldgQuery);

    dojo.connect(bqTask, "onComplete", function (nResults) {

        var bldgItems = dojo.map(nResults.features, function (item) {
            return item.attributes;
        });
        log(bldgItems.length);
        
        var data = {
            'identifier': "OBJECTID",
            'label': "NAME",
            'items': bldgItems
        };
        bldgStore = new dojo.data.ItemFileReadStore({ data: data });

        var searchDD = dijit.byId("bldgDD");
        searchDD.set("store", bldgStore);
        searchDD.searchAttr = "NAME";
        searchDD.fetchProperties = { sort: [{ attribute: 'NAME'}] };

        dojo.connect(searchDD , "onChange", function (queryID) {
    });
}

function queryID(bldgid) {
    var qidTask = new esri.tasks.QueryTask(mapURL + "/" + bldgLayerId);
    var queryid = new esri.tasks.Query();
    var selectedBldg = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL,
     new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
     new dojo.Color([204, 0, 0]), 2));

    queryid.returnGeometry = true;
    queryid.outFields = ["OBJECTID", "NAME", "BLDCODE", "KEYWORDS", "TYPE", "STATUS", "LABEL"];
    queryid.where = "OBJECTID = " + bldgid;

    //When the query completes, select the building
    dojo.connect(qidTask, "onComplete", function (featureSet) {
        if (featureSet.features[0]) {
            if (map.graphics) {
                map.graphics.clear();
            }
            var graphic = featureSet.features[0];
            var bldgnm = graphic.attributes["NAME"];
            var blcode = graphic.attributes["OBJECTID"];
            graphic.setSymbol(selectedBldg);
            //Add graphic to the map graphics layer.
            map.graphics.add(graphic);
            var selExtent = esri.graphicsExtent(map.graphics.graphics).expand(2);
            map.setExtent(selExtent);
        }
    });
    qidTask.execute(queryid);
}

khutchins

Chris,

Here's a sample that shows how to populate a dropdown list with the building names from your service:

http://jsfiddle.net/H7f9k/1/
Note: Update url to sort building names alphabetically

When the building name is selected from the list a highlight graphic is added to the map for the selected building.

ChrisBerryman1

http://gis.uww.edu/wordpress/jqmmap.php

khutchins

Chris,

Looks like your url didn't come through. Can you repost? Or post the snippet you are using to build the menu items from the query results.

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.