[OpenLayers-Dev] New DragFeature Control and SelectFeatureControl cross layers. Want to share

[Andre Pereira de Matos]

Hi,

I sent the code and a short explanation to OpenLayers dev and users...

I didn't see your code yet... But I promise that I will.
Thanks for sharing ;)

Here is the mail, that I sent:

I have done controls and handlers to handle events in features that are in different layers (with OpenLayers controls you only can handle events in a single layer, and that layer must be on the top), and as I received on mail requests to share my code, I decided to send it for the list. With an explanation how it works.



Actually I made two controls, FeatureEventHandlerControl and DragFeatureControl and an handler (FeatureHandler) to help the FeatureEventHandlerControl.

This two controls works pretty like the SelectFeature and DragFeature OpenLayers controls, but they work cross layers. They don't care about the layers. When you want to get an event from a feature, you must register that feature on the control, and when that event occurres you will be notified.

For example:

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Var dragControl = new Sapo.Control.DragFeatureControl([], {
                                                                 'dragstart': { callback: function(feacture, pixel){/*do something*/} context: this}
                                                                 'drag': { callback: function(feacture, pixel){/*do something*/} context: this}                                                                                                                      'dragend': { callback: function(feacture, pixel){/*do something*/} context: this}
                                                           }
                                                     );
Var featureEvtHandler = new Sapo.Control.FeatureEventHandlers([], {
                                                                       'click': { callback: function(feacture, pixel){/*do something*/} context: this}
                                                                       'mouseover': { callback: function(feacture, pixel){/*do something*/} context: this}
                                                                       'mouseout': { callback: function(feacture, pixel){/*do something*/} context: this}
                                                                  }
                                                             );

Map.addControl(dragControl);
Map.addControl(featureEvtHandler);

dragControl.activate();
featureEvtHandler.activate();

Var layer1 = new OpenLayers.Layer.Vector("Markers",
                                         {
                                               projection: new OpenLayers.Projection("EPSG:4326"),
                                               styleMap: new OpenLayers.StyleMap({
                                                           externalGraphic: "http://openlayers.org/dev/img/marker-gold.png",
                                                           backgroundGraphic: "http://openlayers.org/dev/examples/marker_shadow.png",
                                                           graphicYOffset: -20,
                                                           backgroundXOffset: 0,
                                                           backgroundYOffset: -17,
                                                           pointRadius: 10
                                               })

                                         }
                        );

Var layer2 = new OpenLayers.Layer.Vector("Markers 2",
                                         {
                                               projection: new OpenLayers.Projection("EPSG:4326"),
                                               styleMap: new OpenLayers.StyleMap({
                                                           externalGraphic: "http://openlayers.org/dev/img/marker-gold.png",
                                                           backgroundGraphic: "http://openlayers.org/dev/examples/marker_shadow.png",
                                                           graphicYOffset: -20,
                                                           backgroundXOffset: 0,
                                                           backgroundYOffset: -17,
                                                           pointRadius: 10
                                               })

                                         }
                        );

Map.addLayer(layer1);
Map.addLayer(layer2);

Var feature1 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-1904105.3415234375, 4392319.753066596)); Var feature2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-1504105.3415234375, 4392319.753066596));

Layer1.addFeatures([feature1]);
Layer2.addFeatures([feature2]);

dragControl.addFeature(feature1);
featureEvtHandler.addFeature(feature2);

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

When occurs an event(dragstart, drag, dragend, click, mouseover, mouseout) in any of this features, in different layers, the callbacks will be notified.

If you have any questions just ask us (André or João)!

Regards,
André Matos
http://maps.sapo.pt



-----Original Message-----
From: andreas.hocevar at gmail.com [mailto:andreas.hocevar at gmail.com] On Behalf Of Andreas Hocevar
Sent: quinta-feira, 15 de Janeiro de 2009 15:11
To: Andre Pereira de Matos
Cc: dev at openlayers.org; users at openlayers.org
Subject: Re: [OpenLayers-Dev] New DragFeature Control and SelectFeatureControl cross layers. Want to share

Hi Andre,

2009/1/13 Andre Pereira de Matos <andre.matos at co.sapo.pt>:
> I have made a Project with openlayers, and at some point I had to make a new
> handler and a new control to provide draggable feature and handle events
> like, click, mouseover, mouseout in features that was in different layers.
>
> The Openlayers control (DragFeature, SelectFeature) and handlers (Drag,
> Feature) only works if the features are all in the same layer and the layer
> is on the top.

I have no experience with the DragFeature control, but I have created
a solution for feature selection that works with multiple layers
recently [1]. An example is also avaialable [2].

You may want to check this out, and I'd be interested to see your
approach. Also, it would be cool to see if my approach also works with
the DragFeature control.

Regards,
Andreas.

[1] http://trac.openlayers.org/ticket/1666
[2] http://dev.openlayers.org/sandbox/ahocevar/singleroot/openlayers/examples/select-feature-multilayer.html

--
Andreas Hocevar
OpenGeo - http://opengeo.org/
Expert service straight from the developers.