How to create a simple draggable marker in OpenLayers

Question

Very simple question, how can I create a draggable marker in an OpenLayers map, and get the latlon when its been dragged. From google, it seems that you can have draggable vectors, but not draggable markers.

I've seen some references to OpenLayers.Control.DragMarker, but this doesn't seem to be in the "core" library. It's used in this example but that seems to be using a custom OpenLayers JS file, so I have no idea how to go about including that in my code.

Code thus far (to add a simple marker):

var layer = new OpenLayers.Layer.TMS( "TMS The Layer","",
    {  url: '', serviceVersion: '.', layername: '.', alpha: true,
        type: 'png', getURL: overlay_getTileURL 
    });

map.addLayers([layer]);


    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    var lonLat = new OpenLayers.LonLat( -100 ,100 );
    markers.addMarker(new OpenLayers.Marker(lonLat));

Almaalmaata

Answer 1

I've done that, but I can't find that code now. Take a look at this OpenLayers Example:

Drag Feature

Pegeen

Thanks. Looks like I can work with something like that, I'll give it a go – Almaalmaata

Great, try it out and decide which answer that deserves the "solution" mark. ;-) – Pegeen

Yep, and using "features" as used in this example is indeed the correct way to do this. Thnx – Almaalmaata

Answer 2

Can you change the markers with features? look this link

Favour

I'd rather stick with simple markers if possible, unless this isn't supported – Almaalmaata

Answer 3

I've struggled with that a bit, until I dag into the documentation and realized that in 2022 it is very easy to do that:

const translate = new Translate({
   features: new Collection([feature]),
})

translate.on('translateend', e => {
   let lonLat = toLonLat(e.coordinate)
})

map.addInteraction(translate)

Peppy