AnsweredAssumed Answered

Using Multiple Buttons to Select and Query on One Layer

Question asked by DCSD_gmarrero on Apr 26, 2018
Latest reply on May 2, 2018 by rscheitlin

Hello,

I'm trying to develop an app that will allow the users to make new areas using the several buttons to highlight and create areas on the map. Currently, the buttons can select individual areas but it does not separate from the individual buttons. The buttons keep adding on the selection while changing colors. I need help in figuring out how to separate the buttons so that it highlight the areas that they were clicked on and to make their query calculation display.  

 

 

 

<!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>Redistricting Test Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="css/loader.css">

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #mapDiv {
        padding: 1px;
        border: solid 2px #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }

      #HomeButton {
        position: absolute;
        top: 95px;
        left: 21px;
        z-index: 50;
      }

      #header {
        border: solid 2px #462d44;
        background: #fff;
        color: #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
        font-size: 1.2em;
        padding-left: 20px;
      }

      #rightPane {
        width: 250px;
        padding: 1px;
        border: solid 2px #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }

      #info {
        font-weight: bold;
        font-size: 0.85em;
      }

    </style>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Print", "esri/InfoTemplate", "esri/toolbars/draw",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/dijit/HomeButton", "esri/graphic",
        "esri/renderers/SimpleRenderer", "esri/Color", "esri/config", "esri/dijit/Legend",
        "esri/tasks/query", "esri/tasks/QueryTask", "dojo/_base/array", "dijit/registry", "dojo/query",
        "esri/tasks/LegendLayer", "esri/tasks/StatisticDefinition", "esri/geometry/geometryEngine",
        "dojo/store/Memory", "dojo/dom-construct", "dijit/form/Button", "dojo/dom", "dojo/on",
        "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dijit/layout/AccordionContainer", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, Print, InfoTemplate, Draw,
        SimpleLineSymbol, SimpleFillSymbol, HomeButton, Graphic,
        SimpleRenderer, Color, esriConfig, Legend,
        Query, QueryTask, array, registry, dojoQuery,
        LegendLayer, StatisticDefinition, geometryEngine,
        Memory, domConstruct, Button, dom, on,
        parser
      ) {
        parser.parse();

        esriConfig.defaults.io.proxyUrl = "/proxy/";

        var selectionToolbar;

        map = new Map("mapDiv", {
          basemap: "topo",
          center: [-84.20, 33.78], // lon, lat
          zoom: 11
        });

        var defaultSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.5]));
        //defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);

        //create renderer
        var renderer = new SimpleRenderer(defaultSymbol);

        var content = "<b>ES Population</b>: ${ES_Pop}" +
          "<br><b>MS Population</b>: ${MS_Pop}" +
          "<br><b>HS Population</b>: ${HS_Pop}";
        var infoTemplate = new InfoTemplate("${ES_Name}", content);

        var fields = ["ES_Name", "ES_Pop", "MS_Pop", "HS_Pop"];

        var blocks = new FeatureLayer("http://gis.dekalb.k12.ga.us/arcgis_webadapter/rest/services/Redistricting/ES_Areas_Redist_Test/FeatureServer/0", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          //infoTemplate: infoTemplate,
          outFields: fields
        });

        blocks.setRenderer(renderer);
        map.addLayers([blocks]);

        //map.on("load", initSelectToolbar);

        var selectionSymbol1 = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]));
        var selectionSymbol2 = new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]));
        var selectionSymbol3 = new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]));
        var selectionSymbol4 = new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]));
        var selectionSymbol5 = new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]));

        dom.byId("SchoolsButton1").onclick = executeSchool1;
        dom.byId("SchoolsButton2").onclick = executeSchool2;
        dom.byId("SchoolsButton3").onclick = executeSchool3;
        dom.byId("SchoolsButton4").onclick = executeSchool4;
        dom.byId("SchoolsButton5").onclick = executeSchool5;

        function executeSchool1() {
          on(blocks, "click", function(e) {
            var selectQuery = new Query();
            blocks.setSelectionSymbol(selectionSymbol1);
            selectQuery.objectIds = [e.graphic.attributes.OBJECTID];
            if (e.shiftKey) {
              blocks.selectFeatures(selectQuery, FeatureLayer.SELECTION_SUBTRACT, calculatePop1);
            } else {
              blocks.selectFeatures(selectQuery, FeatureLayer.SELECTION_ADD, calculatePop1);
            }
          });
        }

        function executeSchool2() {
          on(blocks, "click", function(e) {
            var selectQuery2 = new Query();
            blocks.setSelectionSymbol(selectionSymbol2);
            selectQuery2.objectIds = [e.graphic.attributes.OBJECTID];
            if (e.shiftKey) {
              blocks.selectFeatures(selectQuery2, FeatureLayer.SELECTION_SUBTRACT, calculatePop2);
            } else {
              blocks.selectFeatures(selectQuery2, FeatureLayer.SELECTION_ADD, calculatePop2);
            }
          });
        }

        function executeSchool3() {
          on(blocks, "click", function(e) {
            var selectQuery3 = new Query();
            blocks.setSelectionSymbol(selectionSymbol3);
            selectQuery3.objectIds = [e.graphic.attributes.OBJECTID];
            if (e.shiftKey) {
              blocks.selectFeatures(selectQuery3, FeatureLayer.SELECTION_SUBTRACT, calculatePop3);
            } else {
              blocks.selectFeatures(selectQuery3, FeatureLayer.SELECTION_ADD, calculatePop3);
            }
          });
        }

        function executeSchool4() {
          on(blocks, "click", function(e) {
            var selectQuery4 = new Query();
            blocks.setSelectionSymbol(selectionSymbol4);
            selectQuery4.objectIds = [e.graphic.attributes.OBJECTID];
            if (e.shiftKey) {
              blocks.selectFeatures(selectQuery4, FeatureLayer.SELECTION_SUBTRACT, calculatePop4);
            } else {
              blocks.selectFeatures(selectQuery4, FeatureLayer.SELECTION_ADD, calculatePop4);
            }
          });
        }

        function executeSchool5() {
          on(blocks, "click", function(e) {
            var selectQuery5 = new Query();
            blocks.setSelectionSymbol(selectionSymbol5);
            selectQuery5.objectIds = [e.graphic.attributes.OBJECTID];
            if (e.shiftKey) {
              blocks.selectFeatures(selectQuery5, FeatureLayer.SELECTION_SUBTRACT, calculatePop5);
            } else {
              blocks.selectFeatures(selectQuery5, FeatureLayer.SELECTION_ADD, calculatePop5);
            }
          });
        }



        function calculatePop1(event) {
          var PopSum = 0;
          //summarize the ES Population to display
          array.forEach(event.features, function(feature) {
            PopSum += feature.attributes.ES_Pop;
          });

          var CapDiv = Math.round((PopSum / 900) * 100);
          var Capacity;
          if (CapDiv >= 80 && CapDiv <= 99) {
            Capacity = '<span style="color: green">' + CapDiv + "% - Good" + '</span>';
          } else if (CapDiv >= 100) {
            Capacity = '<span style="color: red">' + CapDiv + "% - High" + '</span>';
          } else {
            Capacity = '<span style="color: blue">' + CapDiv + "% - Low" + '</span>';
          }
          dom.byId("countResult_1").innerHTML = PopSum + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
        }

        function calculatePop2(event) {
          var PopSum = 0;
          //summarize the ES Population to display
          array.forEach(event.features, function(feature) {
            PopSum += feature.attributes.ES_Pop;
          });

          var CapDiv = Math.round((PopSum / 900) * 100);
          var Capacity;
          if (CapDiv >= 80 && CapDiv <= 99) {
            Capacity = '<span style="color: green">' + CapDiv + "% - Good" + '</span>';
          } else if (CapDiv >= 100) {
            Capacity = '<span style="color: red">' + CapDiv + "% - High" + '</span>';
          } else {
            Capacity = '<span style="color: blue">' + CapDiv + "% - Low" + '</span>';
          }
          dom.byId("countResult_2").innerHTML = PopSum + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
        }

        function calculatePop3(event) {
          var PopSum = 0;
          //summarize the ES Population to display
          array.forEach(event.features, function(feature) {
            PopSum += feature.attributes.ES_Pop;
          });

          var CapDiv = Math.round((PopSum / 900) * 100);
          var Capacity;
          if (CapDiv >= 80 && CapDiv <= 99) {
            Capacity = '<span style="color: green">' + CapDiv + "% - Good" + '</span>';
          } else if (CapDiv >= 100) {
            Capacity = '<span style="color: red">' + CapDiv + "% - High" + '</span>';
          } else {
            Capacity = '<span style="color: blue">' + CapDiv + "% - Low" + '</span>';
          }
          dom.byId("countResult_3").innerHTML = PopSum + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
        }

        function calculatePop4(event) {
          var PopSum = 0;
          //summarize the ES Population to display
          array.forEach(event.features, function(feature) {
            PopSum += feature.attributes.ES_Pop;
          });

          var CapDiv = Math.round((PopSum / 900) * 100);
          var Capacity;
          if (CapDiv >= 80 && CapDiv <= 99) {
            Capacity = '<span style="color: green">' + CapDiv + "% - Good" + '</span>';
          } else if (CapDiv >= 100) {
            Capacity = '<span style="color: red">' + CapDiv + "% - High" + '</span>';
          } else {
            Capacity = '<span style="color: blue">' + CapDiv + "% - Low" + '</span>';
          }
          dom.byId("countResult_4").innerHTML = PopSum + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
        }

        function calculatePop5(event) {
          var PopSum = 0;
          //summarize the ES Population to display
          array.forEach(event.features, function(feature) {
            PopSum += feature.attributes.ES_Pop;
          });

          var CapDiv = Math.round((PopSum / 900) * 100);
          var Capacity;
          if (CapDiv >= 80 && CapDiv <= 99) {
            Capacity = '<span style="color: green">' + CapDiv + "% - Good" + '</span>';
          } else if (CapDiv >= 100) {
            Capacity = '<span style="color: red">' + CapDiv + "% - High" + '</span>';
          } else {
            Capacity = '<span style="color: blue">' + CapDiv + "% - Low" + '</span>';
          }
          dom.byId("countResult_5").innerHTML = PopSum + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
        }

        //add the legend
        var legend = new Legend({
          map: map,
          layerInfos: [{
            layer: blocks,
            title: ""
          }]
        }, "legendDiv");
        legend.startup();

        //function for refreshing block layer for use on button
        var refreshlayer = new Button({
          label: "Reset Map",
          onClick: function() {
            //the refresh will force it to get the original layer
            blocks.clearSelection();
            blocks.refresh();
            dom.byId("countResult_1").innerHTML = "";
            dom.byId("countResult_2").innerHTML = "";
            dom.byId("countResult_3").innerHTML = "";
            dom.byId("countResult_4").innerHTML = "";
            dom.byId("countResult_5").innerHTML = "";
          }
        }, "refreshbutton").startup();

        //home button to return to map's default extent
        var home = new HomeButton({
          map: map
        }, "HomeButton");
        home.startup();


      });

    </script>
  </head>

  <body class="tundra">

    <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Title Test1</div>

      <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
        <div data-dojo-type="dijit/layout/AccordionContainer">
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Title Test', selected:true">
            <div id="info">
              <button id="SchoolsButton1" data-dojo-type="dijit/form/Button">School 1</button><span class="stats" id="countResult_1"></span><br>
              <button id="SchoolsButton2" data-dojo-type="dijit/form/Button">School 2</button><span class="stats" id="countResult_2"></span><br>
              <button id="SchoolsButton3" data-dojo-type="dijit/form/Button">School 3</button><span class="stats" id="countResult_3"></span><br>
              <button id="SchoolsButton4" data-dojo-type="dijit/form/Button">School 4</button><span class="stats" id="countResult_4"></span><br>
              <button id="SchoolsButton5" data-dojo-type="dijit/form/Button">School 5</button><span class="stats" id="countResult_5"></span><br>
            </div>
            </div>
            </div>
            </div>
      <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
        <div id="HomeButton"></div>
      </div>
    </div>


  </body>

</html>

Outcomes