Adding click handler to specific layer via React

638
1
04-13-2019 10:57 PM
ITSupport21
New Contributor

Hi all,

The issue i'm having is accessing data from differing layers when attaching a click handler to a React WebMap component.
For example, the following code allows me to access latitude and longitude only:
<WebMap id="12345ABCE" onClick={(e) => this.clickHandler(e) />

in the click handler, I can use.mapPoint.latitude for example, but nothing beyond the baselayer.

My goal here is to return the values listed at a click point from a specific layer.

Many thanks

Tags (2)
0 Kudos
1 Reply
EvelynHernandez
Regular Contributor

This code is an example done for an app.

I hope this helps u

mapp.on('click', (event) => {
 this.props.changeIndex(0);
 this.props.selectedMenu('');


 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, (callback) => {
 if (!callback.length) {
 console.log("No hay resultados aquí");
 this.props.onclickresults([]);
 } else {
 let arrayResults = callback.map(r => {
 let res = {
 features: r.feature,
 layerName: r.layerName
 }


 return res;
 });
 console.log("tengo esto",arrayResults);
 
 this.props.onclickresults(arrayResults);


 }
 }, (error => {
 console.log("Error", error);
 }));


 deferred.addCallback(response => {
 let ress = response.filter(r => { return r.layerName == "Luminarias" });


 return arrayUtils.map(ress, function (result) {


 var feature = result.feature;
 var layerName = result.layerName;


 feature.attributes.layerName = layerName;
 if (layerName === 'Luminarias') {
 var luminariasTemplate = new InfoTemplate("ID Luminaria: ${ID_LUMINARIA}",
 "Rótulo: ${ROTULO} <br />" +
 "Tipo Conexión: ${TIPO_CONEXION}<br /> " +
 "Potencia: ${POTENCIA} <br/> " +
 "Tipo: ${TIPO} <br/>" +
 "Propiedad: ${PROPIEDAD} <br/>" +
 "Medido: ${MEDIDO_TERRENO} <br /><Button class='editar_btn ui button'>Editar</Button><Button class='verTrazado_btn ui button'>Ver Circuito</Button>");
 feature.setInfoTemplate(luminariasTemplate);


 }
 return feature;
 });
 })
0 Kudos