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

Sun Feb 21 13:59:26 EST 2010

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>