I'm getting the data, but the formatting is not correct. I'm selecting points, at the same point there may be more than one data. With the foreach the information goes out of the mode:


It should have a format like this at the same point:

01 John 2019-03-12 image_car1.jpg

02 Bryan 2019-04-26 image_car2.jpg

I tried to put a for loop, but I'm very afraid that I mustn't have applied it well because it hasn't worked for me.

This is the code with the foreach loop:

map.on('click', function (evt) {
    //var feature = map.getFeaturesAtPixel(evt.pixel);
    var feature = map.getFeaturesAtPixel(evt.pixel,
    function(feature, layers) {
        return feature;
    if (feature.length > 0) {
        var one = document.getElementById('code');
        one.innerHTML = '';
        var two = document.getElementById('autorOb');
        two.innerHTML = '';
        var three = document.getElementById('dateOb');
        three.innerHTML = '';
        var four = document.getElementById('ImgOb');
        four.innerHTML = '';
            one.innerHTML += feature.get('id_code');
            two.innerHTML += feature.get('autor');
            three.innerHTML += feature.get('obs_date');
            four.innerHTML += feature.get('image');

I tried:

for (i=0; i<feature.length; i++){
    one.innerHTML += feature.get('id_code');
    two.innerHTML += feature.get('autor');
    three.innerHTML += feature.get('obs_date');
    four.innerHTML += feature.get('image');

But feature is not a function

How can I do it?

  • In your for loop you forgot the index, it should be feature[i].get('id_code').
    – TomazicM
    Nov 6, 2020 at 13:39
  • It's true, a mistake when typing the code. I was having problems with the lenght property,and I wrote several versions of the script. wrong version... oh ... Thanks
    – user68481
    Nov 6, 2020 at 16:36

1 Answer 1


There are two ways to conceptualize your goal.

  1. Row based: you can write an entire record info, then a second one etc.

To achieve this, you wouldn't write in each one two three four sections (div ?), but rather in a new one (which could have sub-sections of the 4 specific type)

var records = document.getElementById('records');
records.innerHTML = '';

            records.innerHTML += '<div>';
            records.innerHTML += '  <div class="one">' + feature.get('id_code') + '</div>';
            records.innerHTML += '  <div class="two">' + feature.get('autor') + '</div>';
            records.innerHTML += '  <div class="three">' + feature.get('obs_date') + '</div>';
            records.innerHTML += '  <div class="four">' + feature.get('image') + '</div>';
            records.innerHTML += '</div>';
  1. Column based: you can write to each of the sections as you are doing, but you need to separate each "row", at the bare minimum with a line break (though you will likely want a fancier div with its own class and formating)
            one.innerHTML += feature.get('id_code') + '<BR />';
            two.innerHTML += feature.get('autor') + '<BR />';
            three.innerHTML += feature.get('obs_date') + '<BR />';
            four.innerHTML += feature.get('image') + '<BR />';
  • Perfect! The first solution works perfectly for me, I save code. Now I have just to page the results. Thaks
    – user68481
    Nov 6, 2020 at 16:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.