AnsweredAssumed Answered

How do I ZOOM into a selected value from a combox and create a POPUP to show info in ArcGIS API for JavaScript?

Question asked by wootiewoot on Aug 21, 2014
Latest reply on Jun 8, 2015 by satyanarayana_narmala

Hi all,

 

I really need your help! I am fairly new to the coding world, especially ArcGIS API for JavaScript. Let me get straight to the point. I am trying to create a web-based map application that contains information of Counties and Cities in California. Ultimately, when I select a particular jurisdiction, the map will automatically zoom into that jurisdiction and highlights its boundary. I also want to develop a popup window that illustrates some information of that selected jurisdiction.

 

I have been "googling" for a solution online and this is what I came up with so far. I got the list to populate but it doesn't zoom into the jurisdiction when I select it. Please look at my code below:

 

<!DOCTYPE html>

<html>

  <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 

    <title>Populate dropdown list with unique values</title> 

 

 

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">

   

    <style type="text/css">body,html,#main{margin:0;padding:0;height:100%;width:100%;}</style> 

    <script src="http://js.arcgis.com/3.10/"></script> 

    <script> 

    var map; 

var resizeTimer; 

      require([

      "esri/map", "esri/tasks/query", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",

      "dijit/form/ComboBox", "dojo/data/ItemFileReadStore","dojo/store/Memory", "dojo/on", "dojo/domReady!"],

      function(Map, query, parser, BorderContainer, ContentPane, ComboBox, ItemFileReadStore, Memory, on) { 

 

        parser.parse(); 

        map = new Map("map", { 

            basemap: "topo", 

            //center: [-122.45, 37.75], // longitude, latitude 

            center : [-120.676665, 37.306837], 

            zoom: 6 

        });

       

        var queryTask = new esri.tasks.QueryTask("http://services.arcgis.com/IARhjUVNlIMumZL3/ArcGIS/rest/services/OTS_MAP/FeatureServer/1"); 

 

        //Define query parameters 

        var query = new esri.tasks.Query(); 

        query.outFields = ["NAME", "POP", "DVMT", "FATAL_OTS"]; 

        query.returnGeometry = true; 

        query.where  = "NAME <> ''" 

        queryTask.execute(query,populateList);

       

        //var initialExtent = new esri.geometry.Extent(-85.915,38.105,-85.52,38.33, 

          //      new esri.SpatialReference({wkid:4326}) ); 

       // map = new esri.Map("map", {extent:initialExtent}); 

        //Create tiled and dynamic map services and add to the map - for the dynamic service set the transparency 

        //and provide an id so we can access it later 

        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));      

        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgis.com/IARhjUVNlIMumZL3/ArcGIS/rest/services/CPP4OTS_MAP/MapServer", 

                {"opacity":.4,"id":"dynamic"})); 

 

       

      function populateList(results) {

       

        //initialize InfoTemplate

            infoTemplate = new esri.InfoTemplate("${NAME}", "County : ${NAME}<br/> Population : ${POP}<br/> Daily VMT : ${DVMT} <br/> Fatal OTS : ${FATAL_OTS}");

 

 

        //create symbol for selected features

            symbol = new esri.symbol.SimpleMarkerSymbol();

            symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);

            symbol.setSize(10);

            symbol.setColor(new dojo.Color([255, 255, 0, 0.5]));

       

        //Populate the dropdown list box with unique values 

        var county; 

        var values = []; 

        var testVals={}; 

        //Add option to display all zoning types to the dropdown list  

        values.push({name:"ALL"})           

       

        var features = results.features; 

        dojo.forEach (features, function(feature) { 

          county = feature.attributes.NAME; 

          if (!testVals[county]) { 

            testVals[county] = true; 

            values.push({name:county}); 

          } 

        }); 

         

        var dataItems = { 

               identifier: 'name', 

               label: 'name', 

               items: values 

        }; 

        var store = new dojo.store.Memory({data:dataItems}); 

        dijit.byId("mySelect").store = store; 

       

        //remove all graphics on the maps graphics layer

        map.graphics.clear();

 

 

        //Performance enhancer - assign featureSet array to a single variable.

        var resultFeatures = results.features;

       

        //Loop through each feature returned

        for (var i = 0, il = resultFeatures.length; i < il; i++) {

                //Get the current feature from the featureSet.

                //Feature is a graphic

                var graphic = resultFeatures[i];

                graphic.setSymbol(symbol);

 

 

                //Set the infoTemplate.

                graphic.setInfoTemplate(infoTemplate);

 

 

                //Add graphic to the map graphics layer.

                map.graphics.add(graphic);

 

 

                // This takes the graphics array you get back from your query and 

                // gets the overall extent for them. Make sure return geometry is set to  

                // true in your query. 

                var extent = esri.graphicsExtent(results.features);

 

 

                // Use that to set the extent, 1.5 is something I use in my app, but play with 

                // it to find a setting you like, setting the second parameter to true will get you an extend 

                // that is at the closest level of your cached service. 

                map.setExtent(extent.expand(1.7), true);

       

            }

      } 

     

      // this replaces your applyLayerDef() function

      dijit.byId("mySelect").on("change", function () {

        //Filter the layer to display only the selected zoning types

        var county = dijit.byId("mySelect").value;

        if (county !== 'ALL') { 

          var layerDefs = []; 

          layerDefs[2] = "NAME = " + "'" + county + "'"; 

          layerDefs.visibleLayers = [2]; 

          map.getLayer("dynamic").setLayerDefinitions(layerDefs); 

        } 

        else { 

          map.getLayer("dynamic").setDefaultLayerDefinitions(); 

        } 

       

       

       

       

       

       

       

       

      });

           

      function resizeMap() { 

        //Handle browser resize 

        clearTimeout(resizeTimer);           

        resizeTimer = setTimeout(function() { 

          map.resize(); 

          map.reposition(); 

        }, 800); 

      }

               

   }); 

    

    

    </script> 

  </head> 

  <body class="claro"> 

    <div id="main"  

            dojotype="dijit.layout.BorderContainer" 

            design="headline"  

            gutters="true"> 

      <div id="header" 

             dojotype="dijit.layout.ContentPane" 

             region="top" 

             style="height:25px;"> 

        <select id="mySelect"  

             dojotype="dijit.form.ComboBox" 

             style="width:300px;font-size:18px;" 

             autoComplete="true" 

             forceValidOption="false" 

             value="Select Zoning Type"></select> 

      </div> 

      <div id="map" 

             dojotype="dijit.layout.ContentPane" 

             region="center"  

             style="border:1px solid #000;margin:5px"> 

      </div> 

    </div> 

  </body> 

</html>

Outcomes