Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

170
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!