openlayers simple mouseover on marker

Question

It sounds so simple but I can't find any newbie tutorial: Could anybody give me a simple example how I create (vektor)markers in OpenLayers that open an infowindow on mouseover and even close it on mouseout?

I found parts of this explained but not all of it....

Solution 1

For a simple example of how to do this, you need to do a couple of things:

Create a vector layer to contain your markers and add it to the map:

this.markerLayer = new OpenLayers.Layer.Vector(
    "My Marker Layer",
    { /* configuration options are set here */ }
);
map.addLayer(this.markerLayer);

Create your marker and add it to the map:

var marker = new OpenLayers.Feature.Vector(point, attributes, markerStyle);
this.markerLayer.addFeatures([marker]);

Create a select control for your layer, and register a function to build your popup when the user hovers over your marker:

var selectControl = new OpenLayers.Control.SelectFeature(this.markerLayer, {
    hover: true
});
selectControl.events.register('featurehighlighted', null, onFeatureHighlighted);

Build your popup:

onFeatureHighlighted: function (evt) {
    // Needed only for interaction, not for the display.
    var onPopupClose = function (evt) {
        // 'this' is the popup.
        var feature = this.feature;
        if (feature.layer) {
            selectControl.unselect(feature);
        }  
        this.destroy();
    }

    feature = evt.feature;
    popup = new OpenLayers.Popup.FramedCloud("featurePopup",
            feature.geometry.getBounds().getCenterLonLat(),
            new OpenLayers.Size(100,100),
            "<h2>"+feature.attributes.station_na + "</h2>" +
            "Location: " + feature.attributes.location + '<br/>' +
            "Elevation: " + feature.attributes.elev_,
            null, true, onPopupClose);
    feature.popup = popup;
    popup.feature = feature;
    map.addPopup(popup, true);
}, // ...

Solution 2

You can use marker and popup

example :

var popup;
var marker_layer = new OpenLayers.Layer.Markers( "Markers" );
var size = new OpenLayers.Size(32,32);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon_marker = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',
                                       size, 
                                       offset);
marker = new OpenLayers.Marker(new OpenLayers.LonLat(5.6, 50.6), icon_marker);

//here add mouseover event
marker.events.register('mouseover', marker, function(evt) {
    popup = new OpenLayers.Popup.FramedCloud("Popup",
        new OpenLayers.LonLat(5.6, 50.6),
        null,
        '<div>Hello World! Put your html here</div>',
        null,
        false);
    map.addPopup(popup);
});
//here add mouseout event
marker.events.register('mouseout', marker, function(evt) {popup.hide();});

marker_layer.addMarker(marker);
map.addLayer(marker_layer);

Solution 3

This works for me. Ended up being simple, but took a while:

 var marker = new OpenLayers.Marker(position, icon.clone());           
 boothLayer.addMarker(marker);                                         

 marker.events.register('mouseover', marker, function() {           
   var msg = booth.get('name') +' - ' + booth.get('premises');      
   var popup = new OpenLayers.Popup.FramedCloud("Popup",            
       position, null, '<div>'+msg+'</div>', null, false);          
   map.addPopup(popup);                                             
   marker.events.register('mouseout', marker,                       
     setTimeout( function() { popup.destroy(); }, 4000));           
   });                                                              

Note the 4000 microsecond delay on the mouse out event - maybe could be shorter, depends on your use.

Solution 4

You need to use a selectControl to create your popup. To make it respond to hover instead of click set hover:true in the constructor.

Solution 5

I wrote a working exemple of this with ol 5.2 exemple "Custom Interaction" openlayers.org/en/latest/examples/select-features.html

So you add features to a layer and add it to the map and then you create a new Interaction like this

const interact = new ol.interaction.Select({condition: ol.events.condition.pointerMove});

It specifies that it will select a feature on hover (pointermove) Then you add it to your map and associate the function that should be called when the interaction selects a feature (i.e. when you hovers over one).

map.addInteraction(interact);
interact.on('select', showInfoWindow);

And you declare your function that shows the info window

function showInfoWindow(evt){
    if(evt.selected.length>0){
        const feature = evt.selected[0];
        const id = feature.getId();

        infoWindow.innerHTML = '<p>' + id + '</p>';
        infoWindow.show();//if you have something like that, you could use an openLayers overlay
    }
}

You should note that the event will return (in this case) an object where you can find the selected feature in the 'selected' attribute when you hover in it. When you hover out, in this case, the same object will be available in the 'deselected' attribute until you select a new one

View more solutions

Comments

[Fedir RYKHTIK]

Thanks. Probably You should add a check, if the marker exists already, and to show it instead of multiple creation. In another way on complex maps it could provoke memory leaks.

[Aerokneeus]

much better solution, as opposed to adding an event to each marker you add to a layer.