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>



          <link rel="stylesheet" href="">
          <link href="css/expandableOptions.css" rel="stylesheet">
          <!--<script src = ""></script>-->
          <script src=""></script>
          <script src=""></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="">
          <script src=""></script>
          <link rel="stylesheet" href="css/CriminalActivity.css">
          <link  href="" rel="stylesheet"> <!-- 3 KB -->
          <script src=""></script>
          <script src=""></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>


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


      "esri/widgets/BasemapGallery",          //loading the necessary libraries and classes and objects from the ESRI API

      ],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
      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: "",
      title: "2018 Crime",
      renderer: crimeRenderer,
      visible: false
      map.add(featurelayer, 2);

      var orthLayer = new ImageryLayer({      //adds an image layer of Orthos SCE
      url: "",
      title: "Ortho - East",
      visible: false
      map.add(orthLayer, 0);

      var orthLayer2 = new ImageryLayer({      //adds an image layer of Orthos SCW
      url: "",
      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();
      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;

      function displayGraphics(results) {


            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: {
                                    width: 2,