OpenLayers 3 icons projection

Question

I'm making a map with OpenLayers 3, I have coordinates (EPSG:3857) in PostgreSQL and the map layer is OSM (same projection that the icons, EPSG:3857).

The problem is that when I increment the zoom, the icons disappear... But if I decrement then the icons won't disappear.

Someone told me that the projection's ICONS and LAYER must be the same.

Can someone help me, please?

I'm new in StackOverFlow,

Thank you for your time,

Enrique.

Note: My code is in JSFiddle, can see here: jsfiddle.net/y3sLksg6/

Answer 1

Try to set the style to each of your markers individually as in the exaple below, which is a copy from your jsfiddle:

function AddMarkers() {
//create a bunch of icons and add to source vector
  var sizeY = Object.size(coordenadas);
  var x = null;
  var y = null;

  for (var i = 0; i < sizeY; i++) {
    x = coordenadas[i].Longitude;
    y = coordenadas[i].Latitude;
    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point([x, y]),
        name: 'Marker ' + i,
        population: 4000,
        rainfall: 500
    });
    markers[i] = [x, y];

    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(({
           anchor: [0.5, 46],
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',
           opacity: 0.75,
           src: './img/circleRed.png'
       }))
    });      
    // This is new !
    iconFeature.setStyle(iconStyle);

    vectorSource.addFeature(iconFeature);
 }
 return vectorLayer;
}