How to add MouseOver handler to a VectorFeature in GWT-Openlayers

Question

I want to show a custom tooltip (popup) when user hovers over a Vector Feature on the GWT-openlayers map. I know that SelectFeature.setHover() will allow me to do this but that will also select the feature which i dont want to have.

it is like, when the user hovers, tooltip must be shown and when he clicks on the feature, then selection muse happen.

how can this be achieved?

Regards Jatin

Answer 1

Check out this code. This will also be added to our showcase but we have a little problem with the server at the moment. Will give a shout here when it is uploaded.

Note that the order in which you add the SelectFeature controls is important.

public void buildPanel() {
    // create some MapOptions
    MapOptions defaultMapOptions = new MapOptions();
    defaultMapOptions.setNumZoomLevels(16);

    // Create a MapWidget
    final MapWidget mapWidget = new MapWidget("500px", "500px",
            defaultMapOptions);

    // Create an EmptyLayer as base layer
    EmptyLayer.Options emptyLayerOptions = new EmptyLayer.Options();
    emptyLayerOptions.setAttribution("EmptyLayer (c) GWT-Openlayers");
    emptyLayerOptions.setIsBaseLayer(true); // make it a baselayer.
    EmptyLayer emptyLayer = new EmptyLayer("Empty layer", emptyLayerOptions);
    mapWidget.getMap().addLayer(emptyLayer);

    // Add a clickable vectors to the map

    // create a layer to add the vectors to
    final Vector vectorLayer = new Vector("Vectorlayer");
    mapWidget.getMap().addLayer(vectorLayer);

    // SelectFeature control to capture clicks on the vectors
    final SelectFeature selectFeature = new SelectFeature(vectorLayer);
    selectFeature.setAutoActivate(true);

    // SelectFeature control to capture hover on the vectors
    SelectFeatureOptions selectFeatureHoverOptions = new SelectFeatureOptions();
    // use the tempory style to be defined in the StyleMap      
    selectFeatureHoverOptions.setRenderIntent(RenderIntent.TEMPORARY); 
    selectFeatureHoverOptions.setHighlightOnly(true);
    selectFeatureHoverOptions.setHover();
    SelectFeature selectHoverFeature = new SelectFeature(vectorLayer,
            selectFeatureHoverOptions);
    selectHoverFeature.setClickOut(false);
    selectHoverFeature.setAutoActivate(true);

    mapWidget.getMap().addControl(selectHoverFeature);
    mapWidget.getMap().addControl(selectFeature);

    // Define a style for the vectors
    Style style = new Style();
    style.setFillColor("red");
    style.setStrokeColor("green");
    style.setStrokeWidth(2);
    style.setFillOpacity(0.9);
    style.setPointRadius(30);

    Style selectedStyle = new Style();
    selectedStyle.setFillColor("yellow");
    selectedStyle.setStrokeColor("yellow");
    selectedStyle.setStrokeWidth(2);
    selectedStyle.setFillOpacity(0.9);
    selectedStyle.setPointRadius(30);

    Style hoverStyle = new Style();
    hoverStyle.setFillColor("blue");
    hoverStyle.setStrokeColor("pink");
    hoverStyle.setStrokeWidth(2);
    hoverStyle.setFillOpacity(0.9);
    hoverStyle.setPointRadius(30);

    StyleMap styleMap = new StyleMap(style, selectedStyle, hoverStyle);
    vectorLayer.setStyleMap(styleMap);

    // Add a point
    Point point = new Point(146.7, -41.8);
    final VectorFeature pointFeature = new VectorFeature(point);
    vectorLayer.addFeature(pointFeature);

    // capture clicks on the vectorlayer
    vectorLayer
            .addVectorFeatureSelectedListener(new VectorFeatureSelectedListener() {
                public void onFeatureSelected(
                        FeatureSelectedEvent eventObject) {
                    Window.alert("The vector is now selected.\nIt will get de-selected when closing this popup.");
                    selectFeature.unSelect(eventObject.getVectorFeature());
                }
            });

    // Attach a popup to the point, we use null as size cause we set
    // autoSize to true
    // Note that we use FramedCloud... This extends a normal popup and
    // creates is styled as a baloon
    // We want to display this popup on hover, and hide it when hovering
    // ends

    final Popup popup = new FramedCloud("id1",
            pointFeature.getCenterLonLat(), null,
            "<h1>Some popup text</H1><BR/>And more text", null, false);
    popup.setPanMapIfOutOfView(true); // this set the popup in a strategic
                                        // way, and pans the map if needed.
    popup.setAutoSize(true);
    pointFeature.setPopup(popup);

    // capture hover by adding a listener to the control, and display the
    // popup
    selectHoverFeature
            .addFeatureHighlightedListener(new FeatureHighlightedListener() {

                public void onFeatureHighlighted(VectorFeature vectorFeature) {
                    mapWidget.getMap().addPopup(vectorFeature.getPopup());
                }
            });

    // capture unhover, and remove popup
    selectHoverFeature
            .addFeatureUnhighlightedListener(new FeatureUnhighlightedListener() {

                public void onFeatureUnhighlighted(
                        VectorFeature vectorFeature) {
                    mapWidget.getMap()
                            .removePopup(vectorFeature.getPopup());
                }
            });

    // Center and zoom to a location
    mapWidget.getMap().setCenter(new LonLat(146.7, -41.8), 6);

    contentPanel
            .add(new HTML(
                    "<p>This example shows how to add a Vector (point) to map, and do some action when hovering, and another when clicking.</p>"
                            + "<p>"
                            + "<LI>Hover over the point. This will cause a popup to show, and change the style of the point to the temporary style.</LI>"
                            + "<LI>Then when you click the Vector gets selected, gets another style, and a Window.alert is displayed.</LI>"
                            + "<LI>When closing the Window.alert, the Vector gets de-selected.</p>"));

    contentPanel.add(mapWidget);

    initWidget(contentPanel);

    mapWidget.getElement().getFirstChildElement().getStyle().setZIndex(0); 
}

Answer 2

You must indeed use a SelectFeature to achieve this. The secret is that you must pass SelectFeatureOptions with highlight only enabled.

Something like

   SelectFeatureOptions selectFeatureOptions = new SelectFeatureOptions();
   selectFeatureOptions.setHighlightOnly(true);

   SelectFeature selectFeature = new SelectFeature(vectorLayer,selectFeatureOptions);