I am currently working on a drag and drop feature of markers, and hopefully
got some help on the new DragMarker class which is yet to be included in the
OpenLayers recent release. Well, now since I have successfully used the
dragging and dropping of markers within map. Now, my new problem is getting
the drop mouse position in lonlat value after I have released the marker to
the new location. Tried the getLonLatFromViewPortPx property, but no help as
it requires the mouse click event.
I am using the new DragMarker Class:
OpenLayers.Handler.Marker = OpenLayers.Class.create();
OpenLayers.Handler.Marker.prototype =
OpenLayers.Class.inherit(OpenLayers.Handler.Feature, {
handle: function(evt) {
var type = evt.type;
var node = OpenLayers.Event.element(evt);
var feature = null;
for (var i = 0; i < this.layer.markers.length; i++) {
if (this.layer.markers[i].icon.imageDiv.firstChild == node) {
feature = this.layer.markers[i];
break;
}
}
var selected = false;
if(feature) {
if(this.geometryTypes == null) {
// over a new, out of the last and over a new, or still on
the last
if(!this.feature) {
// over a new feature
this.callback('over', [feature]);
} else if(this.feature != feature) {
// out of the last and over a new
this.callback('out', [this.feature]);
this.callback('over', [feature]);
}
this.feature = feature;
this.callback(type, [feature]);
selected = true;
} else {
if(this.feature && (this.feature != feature)) {
// out of the last and over a new
this.callback('out', [this.feature]);
this.feature = null;
}
selected = false;
}
} else {
if(this.feature) {
// out of the last
this.callback('out', [this.feature]);
this.feature = null;
}
selected = false;
}
return selected;
},
CLASS_NAME: "OpenLayers.Handler.Marker"
});
OpenLayers.Control.DragMarker = OpenLayers.Class.create();
OpenLayers.Control.DragMarker.prototype =
OpenLayers.Class.inherit(OpenLayers.Control.DragFeature, {
initialize: function(layer, options) {
OpenLayers.Control.prototype.initialize.apply(this, [options]);
this.layer = layer;
this.handlers = {
drag: new OpenLayers.Handler.Drag(
this, OpenLayers.Util.extend({down:
this.downFeature,
move: this.moveFeature,
up: this.upFeature,
out: this.cancel,
done: this.doneDragging
}, this.dragCallbacks)
),
feature: new
OpenLayers.Handler.Marker(
this, this.layer,
OpenLayers.Util.extend({over: this.overFeature,
out: this.outFeature
},
this.featureCallbacks),
{geometryTypes:
this.geometryTypes}
)
};
},
moveFeature: function(pixel) {
//alert((pixel.x - this.lastPixel.x) +" | "+ (pixel.y -
this.lastPixel.y));
var px = this.feature.icon.px.add(pixel.x - this.lastPixel.x,
pixel.y - this.lastPixel.y);;
this.feature.moveTo(px);
this.lastPixel = pixel;
this.onDrag(this.feature, pixel);
},
CLASS_NAME: "OpenLayers.Control.DragMarker"
});
and, This is how I am using it:
var map, layer, vectors, markers, marker, popup;
var lon = 75;
var lat = 20;
var zoom = 3;
var mumbai = new OpenLayers.LonLat(72.82, 18.96);
function init(){
map = new OpenLayers.Map('map', {'maxResolution': 'auto'});
layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?";, {layers: 'basic'});
vectors = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
map.setOptions({restrictedExtent:new OpenLayers.Bounds(-180, -90, 180,
90)});
map.addControl(new OpenLayers.Control.MousePosition());
markers = new OpenLayers.Layer.Markers("");
map.addLayer(markers);
}
function addMarker(){
var url = 'img/marker.png';
var sz = new OpenLayers.Size(10, 15);
var calculateOffset = function(size){
return new OpenLayers.Pixel(-(size.w/2), -size.h);
};
var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
marker = new OpenLayers.Marker(mumbai, icon);
markers.addMarker(marker);
var control = new OpenLayers.Control.DragMarker(markers, {'onComplete':
showBubble})
map.addControl(control);
control.activate();
}
function showBubble(){
// I Need new lanlot position here... <=========================
popup = new OpenLayers.Popup("chicken",
mumbai,
new OpenLayers.Size(100,100),
"example popup",
true);
map.addPopup(popup);
}
Is there any property to get the current mouse location after the drag is
completed? Please help
--
View this message in context:
http://www.nabble.com/Trapping-lonlat-values-on-mouse-drop-%28mouseup%29-tp19326446p19326446.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.
_______________________________________________
Users mailing list
[email protected]
http://openlayers.org/mailman/listinfo/users
