From travis.stude at riverside.com  Thu Aug 16 10:42:34 2012
From: travis.stude at riverside.com (Travis Stude)
Date: Thu, 16 Aug 2012 11:42:34 -0600
Subject: [North America] Hover, Popup, Click
Message-ID: <002501cd7bd6$85755750$906005f0$@stude@riverside.com>

Hi All,

 

I have three Select Features that I would like to place on a map.  One is to
highlight a section of a kml on hover, one is to create a popup of a section
for that kml on hover, and one is to fire a click event.  Please see code
below.  I am able to combine the popup and the highlight into one
SelectFeature and get it to work.  However when I have all three either as
two or three features the select control feature starts to fire the
onUnselect event.  The click is then fired only on double click.  I can get
the click to work if I add highlightOnly to the popup control (this is how I
found out I can combine the highlight and hover), but then the popup does
not work.  

 

I have also tried using clickFeature added to the Hover Popup SelectFeature.
This fires an event like I expect, but I have not found out how to select
multiple using this or how to show which item was selected by highlighting
the map as the SelectFeature does when I use it separately. 

 

Does anyone have any ideas of what else I can try?  Thank you in advance for
any suggestions.

 

Thanks,
TJ

 

//Highlight Control

    function getHoverControl(basinLayer) {

        return new OpenLayers.Control.SelectFeature(basinLayer, {

            hover: true,

            highlightOnly: true,

            renderIntent: "temporary"

        });

    }

 

//Hover Popup

    function getHoverPopupControl(basinLayer, map) {

        return new OpenLayers.Control.SelectFeature(

                          basinLayer, {

                              hover: true,

                              //                              highlightOnly:
true,

                              renderIntent: "temporary",

                              onBeforeSelect: function (feature) {

                                  // add code to create tooltip/popup

                                  popup = new OpenLayers.Popup.FramedCloud(

                                  "",

 
feature.geometry.getBounds().getCenterLonLat(),

                                  new OpenLayers.Size(100, 100),

                                  "<div><div>Name: " + feature.data.name +
"</div><div>Description: " + feature.data.description + "</div></div>",

                                  null,

                                  true,

                                  null);

 

                                  feature.popup = popup;

 

                                  map.addPopup(popup);

                                  // return false to disable selection and
redraw

                                  // or return true for default behaviour

                                  return true;

                              },

                              onUnselect: function (feature) {

                                  // remove tooltip

                                  map.removePopup(feature.popup);

                                  feature.popup.destroy();

                                  feature.popup = null;

                              }

                          });

    }

 

//Select control

    function getSelectControl(basinLayer) {

        return new OpenLayers.Control.SelectFeature(basinLayer, {

            multipleKey: "ctrlKey",

            toggle: true,

            onSelect: function (f) {

                basinSelected(f.data);

            },

            onUnselect: function (f) {

                basinUnselected(f.data);

            }

        });

    }

 

 

 

 

Travis Stude

Software Developer

Riverside Technology, inc.

2950 East Harmony Road, Suite 390

Fort Collins, CO 80528

Direct: (970) 498-1862

http://www.Riverside.com

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/northamerica/attachments/20120816/507c795f/attachment.html>