[OpenLayers-Users] click/hover select controls on one layer

Sun Feb 21 14:45:47 EST 2010

Hi Rob,

you have run into a common OpenLayers annoyance: controls with mouse 
handlers involved have different behavior, depending on the order they 
are added, activated. To make your example work, you just have to change 
the order of your SelectFeature controls to look like this:

        //*
        map.addControl(selectControlHover);
        selectControlHover.activate();
        /**/

        map.addControl(selectControlClicks);
        selectControlClicks.activate();

Regards,
Andreas.

Robert Marianski wrote:
> On Thu, Feb 18, 2010 at 07:01:57PM +0100, Andreas Hocevar wrote:
>> Andreas Hocevar wrote:
>>> Hi Rob,
>>>
>>> Robert Marianski wrote:
>>>> I want to be able to handle both hover and click events on features in a
>>>> vector layer. I created two select controls, one with hover set to true,
>>>> added them to the layer, and activated them.
>>>>
>>>> What I'm seeing is that the click select control doesn't receive any of
>>>> featured selected events, but the hover select control does receive the
>>>> hover events. If I don't add the hover select control but only the click
>>>> select control, then I do receive all the click events.
>>> This is because by default, hovering over a feature also selects
>>> it. You can change that easily by configuring the one that you use
>>> for hover with
>>>
>>> highlightOnly: true
>> Meaning, configure the SelectFeature control that you use for hovering with:
>>
>> {
>>     hover: true,
>>     highlightOnly: true
>> }
>>
>> Regards,
>> Andreas.
>>> Hope this helps,
>>> Andreas.
> 
> I gave that a shot, but it didn't work for me. I've created a simple
> example below to reproduce the issue I'm seeing. I've tried it both with
> the current nightly version of openlayers, as well as this one:
> http://openlayers.org/api/OpenLayers.js
> 
> When the hover event gets called, it looks like there aren't any
> selected features, regardless of whether I have the highlightOnly option
> set or not. Thoughts?
> 
> Thanks,
> Robert
> 
> 
> <html>
>   <body>
>     <div id="map" style="width: 100%, height: 100%"></div>
>     <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
>     <!-- nightly version commented out below -->
>     <!--script type="text/javascript" src="OpenLayers.js"></script-->
>     <script type="text/javascript">
>       (function() {
>        map = new OpenLayers.Map('map', {
>          projection: new OpenLayers.Projection('EPSG:4326'),
>          displayProjection: new OpenLayers.Projection('EPSG:4326'),
>          maxExtent: new OpenLayers.Bounds(-73.99596523804, 40.581940549315, -73.76216244263, 40.855225461425)
>        });
>        var baseLayer = new OpenLayers.Layer.WMS("BaseLayer", 'http://maps.opengeo.org/geowebcache/service/wms',
>          {format: 'image/png', layers: 'openstreetmap'},
>          {isBaseLayer: true}
>        );
> 
>        var vectorLayer = new OpenLayers.Layer.Vector('vectorLayer', {});
>        var lineString = new OpenLayers.Geometry.LineString([
>          new OpenLayers.Geometry.Point(-73.9335, 40.7601),
>          new OpenLayers.Geometry.Point(-73.9115, 40.7612)
>        ]);
>        var vectorFeature = new OpenLayers.Feature.Vector(lineString, {}, {strokeWidth: 8, strokeColor: '#ff0000'});
>        vectorLayer.addFeatures(vectorFeature);
> 
>        var selectControlClicks = new OpenLayers.Control.SelectFeature(vectorLayer, {
>          onSelect: function(feature) {
>            console.log('select: number of selected features: ' + vectorLayer.selectedFeatures.length);
>          },
>          onUnselect: function(feature) {
>            console.log('unselect: number of selected features: ' + vectorLayer.selectedFeatures.length);
>          },
>        });
>        var selectControlHover = new OpenLayers.Control.SelectFeature(vectorLayer, {
>          hover: true,
>          highlightOnly: true,
>          overFeature: function(feature) {
>            console.log('hover: number of selected features: ' + vectorLayer.selectedFeatures.length);
>          },
>          outFeature: function(feature) {
>            console.log('hover out: number of selected features: ' + vectorLayer.selectedFeatures.length);
>          },
>        });
> 
>        map.addControl(selectControlClicks);
>        selectControlClicks.activate();
> 
>        //*
>        map.addControl(selectControlHover);
>        selectControlHover.activate();
>        /**/
> 
>        map.addLayer(baseLayer);
>        map.addLayer(vectorLayer);
>        map.zoomToExtent(vectorLayer.getDataExtent());
>       })();
>     </script>
>   </body>
> </html>

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