AnsweredAssumed Answered

Tying query to a menu item click?

Question asked by john_richardson_1969 on Oct 4, 2018
Latest reply on Oct 5, 2018 by rscheitlin

Now that I am successfully able to run my query with great results, I want to tie that functionality to a menu item ...

I wish for menu item "clickOne" to run the query and display the results ... being new to all of this, I cannot seem to make it work!

 

My html and javascript follow:

 

<!DOCTYPE html>

          <html>

          <head>

          <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
          <link href="css/expandableOptions.css" rel="stylesheet">
          <!--<script src = "https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js"></script>-->
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
          <meta charset="utf-8">
          <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
          <title>Anderson Crime 2018</title>
          <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/themes/dark-blue/main.css">
          <script src="https://js.arcgis.com/4.8/"></script>
          <link rel="stylesheet" href="css/CriminalActivity.css">
          <link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
          <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
          <script src="js/expandableOptions-1.0.js"></script>
          <script src="js/Fotoboy.js"></script>
          <!--<script type="text/javascript" src="js/jquery.js"></script>-->
          <script src="js/Map.js"></script>
        <script src="js/Crime.js"></script>
          
          </head>

          <body>

          <div id="mapBox"></div>
          <img id = "apdLogo" src = "apd_tranlogo2.png">

          <div class="expandableContainer">
         <ul id="optionsThreeId" class="expandableOptions">
        <li id = "clickOne" class="option" title="Show Burglaries" option-image="burg.png"></li>
        <li class="option" onclick="alert('option 2 clicked');" title="option 2" option-image="two.png"></li>
        <li class="option" onclick="alert('option 3 clicked');" title="option 3" option-image="three.png"></li>
        <li class="option" onclick="alert('option 4 clicked');" title="option 4" option-image="four.png"></li>
        <li class="option" onclick="alert('option 5 clicked');" title="option 5" option-image="five.png"></li>
        <li class="option" onclick="alert('option 6 clicked');" title="option 6" option-image="six.png"></li>
        </ul>
        </div>

          </body>

          </html>
require([
      "esri/Map",
      "esri/views/MapView",
      //"esri/views/SceneView",
      "esri/widgets/Home",
      "esri/widgets/Search",
      "esri/widgets/BasemapGallery",          //loading the necessary libraries and classes and objects from the ESRI API
      "esri/widgets/Expand",
      "esri/layers/FeatureLayer",
      "esri/layers/ImageryLayer",
      "esri/widgets/LayerList",
      "esri/tasks/QueryTask",
      "esri/tasks/support/Query",
      "esri/layers/GraphicsLayer",
      "esri/Graphic",
      "esri/geometry/SpatialReference",
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"

      ],function(Map, MapView, Home, Search, BasemapGallery, Expand, FeatureLayer, ImageryLayer, LayerList, QueryTask, Query, GraphicsLayer, Graphic, SpatialReference, dom, on) {

      var map = new Map({     //creates new empy map, with streets as basemap
      basemap: "streets",
      });

      var view = new MapView({      //creates the map view and shows the map in the mapBox container
      container: "mapBox",
      map: map,
      zoom: 13,
      center: [-85.675, 40.09],      //centers map on Anderson, Indiana
      });

      var homewidget = new Home({     //adds the home widget to the map view
      view: view
      });
      view.ui.add(homewidget, "top-left");

      searchWidget = new Search({     //add the search widget to the map view
      view:view,
      showInfoWindowOnSelect: false,
      popupEnabled: false,
      popupOpenOnSelect: false
      });
      view.ui.add(searchWidget, "bottom-right");

      var basemapGallery = new BasemapGallery({     //add the basemap gallery widget to map view
      view: view
      });

      var bgExpand = new Expand({     //puts the basemap gallery widget into an expand widget
      view: view,
      content: basemapGallery,
      collapseTooltip: "Close Basemap Gallery",
      expandTooltip: "Open Basemap Gallery"
      });
      view.ui.add(bgExpand, "bottom-left");

      var burgSym = {                                   //creates the symbol for burglaries
           type: "simple-marker",
           color: "blue",
           style: "diamond",
           size: 7
      };

      var theftSym = {                                   //creates the symbol for thefts
           type: "simple-marker",
           color: "red",
           style: "square",
           size: 7
      };

      var otherSym = {                                   //creates a default symbol
           type: "simple-marker",
           color: "black",
           size: 5,
           style: "circle"
      };

      var crimeRenderer = {                              //creates the renderer for the crimes layer
           type: "unique-value",
           defaultSymbol : otherSym,
           field: "Offense",
           uniqueValueInfos: [{
                value: "Burglary",
                symbol: burgSym
           }, {
                value: "Theft",
                symbol: theftSym
           }]
      };

      var featurelayer = new FeatureLayer({      //adds a feature layer of 2018 Crime
      url: "http://172.20.25.165:6080/arcgis/rest/services/Crime2018/FeatureServer",
      title: "2018 Crime",
      renderer: crimeRenderer,
      visible: false
      });
      map.add(featurelayer, 2);

      var orthLayer = new ImageryLayer({      //adds an image layer of Orthos SCE
      url: "http://172.20.25.165:6080/arcgis/rest/services/Ortho_SCE/ImageServer",
      title: "Ortho - East",
      visible: false
      });
      map.add(orthLayer, 0);

      var orthLayer2 = new ImageryLayer({      //adds an image layer of Orthos SCW
      url: "http://172.20.25.165:6080/arcgis/rest/services/Ortho_SCW/ImageServer",
      title: "Ortho - West",
      visible: false
      });
      map.add(orthLayer2, 1);

      var layerList = new LayerList({     // add a layer list to the map view
      view: view
      });

      var llExpand = new Expand({     //puts the layer list widget into an expand widget
      view: view,
      content: layerList,
      collapseTooltip: "Close Layer List",
      expandTooltip: "Open Layer List"
      });
      view.ui.add(llExpand, "top-right");


      document.getElementById("clickOne").addEventListener("click", showBurglary);
     
      function showBurglary() {
      var sr = new SpatialReference(102100);

      var burgResults = new GraphicsLayer();
      map.add(burgResults);
      var burgQuery = featurelayer.createQuery();
                                                                                    //this section runs a query on the crimes layer, selecting burglaries
      burgQuery.where = "Offense = 'Burglary' OR Offense = 'Burg'";
      burgQuery.outFields = ["Offense" , "Location"];
      burgQuery.returnGeometry = true;
      burgQuery.outSpatialReference = sr;

      featurelayer.queryFeatures(burgQuery).then(displayGraphics);
     
      function displayGraphics(results) {

            burgResults.removeAll();

            for (feature of results.features) {
                  var graphic = new Graphic ({
                        geometry: feature.geometry,
                        symbol: {
                              type: "simple-marker",
                              color: [255,255,255,0.9],
                              size: "20px",
                              outline: {
                                    color:[0,0,0],
                                    width: 2,
                              },
                        },
                  });
                  burgResults.add(graphic);
            }

      }

}
                 

      });

 

Thanks!!

Outcomes