[OpenLayers-Users] Trapping lonlat values on mouse drop (mouseup)

Bijoy bijoya at rediff.co.in
Fri Sep 5 05:47:19 EDT 2008


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.




More information about the Users mailing list