How to make a marker dragable in openlayers 5 without triggering drag when I click marker

Question

The problem is, when i click on the marker, then translate event is also triggered and infowindow popup will be started twice.

How to stop triggering onclick event ?

Click code

map.on("click", function (e) {
        map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
            //do something

            var event = new CustomEvent('markerClick', {
                detail: {
                    marker: feature
                }
            });
            window.dispatchEvent(event);
        })
    });

window.addEventListener('markerClick', function (evt) {

        var marker = evt.detail.marker;
        infoWindowInnerHtml(marker, marker.object.name, marker.object.label);
    });

Drag code

var startDrag = function (marker) {

var translate = new ol.interaction.Translate({
    features: new ol.Collection([marker])
});
map.addInteraction(translate);

translate.on('translateend', function (evt) {

    //const coords_click = ol.proj.transform(evt.coordinate, 'EPSG:3857', map.getView().getProjection());
    const coords_click = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
    // MOUSE CLICK: Longitude
    const lon = parseFloat(coords_click[0]);
    // MOUSE CLICK: Latitude
    const lat = parseFloat(coords_click[1]);

    const data_for_url = {lon: lon, lat: lat, format: "json", limit: 1};
    const encoded_data = Object.keys(data_for_url).map(function (k) {
        return encodeURIComponent(k) + '=' + encodeURIComponent(data_for_url[k])
    }).join('&');

    $.get('https://nominatim.openstreetmap.org/reverse?' + encoded_data, function (data) {

        marker.position.lng = function () {
            return parseFloat(lon);
        };
        marker.position.lat = function () {
            return parseFloat(lat);
        };
        marker.object['object_address'] = formatAddress(data.address);
        var name = formatName(data.address);

        infoWindowInnerHtml(marker, name, marker.object['object_address']);
    });
});

};

Try using `map.on('singleclick', ..` .(defined as "a true single click with no dragging and no double click") — Mike, Sep 07 '19 at 08:23
translate.on('translateend', function (evt) { makse also click, but i dont want that — user2573099, Sep 12 '19 at 02:38

score 1 · Answer 1 · answered Sep 12 '19 at 08:55

You could try something like this to detect clicks during the translate

var translating = false;

map.on("singleclick", function (e) {
    if (!translating) {

            //do something

    }
});


translate.on('translatestart', function (evt) {
    translating = true;
});

translate.on('translateend', function (evt) {

            //do something else

    translating = false;
});

How to make a marker dragable in openlayers 5 without triggering drag when I click marker

1 Answers1