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

Eric Lemoine eric.c2c at gmail.com
Fri Sep 5 12:09:59 EDT 2008


Hi. Is "dragging markers" all what you want to achieve, or do you have
some other stuff in mind? (sorry for not fully understanding you
here).

If all you want is effectively "dragging markers" then you can use a
vector layer with externalGraphic and a drag feature control.

Eric

2008/9/5, Bijoy <bijoya at rediff.co.in>:
>
> 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
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>



More information about the Users mailing list