With drawService function, I add on my map dome circle vectorLayer.

How can I set a click (or hover) event on the added vectors for displaying their long lat coordinates?

function drawService(wktRegion, name, colourValue,strokeColourValue, radiusDim){

    var format = new ol.format.WKT();
    var feature = format.readFeature(wktRegion);
    feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');

    var style=new ol.style.Style({
                    image: new ol.style.Circle({
                        fill: new ol.style.Fill({ color: colourValue }),
                        stroke: new ol.style.Stroke({ color: strokeColourValue }),
                        radius: radiusDim

    var layerVector = new ol.layer.Vector({
            source: new ol.source.Vector({
            features: [feature]

1 Answer 1


for the hover interaction you can use this code:

hoverInteraction = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove,
    layers:[yourLayer]  //Setting layers to be hovered

the features in yourLayer will be highlighted when hovered, now for the select interaction you can either add a:

 var select= new ol.interaction.select({layers : [yourLayer]});
 var selectedFeature=select.getFeatures().item(0); //the selected feature 

or you can add a single click listenner to your map : ( preferred one )

map.on('singleclick', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
        //you can add a condition on layer to restrict the listener
        return feature;
    if (feature) {
        //here you can add you code to display the coordinates or whatever you want to do

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.