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.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);
OK atleast now loads the layers and map. I just modified this
queryTask.execute(query, function(){}
for this : queryTask.execute(query, function(results){
Cuz it doesnt find the variable for the comboBox.
Also i edited something else to show the Search textfield and I modified the layer for the search.
But the Search Customized doesnt work
So the query task works? also what is esri.id.registerToken?
I was wonder if you needed to append the token along with the featureservice url like this Accessing secure ArcGIS Server services
I have to do that.
I wanted to not show the identity Manager in the beginning and just load the map passing the parameters inside the code, thats why i use the login.js file.
Idk if theres another way to do it...
I have this now, but the error that gives me its pagination. How can i activate pagination on the service?
define(["dojo/_base/declare",
"dojo/_base/lang",
"esri/map",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/dijit/Search",
"dojo/dom",
"esri/tasks/query",
"esri/tasks/QueryTask"],
function(declare,
lang,
Map,
InfoTemplate,
FeatureLayer,
Search,
dom,
Query,
QueryTask) {
return declare(null, {
search:null,
map: null,
fLayerDist: null,
fLayerTrans: null,
fLayerComuna: null,
constructor: function(map){
this.map = map;
},
initLayers: function(){
this.fLayerDist = new FeatureLayer("",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
});
this.fLayerTrans = new FeatureLayer("",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
});
this.fLayerComuna = new FeatureLayer("", {
outFields: ["ALIMENTADOR"]
});
this.map.addLayers([this.fLayerDist,this.fLayerTrans]);
},
initSearch: function(){
this.search = new Search({
map: this.map,
sources: [],
zoomScale: 10000000
}, "search");
//listen for the load event and set the source properties
this.search.on("load", lang.hitch(this, function(){
var sources = this.search.get("sources");
/*sources.push({
featureLayer: this.fLayerComuna,
placeholder: "Argentina",
enableLabel: false,
searchFields: ["nombre_calle"],
displayField: "nombre_calle",
exactMatch: false,
outFields: ["nombre_calle"],
//Create an InfoTemplate and include three fields
infoTemplate: new InfoTemplate("Ecological Footprint", "</br></br>Country: ${nombre_calle}</br>Rating: ${nombre_calle}")
});
*/
sources.push({
featureLayer: new FeatureLayer(""),
searchFields: ["CODIGO_SAP"],
displayField: "CODIGO_SAP",
exactMatch: false,
outFields: ["CODIGO_SAP", "SOLICITANTE", "MONTO_PAGO"],
name: "MANTENIMIENTO_SOLICITUD_PODAS",
placeholder: "1234",
maxResults: 6,
maxSuggestions: 6,
//Create an InfoTemplate and include three fields
infoTemplate: new InfoTemplate("Congressional District", "District ID: ${CODIGO_SAP}</br>Name: ${SOLICITANTE}</br>Party Affiliation: ${MONTO_PAGO}"),
enableSuggestions: true,
minCharacters: 0
});
//Set the sources above to the search widget
// this.search.set("sources", sources);
this.search.set("sources", sources);
}));
// this.search.startup();
this.search.startup();
},
initOptions: function(){
var queryTask = new QueryTask("");
var query = new Query();
query.returnGeometry = false;
query.outFields = ["nombre"];
query.where= "1=1";
queryTask.execute(query, function(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.attributes;
for (var attr in featureAttributes) {
var c = document.createElement("option");
c.text = featureAttributes[attr];
x.options.add(c, attr);
}
//resultItems.push("<br>");
}
});
}
});
});
You should find some help here.
How do you enable the "Supports Pagination" on a layer at 10.3?
I tried the example but it still doesnt work. Maybe i will have to wait for the next release...
What version of ArcGIS Server are you using? 10.3 or 10.3.1?
10.3