title: Add event click into marker openlayers
body: <p>Good day, I'm trying to add events to dynamically programmed markers on a map. The markers do show on the screen but when you click to show a div, instead of just showing the div related to the bookmark, activate the event click on all the div on the screen.</p>
  
  <p>Where the marker is created is when invoking the function crearMarcadores and send the coordinates and the variable cc to use for the id of the div.</p>
  
  <pre><code>var centro = ol.extent.getCenter(boundingBox);
  crearMarcadores(centro, cc);
  </code></pre>
  
  <p>The divs if you create them correctly, as I understand it must be a div for each marker.</p>
  
  <p>And where I'm almost sure is my mistake is in:</p>
  
  <pre><code>  var feature = map.forEachFeatureAtPixel(evt.pixel,
          function(feature, layer) {
              return feature;
    });
  </code></pre>
  
  <p>Since it executes a foreach, and should only return the marker feature. But I do not know how to run it only in the current marker. Although all the examples I have found are with foreach.</p>
  
  <p>For your valuable help, thank you very much.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var iconFeature = new ol.Feature({
          geometry: new ol.geom.Point([-90.204114, 13.866291]),
          name: 'nombre',
          population: 4000,
          rainfall: 500
      });
  
      var iconStyle = new ol.style.Style({
          image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
       anchor: [0.5, 46],
       anchorXUnits: 'fraction',
       anchorYUnits: 'pixels',
       opacity: 0.75,
       src: 'http://openlayers.org/en/v3.9.0/examples/data/icon.png'
          }))
      });
      iconFeature.setStyle(iconStyle);
  
      var vectorSource = new ol.source.Vector({
          features: [iconFeature]
      });
  
      var vectorLayer = new ol.layer.Vector({
       source: vectorSource
      });
  
      var layer = new ol.layer.Vector({ /*layer con los poligonos*/
          source: new ol.source.Vector()
      })
  
      function crearMarcadores(centroPoligono, CentroCosto) {
  
          var iconFeature = new ol.Feature({
           geometry: new ol.geom.Point(centroPoligono),
           name: CentroCosto,
           population: 4000,
           rainfall: 500
          });
          vectorSource.addFeature(iconFeature);
          iconFeature.setStyle(iconStyle);
  
          //------------start creation popup
          var div = document.createElement('div');
          div.setAttribute("id", CentroCosto);
          div.setAttribute("style", "width: 580px; height: 400px; float: left");
          document.body.appendChild(div);
  
          var element = document.getElementById(CentroCosto);
  
          var popup = new ol.Overlay({
           element: element,
           positioning: 'bottom-center',
           stopEvent: false
          });
          map.addOverlay(popup);
          //------------end creation popup
  
          // --------------display popup on click
          map.on('click', function(evt) {
       
       var feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature, layer) {
         return feature;
        });
       if (feature) {
        var geometry = feature.getGeometry();
        var coord = geometry.getCoordinates();
        popup.setPosition(coord);
        $(element).popover({
         'placement': 'top',
         'html': true,
         'content': feature.get('name')
        });
        $(element).popover('show');
       } else {
        $(element).popover('destroy');
       }
          });
      //---------------end display popup on click
  
      
      } //termina funcion crearMarcadores
  
      function generarMapas() {
  
      var FechaInicial = '';
      var FechaFinal = '';
      var Finca = '';
      $.ajax({
       type: "POST",
       url: "FrmMapaAvanceRiego.aspx\/FillMapas",
       data: '{FechaInicial: "' + FechaInicial + '", FechaFinal: "' + FechaFinal + '", Finca: "' + Finca + '"}',
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function(msg) {
        var data = JSON.parse(msg.d);
        coordenadas = [];
        cc = [];
        $.each(data, function(i, item) {
         coordenadas[i] = item.Coordenadas;
         cc[i] = item.CentroDeCostoLote;
         crearPoligonos(coordenadas[i], cc[i]);
  
        });
       },
       error: errores
      });
      }
  
      function errores(msg) {
       alert('Error: ' + msg.responseText);
      }
  
      function crearPoligonos(coordenada, cc) {
      //console.log(coordenada);
      console.log(cc);
      var coordenadas = coordenada.split(' ') // Separamos por espacio
       .map(function(data) {
        var info = data.split(','), // Separamos por coma
         coord = { // Creamos el obj de coordenada
          lat: parseFloat(info[1]),
          lng: parseFloat(info[0])
         };
  
        return coord;
       });
  
      var parserJSTS = new jsts.io.OL3Parser();
  
      var poly = new ol.Feature({
       geometry: new ol.geom.Polygon([coordenadas.map(function(_ref) {
        var lng = _ref.lng,
         lat = _ref.lat;
        return [lng, lat];
       })])
      });
  
      var boundingBox = poly.getGeometry().getExtent()
      var polybbox = new ol.Feature({
       geometry: ol.geom.Polygon.fromExtent(boundingBox)
      })
  
      var [xmin, ymin, xmax, ymax] = boundingBox
  
      var porcentaje = 0.50
      var newXmax = xmin + ((xmax - xmin) * porcentaje)
  
      var newBoundingBox = [xmin, ymin, newXmax, ymax]
  
      var polybbox50 = new ol.Feature({
       geometry: ol.geom.Polygon.fromExtent(newBoundingBox)
      })
  
      var polybbox50jsts = parserJSTS.read(polybbox50.getGeometry())
  
      var polyjsts = parserJSTS.read(poly.getGeometry())
  
      var intersectionJSTSGeometry = polyjsts.intersection(polybbox50jsts)
  
      var intersectionGeometry = parserJSTS.write(intersectionJSTSGeometry)
  
      var newPoly = new ol.Feature({
       geometry: intersectionGeometry
      })
      //console.log(boundingBox)
  
      newPoly.setStyle(new ol.style.Style({
       fill: new ol.style.Fill({
        color: '#02ABFF'
       })
      }))
  
      // Descomentar para ver los bounding boxes
      //      layer.getSource().addFeature(polybbox)
      //      layer.getSource().addFeature(polybbox50)
      layer.getSource().addFeature(poly)
      layer.getSource().addFeature(newPoly)
  
  
      var centro = ol.extent.getCenter(boundingBox);
      //console.log(centro);
  
      crearMarcadores(centro, cc);
      }
  
      //------------start creation map
      var map = new ol.Map({
      layers: [
       new ol.layer.Tile({
        source: new ol.source.BingMaps({
         key: 
      'AudCyoI6al0eAZmQhwmI1IG9AOdGH8DHHk6PsiGta1faEACulxawFU9KV-XAvZ8f',
         imagerySet: 'AerialWithLabels'
        })
       }),
       layer, vectorLayer
      ],
      target: 'map',
      controls: ol.control.defaults({
       attributionOptions: ({
        collapsible: false
       })
      }),
      view: new ol.View({
       center: [-90.365730, 13.954185],
       zoom: 9,
       projection: 'EPSG:4326'
      })
      });
      // --------------end creation map</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://openlayers.org/en/v4.5.0/css/ol.css" rel="stylesheet"/&gt;
  &lt;script src="https://openlayers.org/en/v4.5.0/build/ol.js"&gt;&lt;/script&gt;
  &lt;script 
    src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"&gt;&lt;/script&gt;
      
      &lt;div id="map" class="map" tabindex="0"&gt;
      &lt;/div&gt;
      &lt;div id="popup"&gt;&lt;/div&gt;
      </code></pre>
  </div>
  </div>
  </p>