Add event click into marker openlayers

Question

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.

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.

var centro = ol.extent.getCenter(boundingBox);
crearMarcadores(centro, cc);

The divs if you create them correctly, as I understand it must be a div for each marker.

And where I'm almost sure is my mistake is in:

  var feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature, layer) {
            return feature;
  });

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.

For your valuable help, thank you very much.

  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 

 <link href="https://openlayers.org/en/v4.5.0/css/ol.css" rel="stylesheet"/> <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script> <div id="map" class="map" tabindex="0"> </div> <div id="popup"></div> 

Answer 1

forEachFeatureAtPixel ( api doc ) goes through every feature of every layer at that location. So you might get unexpected results from other layers.

But the function also let's you define a layerFilter which decides if you want to include a layer or not.

Example:

map.addLayer(new ol.layer.Vector({
  source: vectorSource1,
  myKey: 'magic' // arbitrary property to distinguish between the layers
});

map.addLayer(new ol.layer.Vector({
  source: vectorSource2,
  myKey: 'someotherlayer'
});

// this only gives back the first feature at this position
// on the layer with the property `myKey` equal to `'magic'`
const feature = map.forEachFeatureAtPixel(
  pixel,
  function(someFeature){ return someFeature; }, // stop at the very first feature
  {
    layerFilter: function(layer) { return layer.get('myKey') === 'magic'; }
  }
);