ThinkGeo.com    |     Documentation    |     Premium Support

Tooltip for feature

#1

I want visible tooltip when mouse hover feature like site: techslides.com/demos/openlayers/openlayers-plotting-tooltips2.html 

Is there a way to do this?

#2

Hi, 
  
 Welcome to Map Suite forums! 
 Here is a similar sample in our HowDoI samples, Please open HowDoI samples project in the thinkgeo installation folder and then navigate to  Markers => Add Projected samples. 
 Please let us know if this is fit for you. 
  
 Thanks, 
 Troy

#3

I’d be interested, as well if you figure it out.  

(sorry for hijacking your thread, but as i came here looking for the exact same thing) 



Currently, what I’m doing is making a feature on the server side and adding it to the map, then having a mouse-over event. 

On world maps this results in a 7+ MB file being returned to the client that takes an unacceptable time to load (7-8 seconds sometimes) 



the basic idea is this: 



code behind - at some point on page load once the mapLayer has been created… 



mapLayer.Open(); 

Map1.HighlightOverlay.HighlightStyle = new FeatureOverlayStyle(GeoColor.FromArgb(120, GeoColor.StandardColors.OrangeRed), GeoColor.StandardColors.Red, 1); 

foreach (Feature feature in statesLayer.FeatureSource.GetAllFeatures(ReturningColumnsType.NoColumns)) { 

     Map1.HighlightOverlay.Features.Add(feature.Id, feature); 

} 

mapLayer.Close();



client side: 

OnMapCreated = function (map) { 

     var mapLayer = map.getLayer(“mapLayer”); 

     var selectControl = new OpenLayers.Control.SelectFeature( 

          mapLayer, { 

               hover: true, 

               highlightOnly: true, 

               renderIntent: “temporary”, 

               overFeature: function (feature) { 

                    //make div for the tooltip 

                    popup = new OpenLayers.Popup( “mapPopup”, feature.geometry.getBounds().getCenterLonLat(), 

                                  new OpenLayers.Size(myExtDiv.getWidth() + 10, myExtDiv.getHeight() + 8), 

                                  div, 

                                  null, 

                                  true, 

                                  null); 

                   feature.popup = popup; 

                   map.addPopup(popup); 

             }, 

             outFeature: function (feature) { 

                  // remove tooltip 

                  if (feature.popup) { 

                       map.removePopup(feature.popup); 

                       feature.popup.destroy(); 

                       feature.popup = null; 

                  }

            } 

         }

      }

     map.addLayers([mapLayer]); 

     map.addControl(selectControl); 

     selectControl.activate(); 

}

#4

Hi Maria,



We would like feel happy if anyone can join in the threads in forums.



For the performance issue, we can easily recreate it with contries02.shp in our end. The reason is all the features including in the highlight overlay will transmit to client side with json string, and as those features are polyongs features, that will result to the json string is very large, around 7+ MB size like you noticed. What’s more, because the highlight overlay is mapping the vector layer of OpenLayers, this layer will convert the feature json string to features and then render them on the map. So, we can image how the performance would be by transmitting a big size string and render them.



If your requirement is you want to a popup showing on a point layer, then I think the FeatureSourceMarkerOverlay should be fit for you, but if the popup is showing on an area layer, then it would be a little complex, here is the solution I am thinking:


        
  1. Add the features into a feature layer(InmemoryFeatureLayer or shapeFileFeatureLayer) and add the layer into a layeroverlay, which is mapping the wms layer of OpenLayers.

        

    2.     
  2. In OnMapCreated method, we get the layer and register the mouseover event on this layer.

    3.     
  3. In mouseover handler method, we get the current mouse position and convert it to lonlat. Then we do a callback to the server side by passing the position.

    4.     
  4. In server side, we get the position, then get and return the current feature column information by calling featureLayer.QueryTool.GetFeaturesContaining method.

    5.     
  5. After the callback, we get the column information and to be an openlayers popup content. Then show the popup.


In order to improve the user experience, we can give a delay to call the callback during mouseover.

Hope those helps and if you have any questions on the implements, I will try to build a sample for you if necessary. 



Thanks,

Troy

#5

Hi Troy, 
  
 An example would be appreciated. 
  
 Thank you.

#6

Hi Maria,



I created a sample for this case, please check it.

Thanks,

Troy

002_001_CSharp_Sample.zip (1.63 MB)