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

Mon Feb 22 10:53:26 EST 2010

On Sun, Feb 21, 2010 at 02:45:47PM -0500, Andreas Hocevar wrote:
> 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.

That indeed worked for me. Thanks!

Robert

> 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.