Hello,
Im having an issue with the addEventListener for a button that i put inside a infoTemplate.
I have the following code:
var deferred = identifyTask
.execute(identifyParams)
.addCallback(function (response) {
var filtered = response.filter(e=>{
return e.layerName =='Luminarias';
});
return arrayUtils.map(filtered, function (result) {
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
if (layerName === 'Luminarias') {
var template = ap_info(feature)
feature.setInfoTemplate(template);
}
return feature;
});
});
mapp.infoWindow.setFeatures([deferred]);
mapp.infoWindow.show(event.mapPoint);
deferred.then(()=>{
document.getElementById("editar_btn").addEventListener('click', (e)=>{console.log(e,"button")});
})
});
And then where i make the info template:
function ap_info(feature){
var content = `<div style=padding-top: 10px;>ROTULO: ${feature.attributes.ROTULO}<br /></div>
<div style=padding-top: 10px;>Tipo Conexión: ${feature.attributes.TIPO_CONEXION}<br /></div>
<div style=padding-top: 10px;>Tipo: ${feature.attributes.TIPO}<br /></div>
<div style=padding-top: 10px;>Propiedad: ${feature.attributes.PROPIEDAD}<br /></div>
<div style=padding-top: 10px;>Medido: ${feature.attributes.MEDIDO_TERRENO}<br /><Button class="ui button btn_busqueda" id="editar_btn"">Editar</Button></div>`;
var title = "ID Luminaria " + feature.attributes.ID_LUMINARIA;
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle(title);
infoTemplate.setContent(content);
return infoTemplate;
}
So how u see, in the info template i place the button inside the content.
<Button class="ui button btn_busqueda" id="editar_btn"">Editar</Button>
So i need to make the button work for each feature with a listener function that returns the current information shown in the infoWindow.
Any ideas? thanks in advice for the help!
Helen,
Here is a thread that answers that. https://community.esri.com/thread/162144
Ok, i make it work, but if i want to get the attributes from the infowindow when its more than 1 result?, like, lets say we have 2 results for the same point, but i only want to get the attributes from the second one .
Here is what i have in my code:
mapp.on('click', (event)=>{
var identifyTask, identifyParams;
identifyTask = new IdentifyTask(layers.read_dynamic_ap(this.props.token));
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 10;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [0, 1];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
identifyParams.width = mapp.width;
identifyParams.height = mapp.height;
identifyParams.geometry = event.mapPoint;
identifyParams.mapExtent = mapp.extent;
var onlyLum = [];
var deferred = identifyTask
.execute(identifyParams)
.addCallback(function (response) {
var filtered = response.filter(e=>{
return e.layerName =='Luminarias';
});
return arrayUtils.map(filtered, function (result) {
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
if (layerName === 'Luminarias') {
var template = ap_info(feature)
feature.setInfoTemplate(template);
}
return feature;
});
});
mapp.infoWindow.setFeatures([deferred]);
mapp.infoWindow.show(event.mapPoint);
on(document.getElementById('map'), '.clickMe:click', function(e,x) {
console.log("holasdASd", event);
});
});