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]
| improve this question | | | | |

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
| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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