Dragging Markers With Ordnance Survey/openlayers Api

I've created a site link text using the api produced by the Ordnance Survey (I think this is called OpenSpace) which is based on OpenLayers. I've got it so you can click on the map

Solution 1:

The OpenLayers api allows you to add Markers and Features to the map. If you add Features rather than Markers you can make them draggable by adding the following code.

var vectorLayer = newOpenLayers.Layer.Vector("Vector Layer");
var osMap = newOpenSpace.Map('map');
osMap.addLayer(vectorLayer);

var modifyFeaturesControl = newOpenLayers.Control.ModifyFeature(vectorLayer);
modifyFeaturesControl.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
osMap.addControl(modifyFeaturesControl);
modifyFeaturesControl.activate();

This will allow you to drag features around a map. If you want to add custom behavior when feature's are dragged you can register listeners on the vectorLayer. For example to register a listener when features are modifed (i.e. dragged and released) you need to use the following code.

vectorLayer.events.register('featuremodified', vectorLayer, function(feature) {
   //custom behavior
});

For a full list of the events that can be listened to see the OpenLayers api doc OpenLayers api doc

Solution 2:

As easier way to do this is by using the openlayer drag control, which takes a vector layer as a target.

Assuming a vector layer containing icons (this is prefered to markers, which the developers of OL discourage using), called vectors, you can simply do:

var drag=new OpenLayers.Control.DragFeature(vectors);

map.addControl(drag);
drag.activate();

The other advantage of using the drag control is that you can hook into various callbacks, which return the feature and pixel position, such as onStart and onDrag. eg,

var drag=newOpenLayers.Control.DragFeature(vectors,{    
     'onDrag':function(feature, pixel){
           console.log(pixel.x);//this can be used to do something else, such as move another feature
     }
});

See http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Control/DragFeature.js for more details.