OSM - show image overlay when hovering over marker

Question

I'm using OpenStreetMap embedded in a page. Here is an example how I create markers - as a features of vector layer:

  map = new OpenLayers.Map("map");
  map.addLayer(new OpenLayers.Layer.OSM());

  // Define markers as "features" of the vector layer:
  var feature1 = new OpenLayers.Feature.Vector(
    new OpenLayers.Geometry.Point(14.4253353, 50.0865514).transform(epsg4326, projectTo), {
      description: 'Slovanský dům'
    }, {
      externalGraphic: 'img/locator.png',
      graphicHeight: 40, graphicWidth: 35, graphicXOffset: -17, graphicYOffset: -40
    }
  );

  var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
  vectorLayer.addFeatures(feature1);

I would like to add an overlay with image for every marker that will show up when hovering mouse pointer over the marker. Is it possible?

Answer 1

this is in 4.5.0 version, hope that helps

HTML elements

<div id="overlay">
    [image/content]
</div>

JS - Getting overlay

var container = document.getElementById('overlay');

JS - Adding to map

var overlay = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
         duration: 250
    }
});
map.addOverlay(overlay);

JS - Setting onHover

var hasFeature = false
map.on('pointermove', function (evt) {
    map.forEachFeatureAtPixel(evt.pixel, function (feature) {
        var coordinate = evt.coordinate;
        overlay.setPosition(coordinate);
        hasFeature = true;
    });
    if (!hasFeature) {
        overlay.setPosition(undefined);
    }
}