AnsweredAssumed Answered

Problem with Search with Customization

Question asked by endlessdsire on Jul 9, 2015
Latest reply on Jul 15, 2015 by endlessdsire

Hello,

Im developing an web app (a form), and in one textfield i wanna put a Street Search using the example on this web(Search with customization | ArcGIS API for JavaScript ).

I have a secured service that im accesing to get the streets that i wanna search, but for some reason it doesnt work.

Im doing something wrong?

 

My structure folder is:

 

 

 

The login.js: is used to bypass the IdentityManager and have access to another modules like: capas.js (layers are loaded here), comboComuna.js(the combobox that show some cities) and the search (where i wanna add the code for the Calles(streets) and make a search as showed in the example Search with customization).

 

And my codes for earch file are:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="author" content="ehernanr">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">

   <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
  
   <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <style>
      #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
      
      #contenedorMapa{
        height:600px;
      }
      
      #contenedorBtnGrabar {
        vertical-align: middle;
      }
      
    #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 20px;
         left: 74px;
      }
   
    </style>
   
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  
  <!-- Latest compiled JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  
   <script>var dojoConfig = {parseOnLoad: true,
                packages: [
                    {
                        name: "js",
                        location: "/js"
                    }
                ]




            };</script>
    
    <script src="http://js.arcgis.com/3.13/"></script>
  
    <script src="js/login.js"></script> 
    <script>
      var map;
      var token;
      var esriId;
      var valorComuna = document.getElementById("id_comuna_dmps");
      
      require(["esri/map", 
              "dojo/parser", 
              "esri/IdentityManager",
              "dojo/domReady!" ], 
      function(Map,parser,IdentityManager) {
        
        parser.parse();
        esriId = IdentityManager;
        
        map = new Map("map", {
        basemap: "topo",
        center: [-71.0659,-32.9252], // long, lat
        zoom: 8
        });
        
        //valida login
        map.onload(validate());
        
       
       
      });
    </script>
  
  
</head>
<body data-spy="scroll"  data-target="form-group" >

<div class="container-fluid">
  <h1>PMS</h1>
  <div class="panel-group">
    
   <div class="panel panel-default"> 
      <div class="panel-body">
          <form class="form-inline" role="form">
              <div class="form-group">
                <label for="email">COMUNA</label>
                <select id="id_comuna_dmps"><option value="" >Seleccione una Comuna</option></select>
              </div>
              <div class="form-group">
                <label>CALLE:</label>
                <!-- <input type="text" class="form-control" id="gl_nombre_calle" size="20" maxlength="30" /> -->
               <div id="search"></div>
              </div>
              <div class="form-group">
                <label>PREFIJO:</label>
                <input type="text" class="form-control" id="gl_num_prefijo"   size="2" maxlength="4" />
              </div>
              
              <div class="form-group">
                <label>NUMERO:</label>
               <input type="text" class="form-control" id="nr_municipal"   size="4" maxlength="6" />
              </div>
              <div class="form-group">
                <label>SUFIJO:</label>
               <input type="text" class="form-control" id="gl_num_sufijo" size="2" maxlength="4" />
              </div>
              <div class="form-group">
                <label>ID DIRECCION:</label>
               <input type="text" class="form-control" id="id_direccion" size="6" />
              </div>
              
              <div class="form-group">
                  <button type="submit" class="btn btn-default">Validar Direccion</button>
                  
              </div>           
          </form>
      </div>
    </div>
    
    
     <div class="panel panel-default"> 
        <div class="panel-body">
           <form class="form-inline" role="form">
              <div class="form-group">
                <label for="email">BUSCAR:</label>
                <select name="lstTipoElemento" id="lstTipoElemento" class="form-control">
                      <option value="camara">CAMARA</option>
                      <option value="poste" selected="selected">POSTE</option>
                      <option value="nis">NIS</option></select>
                
              </div>
               <div class="form-group"><input name="txtValorBusqueda" type="text" id="txtValorBusqueda" class="form-control"  size="60" maxlength="80"></div>
               <div class="form-group"><input name="button" type="button" value="Buscar" class="btn btn-default"></div>
               <div class="form-group"><input name="button2" type="button" value="Manual" class="btn btn-default"></div>
        
           </form>
          
        </div>
       </div>
     </div> 
     
  <div class="panel panel-default"><div class="panel-body" id="contenedorMapa"><div id="map"> </div></div></div>
  <div class="panel panel-default"><div class="panel-body"><div class="form-group" id="contenedorBtnGrabar"><input name="button" type="button" value="Grabar" class="btn btn-default"></div></div></div>
  
    
 </div>  <!-- panel group -->   
  
  
</body>
</html>

 

login.js:

function validate() {


var username =  'myusername'; 
var password = 'mypassword';

    var http = new XMLHttpRequest();
    var url = "myrestsrv/arcgis/tokens/generateToken";


    var str1 = "username=";
    var str2 = "&password=";
    var str3 = "&f=json&client=requestip&expiration=1440";
    var params = str1.concat(username, str2, password, str3);
    //f="json", client="requestip", expiration="1440"

    http.open("POST", url, true);


    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");


    http.onreadystatechange = function () {




        if (http.readyState == 4 && http.status == 200) {
            var tokenRespuesta = http.responseText;
            token=JSON.parse(tokenRespuesta);
            if (tokenRespuesta.search("error") == -1) {
              
                esri.id.registerToken(  
                 {server:  'http://myRestSrv/arcgis/rest/services',  
                  userId:  'userejemplo',  
                  token:   token.token,  
                  expires: token.expires,  
                  ssl:     false  
                });  
                
                
                //HABILITAR MODULOS Y COMBOS UNA VEZ HECHO EL LOGIN
                dojo.registerModulePath("capas", "http://127.0.0.1:8020/PMS/js/capas");
                dojo.require('capas');
                
                dojo.registerModulePath("comboComuna", "http://127.0.0.1:8020/PMS/js/comboComuna");
                dojo.require('comboComuna');
                
               
                dojo.registerModulePath("mySearch", "http://127.0.0.1:8020/PMS/js/mySearch");
                dojo.require('mySearch');
               
                
        } else {
                alert("Login incorrecto, intente nuevamente.");
            }
        }
    };


    http.send(params);


    return false;
}

 

comboComuna.js

 

require([
        "dojo/dom", 
        "esri/tasks/query", "esri/tasks/QueryTask","dojo/domReady!" 
      ], function (dom, Query, QueryTask) {


        var queryTask = new QueryTask("myRestSrv/arcgis/rest/services/Chilquinta_006/Equipos_pto_006/MapServer/0");
        var query = new Query();
        query.returnGeometry = false;
        query.outFields = ["nombre"];
        query.where= "1=1";
        queryTask.execute(query, showResults);
          function showResults (results) {
              document.getElementById("id_comuna_dmps").innerHTML = "";
              var submenu = new Array();
              var resultItems = [];
              var resultCount = results.features.length;
              var x = document.getElementById("id_comuna_dmps");
              
              
              for (var i = 0; i < resultCount; i++) {
                var featureAttributes = results.features[i].attributes;
                
                for (var attr in featureAttributes) {
                  var c = document.createElement("option");
          
                  c.text = featureAttributes[attr];
                  x.options.add(c, attr);
                }
                //resultItems.push("<br>");
              }
           }//showresults
        });

 

 

capas.js

 

require([
        "esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer",
        "dojo/parser" , "dojo/domReady!"
      ], function(Map, InfoTemplate, FeatureLayer, parser) {
          parser.parse();
        
          
          var fLayerDist = new FeatureLayer("myRestSrv/arcgis/rest/services/PMS/Concesiones/MapServer/1",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"],
            
          });
          var fLayerTrans = new FeatureLayer("myRestSrv/arcgis/rest/services/PMS/Concesiones/MapServer/0",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"],
            
          });
           var fLayerComuna = new FeatureLayer("myRestSrv/arcgis/rest/services/MANTENIMIENTO/MANTENIMIENTO_PODAS/FeatureServer/0", {
            outFields: ["*"]
         });
       
          
          map.addLayers([fLayerDist,fLayerTrans,fLayerComuna]);
         // map.addLayer(fLayerComuna);
        
        
      });

 

 

mySearch.js

require([
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/dijit/Search",
      "esri/InfoTemplate",
      "dojo/domReady!"
      ], function (Map, FeatureLayer, Search, InfoTemplate) {
        


             //Create search widget
         var search = new Search({
            map: map,
            sources: [],
            zoomScale: 5000000
         }, "gl_nombre_calle");


         //listen for the load event and set the source properties 
         search.on("load", function () {


            var sources = search.sources;
            sources.push({
               featureLayer: fLayerComuna,
               placeholder: "123",
               enableLabel: false,
               searchFields: ["CODIGO_SAP"],
               displayField: "CODIGO_SAP",
               exactMatch: false,
               outFields: ["*"],


               //Create an InfoTemplate and include three fields
               infoTemplate: new InfoTemplate("Ecological Footprint", "<a href= ${URL} target=_blank ;'>Additional Info</a></br></br>Country: ${Country}</br>Rating: ${Rating}")


            });
            //Set the sources above to the search widget
            search.set("sources", sources);
         });
         search.startup();
      });

Thanks in advice

 

Mensaje editado por: Evelyn Hernandez Updated with the search.set("sources", sources);

Outcomes