Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

180
Vistas
Data duplication on click on the WMS

When the user click for the first time on the map, he can see the related information. But if he click again, the informations are duplicated as you can see on the image below.

enter image description here

I expect that the old information is substitute with the newest. For handle this request I've developed the function below:

function getElementInfo(elementID, layerName, layerTitle){
  map.on('singleclick', function (event) {
    var viewResolution = view.getResolution();
    var coordinates = event.coordinate;
    var epsg = 'EPSG:3857';
    var params = {
        'INFO_FORMAT': 'application/json'
      };
    var url = layerName.getSource().getFeatureInfoUrl(
      coordinates,
      viewResolution,
      epsg,
      params,
    );

    async function getFeatureProperties() {
      try {
        var response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error!\n Status: ${response.status}\n Type: ${response.type}\n URL: ${response.url}`);
        } else {
          var data = await response.text();
          var json = JSON.parse(data).features[0].properties;

          var tableHeadContents = '<thead>'
          + '</thead>';
          var tableHead = $(tableHeadContents).attr("id","thead");
          $("#"+elementID).append(tableHead);
          var tableBodyContents = '<tbody></tbody>';
          var tableBody = $(tableBodyContents).attr("id","tbody");
          $("#"+elementID).append(tableBody);
          for (items in json) {
            key = items;
            value = json[items];
            tableRow = '<tr><td class="td-head">' + key + '</td><td class="td-body">' + value + '</td></tr>';
            $("tbody").append(tableRow);
          }

        }
      } catch (e) {
        console.log(e);
      }
    }
    getFeatureProperties();
  });
};

I haven't strong skills with Javascript and probably there is an error here but I can't see it.

I call the function simply adding it after a TileWMS:

getElementInfo('onclickinfo35', wms35, 'NDVI Campania 20150807');

And the informations appears inside a simple table:

<table id="onclickinfo35"></table>
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The reason why you are getting more and more values/rows in your table for every click, is because you don't clear the table before adding data.

You need to call $("#"+elementID).html(); before $("#"+elementID).append(tableHead);

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda