Community

Using Multiple Buttons to Select and Query on One Layer

872
8
Jump to solution
04-26-2018 12:43 PM
GiovanniMarrero3
by
New Contributor III
‎04-26-2018 12:43 PM

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/Featu...", {
          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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-27-2018 05:09 AM

Giovanni,

   You need to get the graphics (polygon) that is clicked on and add it to a GraphicsLayer using the selected school symbol. Forget the whole featurelayer select route and just add graphics to a GL that you have added to the map.

<!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">

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

    #legendDiv {
      padding-top: 23px;
    }
  </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, gra, schoolGL;
    var executeSchool1Evt, executeSchool2Evt, executeSchool3Evt;
    var executeSchool4Evt, executeSchool5Evt;

    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",
      "esri/layers/GraphicsLayer", "esri/renderers/UniqueValueRenderer",
      "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,
      GraphicsLayer, UniqueValueRenderer
    ) {
      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]));

      //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/Featu...", {
        mode: FeatureLayer.MODE_SNAPSHOT,
        //infoTemplate: infoTemplate,
        outFields: fields
      });

      var sSymbol1 = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]));
      var sSymbol2 = new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]));
      var sSymbol3 = new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]));
      var sSymbol4 = new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]));
      var sSymbol5 = new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]));

      schoolGL = new GraphicsLayer();
      var uvRenderer = new UniqueValueRenderer(defaultSymbol, "SCHOOL");
      uvRenderer.addValue({
        value: 1,
        symbol: sSymbol1,
        label: "School 1",
        description: "School 1"
      });
      uvRenderer.addValue({
        value: 2,
        symbol: sSymbol2,
        label: "School 2",
        description: "School 2"
      });
      uvRenderer.addValue({
        value: 3,
        symbol: sSymbol3,
        label: "School 3",
        description: "School 3"
      });
      uvRenderer.addValue({
        value: 4,
        symbol: sSymbol4,
        label: "School 4",
        description: "School 4"
      });
      uvRenderer.addValue({
        value: 5,
        symbol: sSymbol5,
        label: "School 5",
        description: "School 5"
      });
      on(schoolGL, "click", function(e) {
        if (e.shiftKey) {
          schoolGL.remove(e.graphic);
          calculatePop();
        }
      });

      blocks.setRenderer(uvRenderer);
      schoolGL.setRenderer(uvRenderer);
      map.addLayers([blocks, schoolGL]);

      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 clearEvts() {
        if(executeSchool1Evt){executeSchool1Evt.remove();}
        if(executeSchool2Evt){executeSchool2Evt.remove();}
        if(executeSchool3Evt){executeSchool3Evt.remove();}
        if(executeSchool4Evt){executeSchool4Evt.remove();}
        if(executeSchool5Evt){executeSchool5Evt.remove();}
      }

      function doPreEvents() {
        clearEvts();
        map.disableClickRecenter();
        map.disableShiftDoubleClickZoom();
        map.disableKeyboardNavigation();
        map.disableRubberBandZoom();
      }

      function undoPreEvents() {
        clearEvts();
        map.enableClickRecenter();
        map.enableShiftDoubleClickZoom();
        map.enableKeyboardNavigation();
        map.enableRubberBandZoom();
      }

      function executeSchool1() {
        doPreEvents();
        executeSchool1Evt = on(blocks, "click", function(e) {
          gra = e.graphic.clone();
          gra.attributes.SCHOOL = 1;
          //gra.setSymbol(sSymbol1);
          schoolGL.add(gra);
          calculatePop();
        });
      }

      function executeSchool2() {
        doPreEvents();
        executeSchool2Evt = on(blocks, "click", function(e) {
          gra = e.graphic.clone();
          gra.attributes.SCHOOL = 2;
          //gra.setSymbol(sSymbol2);
          schoolGL.add(gra);
          calculatePop();
        });
      }

      function executeSchool3() {
        doPreEvents();
        executeSchool3Evt = on(blocks, "click", function(e) {
          gra = e.graphic.clone();
          gra.attributes.SCHOOL = 3;
          //gra.setSymbol(sSymbol3);
          schoolGL.add(gra);
          calculatePop();
        });
      }

      function executeSchool4() {
        doPreEvents();
        executeSchool4Evt = on(blocks, "click", function(e) {
          gra = e.graphic.clone();
          gra.attributes.SCHOOL = 4;
          //gra.setSymbol(sSymbol4);
          schoolGL.add(gra);
          calculatePop();
        });
      }

      function executeSchool5() {
        doPreEvents();
        executeSchool5Evt = on(blocks, "click", function(e) {
          gra = e.graphic.clone();
          gra.attributes.SCHOOL = 5;
          //gra.setSymbol(sSymbol5);
          schoolGL.add(gra);
          calculatePop();
        });
      }

      function calculatePop(id) {
        var PopSumObj = {
          1: 0,
          2: 0,
          3: 0,
          4: 0,
          5: 0
        }
        //summarize the ES Population to display
        array.forEach(schoolGL.graphics, function(feature) {
          switch(feature.attributes.SCHOOL){
            case 1:
              PopSumObj[1] += feature.attributes.ES_Pop;
              break;
            case 2:
              PopSumObj[2] += feature.attributes.ES_Pop;
              break;
            case 3:
              PopSumObj[3] += feature.attributes.ES_Pop;
              break;
            case 4:
              PopSumObj[4] += feature.attributes.ES_Pop;
              break;
            case 5:
              PopSumObj[5] += feature.attributes.ES_Pop;
              break;
          }
        });
        var CapDiv, Capacity;
        for(var i = 0; i<5; i++){
          CapDiv = Math.round((PopSumObj[(i+1)] / 900) * 100);
          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_' + (i + 1)).innerHTML = PopSumObj[(i+1)] + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
        }
      }

      //add the legend
      var legend = new Legend({
        map: map,
        layerInfos: [{
          layer: blocks,
          title: "School Re-Districting"
        }]
      }, "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
          schoolGL.clear();
          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 = "";
          undoPreEvents();
        }
      }, "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><br>
            <div id='refreshbutton'></div>
          </div>
          <div id="legendDiv"></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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

0 Kudos
8 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-26-2018 01:02 PM

Giovanni,

   You forgot to include the css/loader.css file contents.

Can you explain the workflow you are wanting?

When the user clicks school 1 and then on the map it should?

and when they click on school 2 it should start over or just start assigning the next click as the school 2 color?

0 Kudos
GiovanniMarrero3
by
New Contributor III
‎04-26-2018 01:58 PM

Robert,

You can delete the css line, I was trying to clean up the file to only show the problem areas.

As far as the process, the user clicks on school 1 button and starts to click on areas on the map. Each click will be highlighted in yellow while the calculation section updates next to the button. 

When the user clicks on school 2 button, it will start assigning another color and doing the separate calculation for that button. This will go on until the all 5 school buttons are completed.

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-26-2018 02:08 PM

So when school 2 is clicked school 1 colors are suppose to stay yellow and school 1 colors should start with the new school 2 color? If that is the intended workflow then your code will never work. When you change the selection color it changes for all the selected feature in that layer.

0 Kudos
GiovanniMarrero3
by
New Contributor III
‎04-26-2018 02:14 PM

Understood, that was the intended workflow.

do you have other suggestions to explore that would allow users to create different colored graphics and provided calculations based on the graphics?

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-27-2018 05:09 AM

Giovanni,

   You need to get the graphics (polygon) that is clicked on and add it to a GraphicsLayer using the selected school symbol. Forget the whole featurelayer select route and just add graphics to a GL that you have added to the map.

<!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">

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

    #legendDiv {
      padding-top: 23px;
    }
  </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, gra, schoolGL;
    var executeSchool1Evt, executeSchool2Evt, executeSchool3Evt;
    var executeSchool4Evt, executeSchool5Evt;

    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",
      "esri/layers/GraphicsLayer", "esri/renderers/UniqueValueRenderer",
      "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,
      GraphicsLayer, UniqueValueRenderer
    ) {
      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]));

      //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/Featu...", {
        mode: FeatureLayer.MODE_SNAPSHOT,
        //infoTemplate: infoTemplate,
        outFields: fields
      });

      var sSymbol1 = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]));
      var sSymbol2 = new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]));
      var sSymbol3 = new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]));
      var sSymbol4 = new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]));
      var sSymbol5 = new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]));

      schoolGL = new GraphicsLayer();
      var uvRenderer = new UniqueValueRenderer(defaultSymbol, "SCHOOL");
      uvRenderer.addValue({
        value: 1,
        symbol: sSymbol1,
        label: "School 1",
        description: "School 1"
      });
      uvRenderer.addValue({
        value: 2,
        symbol: sSymbol2,
        label: "School 2",
        description: "School 2"
      });
      uvRenderer.addValue({
        value: 3,
        symbol: sSymbol3,
        label: "School 3",
        description: "School 3"
      });
      uvRenderer.addValue({
        value: 4,
        symbol: sSymbol4,
        label: "School 4",
        description: "School 4"
      });
      uvRenderer.addValue({
        value: 5,
        symbol: sSymbol5,
        label: "School 5",
        description: "School 5"
      });
      on(schoolGL, "click", function(e) {
        if (e.shiftKey) {
          schoolGL.remove(e.graphic);
          calculatePop();
        }
      });

      blocks.setRenderer(uvRenderer);
      schoolGL.setRenderer(uvRenderer);
      map.addLayers([blocks, schoolGL]);

      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 clearEvts() {
        if(executeSchool1Evt){executeSchool1Evt.remove();}
        if(executeSchool2Evt){executeSchool2Evt.remove();}
        if(executeSchool3Evt){executeSchool3Evt.remove();}
        if(executeSchool4Evt){executeSchool4Evt.remove();}
        if(executeSchool5Evt){executeSchool5Evt.remove();}
      }

      function doPreEvents() {
        clearEvts();
        map.disableClickRecenter();
        map.disableShiftDoubleClickZoom();
        map.disableKeyboardNavigation();
        map.disableRubberBandZoom();
      }

      function undoPreEvents() {
        clearEvts();
        map.enableClickRecenter();
        map.enableShiftDoubleClickZoom();
        map.enableKeyboardNavigation();
        map.enableRubberBandZoom();
      }

      function executeSchool1() {
        doPreEvents();
        executeSchool1Evt = on(blocks, "click", function(e) {
          gra = e.graphic.clone();
          gra.attributes.SCHOOL = 1;
          //gra.setSymbol(sSymbol1);
          schoolGL.add(gra);
          calculatePop();
        });
      }

      function executeSchool2() {
        doPreEvents();
        executeSchool2Evt = on(blocks, "click", function(e) {
          gra = e.graphic.clone();
          gra.attributes.SCHOOL = 2;
          //gra.setSymbol(sSymbol2);
          schoolGL.add(gra);
          calculatePop();
        });
      }

      function executeSchool3() {
        doPreEvents();
        executeSchool3Evt = on(blocks, "click", function(e) {
          gra = e.graphic.clone();
          gra.attributes.SCHOOL = 3;
          //gra.setSymbol(sSymbol3);
          schoolGL.add(gra);
          calculatePop();
        });
      }

      function executeSchool4() {
        doPreEvents();
        executeSchool4Evt = on(blocks, "click", function(e) {
          gra = e.graphic.clone();
          gra.attributes.SCHOOL = 4;
          //gra.setSymbol(sSymbol4);
          schoolGL.add(gra);
          calculatePop();
        });
      }

      function executeSchool5() {
        doPreEvents();
        executeSchool5Evt = on(blocks, "click", function(e) {
          gra = e.graphic.clone();
          gra.attributes.SCHOOL = 5;
          //gra.setSymbol(sSymbol5);
          schoolGL.add(gra);
          calculatePop();
        });
      }

      function calculatePop(id) {
        var PopSumObj = {
          1: 0,
          2: 0,
          3: 0,
          4: 0,
          5: 0
        }
        //summarize the ES Population to display
        array.forEach(schoolGL.graphics, function(feature) {
          switch(feature.attributes.SCHOOL){
            case 1:
              PopSumObj[1] += feature.attributes.ES_Pop;
              break;
            case 2:
              PopSumObj[2] += feature.attributes.ES_Pop;
              break;
            case 3:
              PopSumObj[3] += feature.attributes.ES_Pop;
              break;
            case 4:
              PopSumObj[4] += feature.attributes.ES_Pop;
              break;
            case 5:
              PopSumObj[5] += feature.attributes.ES_Pop;
              break;
          }
        });
        var CapDiv, Capacity;
        for(var i = 0; i<5; i++){
          CapDiv = Math.round((PopSumObj[(i+1)] / 900) * 100);
          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_' + (i + 1)).innerHTML = PopSumObj[(i+1)] + "(e) / 900(c) = " + "<b>" + Capacity + "</b>";
        }
      }

      //add the legend
      var legend = new Legend({
        map: map,
        layerInfos: [{
          layer: blocks,
          title: "School Re-Districting"
        }]
      }, "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
          schoolGL.clear();
          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 = "";
          undoPreEvents();
        }
      }, "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><br>
            <div id='refreshbutton'></div>
          </div>
          <div id="legendDiv"></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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
GiovanniMarrero3
by
New Contributor III
‎04-30-2018 05:55 AM

Robert,

Your method above works similarly to what I was trying to do. Thank you for the help!

0 Kudos
GiovanniMarrero3
by
New Contributor III
‎05-02-2018 09:50 AM

Robert,

This is a separate issue but it's using the above code. I added a print widget to the script but it does not export. The server error says

Layer "graphicsLayer1": Field 'SCHOOL' not part of schema for this feature collection. Failed to execute (ExportWebMap). 

Is this a limitation of the print widget due to the graphics layer? Any workaround?

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-02-2018 10:23 AM

Giovanni,

   You should start a new question and provide a sample of how you added the print portion to the above code.

0 Kudos