Problems with the queries and events

AlbertoCañivano · ‎03-11-2017

I need to get a Feature Layer from a query. Until the Select features everything is ok but, after that. I always get the same problem.

ojo.io.script error Error: Failed to execute query.
at Object.h.load (init.js:885)
at init.js:191
at c (init.js:76)
at d (init.js:76)
at b.Deferred.resolve.callback (init.js:77)
at c (init.js:76)
at d (init.js:76)
at b.Deferred.resolve.callback (init.js:77)
at init.js:1507
at k (init.js:199)

You can see my code. Any ideas what is going on? Thanks!!

Edit fiddle - JSFiddle

thejuskambi · ‎03-11-2017

The fiddler you have setup, contains localhost which is not available to us. So we are not able to test the fiddler.

However, I see in the code that you are trying to select features, even before the layer has been added to the map. This is not possible and probably the reason why you are getting the error.

If you are trying to limit the visible features from a feature layer based on selection from the dropdown. You may want to try it, by setting the definitionExpression of the FeatureLayer. Again the layer needs to be added to the map or you can pass it in the options parameter, while initializing the FeatureLayer.

Hope this is helpful.

View solution in original post

thejuskambi · ‎03-11-2017

The fiddler you have setup, contains localhost which is not available to us. So we are not able to test the fiddler.

However, I see in the code that you are trying to select features, even before the layer has been added to the map. This is not possible and probably the reason why you are getting the error.

If you are trying to limit the visible features from a feature layer based on selection from the dropdown. You may want to try it, by setting the definitionExpression of the FeatureLayer. Again the layer needs to be added to the map or you can pass it in the options parameter, while initializing the FeatureLayer.

Hope this is helpful.

RobertScheitlin__GISP · ‎03-11-2017

Here is your code showing what thejus is talking about and some additional code changes and comments:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type="text/css">
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }

    #bcMain {
      width: 100%;
      height: 100%;
    }

    #cpLeading {
      width: 117px;
    }

    #BasemapToggle {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 50;
    }

    #HomeButton {
      position: absolute;
      top: 100px;
      left: 23px;
      z-index: 50;
    }
  </style>

  <title>Web App de emprendedores</title>

  <!-- Configure dojo for asynchronous module loading -->
  <script>
    var dojoConfig = {
      async: true
    };
  </script>

  <!-- Reference libraries. The first CSS is a Dojo theme that gives dijits a consistent style. -->
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/nihilo/nihilo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
  <!-- <link rel="stylesheet" href="css/workwiththemap.css" /> -->
  <script src="http://js.arcgis.com/3.12/"></script>
  <!-- <script src="js/map.js"></script> -->

  <script type='text/javascript'>
    var mapMain, 
      localesOSM = "https://localhost:6443/arcgis/rest/services/Emprendedores/Emprendedores/MapServer/2";

    require([
        "esri/map",
        "dojo/parser",
        "dojo/on",
        "dojo/dom",
        "esri/dijit/HomeButton",
        "esri/dijit/Scalebar",
        "esri/layers/FeatureLayer",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/Color",
        "dijit/form/Select",
// if you are not using the layout or dijits in your code and only using them in the html then
//You should just add them last right before the domReady!
//Use dojo/domReady! instead of dojo/ready this is a more standard coding practice
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ],
      function(Map,
        parser,
        on,
        dom,
        HomeButton,
        Scalebar,
        FeatureLayer,
        QueryTask,
        Query,
        SimpleMarkerSymbol,
        SimpleLineSymbol,
        Color
//Notice no need to have a BorderContainer or ContentPane because you do not use them in the JS code
      ) {

        // Parse DOM nodes decorated with the data-dojo-type attribute
        parser.parse();

        // Create the map
        mapMain = new Map("cpCenter", {
          basemap: "topo",
          center: [-5.61094, 36.016],
          zoom: 15
        }); //map

        var home = new HomeButton({
          map: mapMain
        }, "HomeButton");
        home.startup(); //homebutton

        var scalebar = new Scalebar({
          map: mapMain,
          scalebarUnit: "dual"
        }); //scalebar

//add the layer and symbol stuff here
        //create a new symbol
        var marker = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0]), 1),
          new Color([0, 255, 0, 0.25]));

        //Create a FeatureLayer with a query selection
        var localOSM = new FeatureLayer(localesOSM);

        //add the symbol into feature layer
        localOSM.setSelectionSymbol(marker);

        //add Feature Layer
        mapMain.addLayer(localOSM);

        on(select, "change", function(evt) {
          // Recojo el valor del select
          var SeleccLocal = dom.byId("select").value;
          // Muestro el valor seleccionado del select en el id=opcion
          alert("Valor del select es: " + SeleccLocal);
          //Define a query, after that I will create a Feature Layer
          var query = new Query();
          query.where = "Tienda = '" + SeleccLocal + "'";
          query.returnGeometry = true;
          console.log(query);

          localOSM.selectFeatures(query, FeatureLayer.SELECTION_NEW);
//or just use setDefinitionExpression on the Feature Layer
          //localOSM.setDefinitionExpression("Tienda = '" + SeleccLocal + "'");

        }); //on select
      }); //require
  </script>

</head>

<body class="nihilo">
  <div id="bcMain" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', liveSplitters:'true'">
    <div id="cpLeading" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:'true', region:'leading'">
      <!-- Create Select -->
      <label for="">¿Que tipo de local le gustaria montar? </label>

      <select name="select1" id="select">
            <option value="Artesania">Artesania</option>
            <option value="Banco" selected="selected">Banco</option>
            <option value="Bar">Bar</option>
            <option value="Bodega">Bodega</option>
            <option value="Boutique">Boutique</option>
            <option value="Discoteca">Discoteca</option>
            <option value="Farmacia">Farmacia</option>
            <option value="fast_food">Comida Rapida</option>
            <option value="Floristeria">Floristeria</option>
            <option value="Gasolinera">Gasolinera</option>
            <option value="Joyería">Joyería</option>
            <option value="Lavandería">Lavandería</option>
            <option value="Panaderia">Panaderia</option>
            <option value="Peluqería">Peluqería</option>
            <option value="Restaurante">Restaurante</option>
            <option value="Supermercado">Supermercado</option>
            <option value="Veterinario">Veterinario</option>
            <option value="Videoclub">Videoclub</option>
            <option value="Zapateria">Zapateria</option>
    </select>
    </div>
    <div id="cpCenter" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div id="HomeButton"></div>
    </div>
  </div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

AlbertoCañivano · ‎03-11-2017

Thanks you to both of you for your quick request.

I´ve done these changes and I still have the same problem. I did it both ways: with selectFeatures: localOSM.selectFeatures(query, FeatureLayer.SELECTION_NEW);

and setDefinitionExpression: localOSM.setDefinitionExpression("Tienda = " + SeleccLocal); (it is easier than the first idea)

And this is the error

I think I´ve done the query right (SeleccLocal). Everything works well until I´m putting the select feature.

RobertScheitlin__GISP · ‎03-11-2017

Alberto,

Sorry I did not notice your error in the Query where:

query.where = "Tienda = '" + SeleccLocal + "'";

AlbertoCañivano · ‎03-11-2017

OMG! I almost go mad. It is works!!

Thanks a lot!!