code tag to make it readable

Source Link

edit approved Mar 3, 2011 at 18:30

8.6k
1
30
57

    {
    
    
    function tooltipSelect(event){
    var feature = event.feature;
    var selectedFeature = feature;
    //if there is already an opened details window, don\'t draw the 
    tooltip
    if(feature.popup != null){
        return;
    }
    //if there are other tooltips active, destroy them
    if(tooltipPopup != null){
        map.removePopup(tooltipPopup);
        tooltipPopup.destroy();
        if(lastFeature != null){
            delete lastFeature.popup;
            tooltipPopup = null;
        }
    }
    lastFeature = feature;
    var tooltipPopup = new OpenLayers.Popup("activetooltip",
            feature.geometry.getBounds().getCenterLonLat(),
            new OpenLayers.Size(80,12),
            "&nbsp;"+feature.attributes.name,
            true );
    //this is messy, but I'm not a CSS guru
    tooltipPopup.contentDiv.style.backgroundColor='ffffcb';
    tooltipPopup.closeDiv.style.backgroundColor='ffffcb';
    tooltipPopup.contentDiv.style.overflow='hidden';
    tooltipPopup.contentDiv.style.padding='3px';
    tooltipPopup.contentDiv.style.margin='0';
    tooltipPopup.closeOnMove = true;
    tooltipPopup.autoSize = true;
    feature.popup = tooltipPopup;
    map.addPopup(tooltipPopup);
}
//iffunction theretooltipUnselect(event){
 are other tooltips active,var destroyfeature them= event.feature;
    if(tooltipPopupfeature != null && feature.popup != null){
        map.removePopup(tooltipPopupfeature.popup);
    tooltipPopup.destroy();
    iffeature.popup.destroy(lastFeature != null){;
        delete lastFeaturefeature.popup;
        tooltipPopup = null;
        lastFeature = null;
    }
}
lastFeature = feature;
var tooltipPopup = new OpenLayers.Popup("activetooltip",
        feature.geometry.getBounds().getCenterLonLat(),
        new OpenLayers.Size(80,12),
        "&nbsp;"+feature.attributes.name,
        true );
//this is messy, but I'm not a CSS guru
tooltipPopup.contentDiv.style.backgroundColor='ffffcb';
tooltipPopup.closeDiv.style.backgroundColor='ffffcb';
tooltipPopup.contentDiv.style.overflow='hidden';
tooltipPopup.contentDiv.style.padding='3px';
tooltipPopup.contentDiv.style.margin='0';
tooltipPopup.closeOnMove = true;
tooltipPopup.autoSize = true;
feature.popup = tooltipPopup;
map.addPopup(tooltipPopup);

} function tooltipUnselect(event){ var feature = event.feature; if(feature != null && feature.popup != null){ map.removePopup(feature.popup); feature.popup.destroy(); delete feature.popup; tooltipPopup = null; lastFeature = null; } }

//lType: Region-Type //0=Alle, 1=Land, 2=Reg.Bezirk, 3= Kreis, 4=Gemeinde
function loadLayersByColour (lType) {

// alert("in loadLaysersByColour");
// 1.) einmaliges Erstellen der Filterliste fuer WebService Request
if (listRun == false){buildFilterLists(6,0);};
// 2.) entfernen eventuell bereits vorhandener alter Layer
if (listRun != false) {removeLayer(0);};

function onMarkerSelect(event) {
    //unselect 3any previous selections
    tooltipUnselect(event);
    var feature = event.feature;
    var selectedFeature = feature;
    var popup = new OpenLayers.Popup.FramedCloud("activeAlarm",
            feature.geometry.getBounds().getCenterLonLat(),
 aufbauen der Layer         new OpenLayers.Size(100,100),
            "Loading...",
            null, true, onMarkerPopupClose );
    feature.popup = popup;
    popup.setOpacity(0.7);
    map.addPopup(popup);
    //call ajax to get the data
    loadDetails(feature.attributes.description);
}
function onMarkerUnselect(event) {
    var feature = event.feature;
    if(feature.popup) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        delete feature.popup;
    }
}
function onMarkerPopupClose(evt) {
    select.unselectAll();
}

// zunächst  Bundesländer
if (lType==1 || lType==0) {

    // create a wfs layer with the style map
    states = new OpenLayers.Layer.WFS(
           lType: "Bundesländer",Region-Type
            "http://myServer/geoserver/wfs"0=Alle,
            {typename: "myStore:layer"}1=Land,
            {isBaseLayer: false2=Reg.Bezirk, extractAttributes:3= trueKreis, styleMap:4=Gemeinde myStyleMapL}
    );      
   
function loadLayersByColour map.addLayers([states]lType); {

    /*
        ctrlSelectFeatures = new/ OpenLayers.Control.SelectFeaturealert(
                states,
               "in {loadLaysersByColour");
               // 1.) einmaliges Erstellen der clickout:Filterliste true,fuer toggle:WebService false,Request
                    multiple:if false,(listRun hover:== false,
                    toggleKey: "ctrlKey"){buildFilterLists(6, // ctrl key removes from selection0);};
                    multipleKey: "shiftKey" // shift key adds to selection
          2.) entfernen eventuell bereits vorhandener alter }Layer
    if (listRun != false) {removeLayer(0);};

       // map3.addControl(ctrlSelectFeatures);
      aufbauen der ctrlSelectFeatures.activate();Layer

        var aktLayer = 1; //index ofzunächst a vectorlayerBundesländer
       if map.layers[aktLayer].events.register('featureselected',  lType==1 map.layers[aktLayer],|| regFeatureSelectedlType==0);
        map.layers[aktLayer].events.register('featureunselected', map.layers[aktLayer], regFeatureUnselected);{

     *   // create a wfs layer with the style map
        states = new OpenLayers.Layer.WFS(
                "Bundesländer",
                "http://myServer/geoserver/wfs",
                {typename: "myStore:layer"},
                {isBaseLayer: false, extractAttributes: true, styleMap: myStyleMapL}
        );      
        map.addLayers([states]);

        /*
    if (typeof(clickCtrl) !== 'undefined' && clickCtrl != null )ctrlSelectFeatures {= new OpenLayers.Control.SelectFeature(
      alert("clickCtrl defined and not null ");         states,
    } else {alert("clickCtrl undefined or null");};           {
     */        
     // map.addControl(selectL);      clickout: true, toggle: false,
    // map.addControl(clickCtrl);                   multiple: false, hover: false,
                        toggleKey: "ctrlKey", // map.addControl(selectCtrlClick);ctrl key removes from selection
                        multipleKey: "shiftKey" // selectL.activate();shift key adds to selection
    // clickCtrl.activate();               }
    // selectCtrlClick.activate(       );

    // fuer popup
    //selectedControl = new OpenLayers.Controlmap.SelectFeatureaddControl(states,ctrlSelectFeatures);
    //  {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}   ctrlSelectFeatures.activate();

    //AENDERUNG
    //add the main select (for regular select)
   var selectedControlaktLayer = new OpenLayers.Control.SelectFeature(states, {
        toggle: true,
     1; //index of clickout:a true,vectorlayer
        multiple: false,
        onSelect: alertmap.layers[aktLayer].events.register("hier")'featureselected',
    map.layers[aktLayer], }regFeatureSelected);
    states.events.on({ "featureselected": onMarkerSelect, 
         "featureunselected": tooltipUnselectmap.layers[aktLayer].events.register()});
   'featureunselected', //"featureunselected":map.layers[aktLayer], onMarkerUnselect}regFeatureUnselected);

    //add the second select for tooltips:
    var highlightCtrl = new OpenLayers.Control.SelectFeature(states, { 
        hover: true,
        highlightOnly: true,
        renderIntent: "temporary",
        eventListeners: { featurehighlighted: tooltipSelect, 
        featureunhighlighted: tooltipUnselect } });*/

    /    /the*
 order in which you add these lines seemsif to(typeof(clickCtrl) matter!== 'undefined' && clickCtrl != null ) {
          alert("clickCtrl defined and not null ");
        } else {alert("clickCtrl undefined or null");}; 
         */        
        // map.addControl(highlightCtrlselectL);
        // map.addControl(selectedControlclickCtrl);        
    highlightCtrl    // map.addControl(selectCtrlClick);
        // selectL.activate();
    selectedControl    // clickCtrl.activate();
        // selectCtrlClick.activate();

        // fuer popup
        //selectedControl = new OpenLayers.Control.SelectFeature(states,
        //  {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

        //AENDERUNG
        //add the main select (for regular select)
        selectedControl = new OpenLayers.Control.SelectFeature(states, {
            toggle: true,
            clickout: true,
            multiple: false,
            onSelect: alert("hier"),
        });
        states.events.on({ "featureselected": onMarkerSelect, 
            "featureunselected": tooltipUnselect()});
        //"featureunselected": onMarkerUnselect});

        //add the second select for tooltips:
        var highlightCtrl = new OpenLayers.Control.SelectFeature(states, { 
            hover: true,
            highlightOnly: true,
            renderIntent: "temporary",
            eventListeners: { featurehighlighted: tooltipSelect, 
            featureunhighlighted: tooltipUnselect } });

        //the order in which you add these lines seems to matter!
        map.addControl(highlightCtrl);
        map.addControl(selectedControl);
        highlightCtrl.activate();
        selectedControl.activate();



    };

    // Globale Variable für Merken der geladenen Layertypen  setzen
    lStat = lType; 

};

 
// Globale Variable"<div fürstyle='font-size:.8em'>Feature: Merken" der+ geladenenfeature.id Layertypen+"<br />Area: setzen" + feature.geometry.getArea()+"</div>",    
lStatfunction onFeatureSelect(feature) {
    selectedFeature = lType;feature;
    popup = new OpenLayers.Popup.FramedCloud("chicken",

};

// "Feature: " + feature.id +"
Area: " + feature.geometry.getArea()+"",
function onFeatureSelect(feature) { selectedFeature = feature; popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), null, "Feature: " +"
Area: " + "", null, true, onPopupClose); feature.popup = popup; map.addPopup(popup); }; function onFeatureUnselect(feature) { map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; };

function onPopupClose(evt) { selectedControl.unselect(selectedFeature); };

function regFeatureSelected() { aktPopup = create_Popup(); var objF = this.selectedFeatures[0]; var desc = objF.attributes['gen'] ? objF.attributes['gen'] : "about:blank"; $("nodelist").innerHTML = "Selektiertes Land " + ", " + desc; }

function regFeatureUnselected() { if(aktPopup) map.removePopup(aktPopup.popup);

            feature.geometry.getBounds().getCenterLonLat(),
            null,
            "<div style='font-size:.8em'>Feature: "  +"<br />Area: " + "</div>", 
            null, true, onPopupClose);
    feature.popup = popup;
    map.addPopup(popup);
};
function onFeatureUnselect(feature) {
    map.removePopup(feature.popup);
    feature.popup.destroy();
    feature.popup = null;
};

function onPopupClose(evt) {
    selectedControl.unselect(selectedFeature);
};

function regFeatureSelected()
{
    aktPopup = create_Popup();
    var objF = this.selectedFeatures[0];
    var desc   = objF.attributes['gen'] ? objF.attributes['gen'] : "about:blank";
    $("nodelist").innerHTML = "Selektiertes Land " + ", " + desc;
}

function regFeatureUnselected()
{
    if(aktPopup)
        map.removePopup(aktPopup.popup);

    document.getElementById("nodelist").innerHTML = "selected feature description";
}



}

}

{


function tooltipSelect(event){
var feature = event.feature;
var selectedFeature = feature;
//if there is already an opened details window, don\'t draw the 
tooltip
if(feature.popup != null){
    return;
}
//if there are other tooltips active, destroy them
if(tooltipPopup != null){
    map.removePopup(tooltipPopup);
    tooltipPopup.destroy();
    if(lastFeature != null){
        delete lastFeature.popup;
        tooltipPopup = null;
    }
}
lastFeature = feature;
var tooltipPopup = new OpenLayers.Popup("activetooltip",
        feature.geometry.getBounds().getCenterLonLat(),
        new OpenLayers.Size(80,12),
        "&nbsp;"+feature.attributes.name,
        true );
//this is messy, but I'm not a CSS guru
tooltipPopup.contentDiv.style.backgroundColor='ffffcb';
tooltipPopup.closeDiv.style.backgroundColor='ffffcb';
tooltipPopup.contentDiv.style.overflow='hidden';
tooltipPopup.contentDiv.style.padding='3px';
tooltipPopup.contentDiv.style.margin='0';
tooltipPopup.closeOnMove = true;
tooltipPopup.autoSize = true;
feature.popup = tooltipPopup;
map.addPopup(tooltipPopup);

} function tooltipUnselect(event){ var feature = event.feature; if(feature != null && feature.popup != null){ map.removePopup(feature.popup); feature.popup.destroy(); delete feature.popup; tooltipPopup = null; lastFeature = null; } }

//lType: Region-Type //0=Alle, 1=Land, 2=Reg.Bezirk, 3= Kreis, 4=Gemeinde
function loadLayersByColour (lType) {

// alert("in loadLaysersByColour");
// 1.) einmaliges Erstellen der Filterliste fuer WebService Request
if (listRun == false){buildFilterLists(6,0);};
// 2.) entfernen eventuell bereits vorhandener alter Layer
if (listRun != false) {removeLayer(0);};

// 3.) aufbauen der Layer

// zunächst  Bundesländer
if (lType==1 || lType==0) {

    // create a wfs layer with the style map
    states = new OpenLayers.Layer.WFS(
            "Bundesländer",
            "http://myServer/geoserver/wfs",
            {typename: "myStore:layer"},
            {isBaseLayer: false, extractAttributes: true, styleMap: myStyleMapL}
    );      
     map.addLayers([states]);

    /*
        ctrlSelectFeatures = new OpenLayers.Control.SelectFeature(
                states,
                {
                    clickout: true, toggle: false,
                    multiple: false, hover: false,
                    toggleKey: "ctrlKey", // ctrl key removes from selection
                    multipleKey: "shiftKey" // shift key adds to selection
                }
        );

        map.addControl(ctrlSelectFeatures);
        ctrlSelectFeatures.activate();

        var aktLayer = 1; //index of a vectorlayer
        map.layers[aktLayer].events.register('featureselected',   map.layers[aktLayer], regFeatureSelected);
        map.layers[aktLayer].events.register('featureunselected', map.layers[aktLayer], regFeatureUnselected);

     */

    /*
    if (typeof(clickCtrl) !== 'undefined' && clickCtrl != null ) {
      alert("clickCtrl defined and not null ");
    } else {alert("clickCtrl undefined or null");}; 
     */        
     // map.addControl(selectL);
    // map.addControl(clickCtrl);        
    // map.addControl(selectCtrlClick);
    // selectL.activate();
    // clickCtrl.activate();
    // selectCtrlClick.activate();

    // fuer popup
    //selectedControl = new OpenLayers.Control.SelectFeature(states,
    //  {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

    //AENDERUNG
    //add the main select (for regular select)
    selectedControl = new OpenLayers.Control.SelectFeature(states, {
        toggle: true,
        clickout: true,
        multiple: false,
        onSelect: alert("hier"),
     });
    states.events.on({ "featureselected": onMarkerSelect, 
         "featureunselected": tooltipUnselect()});
    //"featureunselected": onMarkerUnselect});

    //add the second select for tooltips:
    var highlightCtrl = new OpenLayers.Control.SelectFeature(states, { 
        hover: true,
        highlightOnly: true,
        renderIntent: "temporary",
        eventListeners: { featurehighlighted: tooltipSelect, 
        featureunhighlighted: tooltipUnselect } });

    //the order in which you add these lines seems to matter!
    map.addControl(highlightCtrl);
    map.addControl(selectedControl);
    highlightCtrl.activate();
    selectedControl.activate();



};

// Globale Variable für Merken der geladenen Layertypen  setzen
lStat = lType;

};

// "Feature: " + feature.id +"
Area: " + feature.geometry.getArea()+"",
function onFeatureSelect(feature) { selectedFeature = feature; popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), null, "Feature: " +"
Area: " + "", null, true, onPopupClose); feature.popup = popup; map.addPopup(popup); }; function onFeatureUnselect(feature) { map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; };

function onPopupClose(evt) { selectedControl.unselect(selectedFeature); };

function regFeatureSelected() { aktPopup = create_Popup(); var objF = this.selectedFeatures[0]; var desc = objF.attributes['gen'] ? objF.attributes['gen'] : "about:blank"; $("nodelist").innerHTML = "Selektiertes Land " + ", " + desc; }

function regFeatureUnselected() { if(aktPopup) map.removePopup(aktPopup.popup);

document.getElementById("nodelist").innerHTML = "selected feature description";

}

    {
    
    
    function tooltipSelect(event){
    var feature = event.feature;
    var selectedFeature = feature;
    //if there is already an opened details window, don\'t draw the 
    tooltip
    if(feature.popup != null){
        return;
    }
    //if there are other tooltips active, destroy them
    if(tooltipPopup != null){
        map.removePopup(tooltipPopup);
        tooltipPopup.destroy();
        if(lastFeature != null){
            delete lastFeature.popup;
            tooltipPopup = null;
        }
    }
    lastFeature = feature;
    var tooltipPopup = new OpenLayers.Popup("activetooltip",
            feature.geometry.getBounds().getCenterLonLat(),
            new OpenLayers.Size(80,12),
            "&nbsp;"+feature.attributes.name,
            true );
    //this is messy, but I'm not a CSS guru
    tooltipPopup.contentDiv.style.backgroundColor='ffffcb';
    tooltipPopup.closeDiv.style.backgroundColor='ffffcb';
    tooltipPopup.contentDiv.style.overflow='hidden';
    tooltipPopup.contentDiv.style.padding='3px';
    tooltipPopup.contentDiv.style.margin='0';
    tooltipPopup.closeOnMove = true;
    tooltipPopup.autoSize = true;
    feature.popup = tooltipPopup;
    map.addPopup(tooltipPopup);
}
function tooltipUnselect(event){
    var feature = event.feature;
    if(feature != null && feature.popup != null){
        map.removePopup(feature.popup);
        feature.popup.destroy();
        delete feature.popup;
        tooltipPopup = null;
        lastFeature = null;
    }
}

function onMarkerSelect(event) {
    //unselect any previous selections
    tooltipUnselect(event);
    var feature = event.feature;
    var selectedFeature = feature;
    var popup = new OpenLayers.Popup.FramedCloud("activeAlarm",
            feature.geometry.getBounds().getCenterLonLat(),
            new OpenLayers.Size(100,100),
            "Loading...",
            null, true, onMarkerPopupClose );
    feature.popup = popup;
    popup.setOpacity(0.7);
    map.addPopup(popup);
    //call ajax to get the data
    loadDetails(feature.attributes.description);
}
function onMarkerUnselect(event) {
    var feature = event.feature;
    if(feature.popup) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        delete feature.popup;
    }
}
function onMarkerPopupClose(evt) {
    select.unselectAll();
}


//lType: Region-Type
//0=Alle, 1=Land, 2=Reg.Bezirk, 3= Kreis, 4=Gemeinde             
function loadLayersByColour (lType) {

    // alert("in loadLaysersByColour");
    // 1.) einmaliges Erstellen der Filterliste fuer WebService Request
    if (listRun == false){buildFilterLists(6,0);};
    // 2.) entfernen eventuell bereits vorhandener alter Layer
    if (listRun != false) {removeLayer(0);};

    // 3.) aufbauen der Layer

    // zunächst  Bundesländer
    if (lType==1 || lType==0) {

        // create a wfs layer with the style map
        states = new OpenLayers.Layer.WFS(
                "Bundesländer",
                "http://myServer/geoserver/wfs",
                {typename: "myStore:layer"},
                {isBaseLayer: false, extractAttributes: true, styleMap: myStyleMapL}
        );      
        map.addLayers([states]);

        /*
            ctrlSelectFeatures = new OpenLayers.Control.SelectFeature(
                    states,
                    {
                        clickout: true, toggle: false,
                        multiple: false, hover: false,
                        toggleKey: "ctrlKey", // ctrl key removes from selection
                        multipleKey: "shiftKey" // shift key adds to selection
                    }
            );

            map.addControl(ctrlSelectFeatures);
            ctrlSelectFeatures.activate();

            var aktLayer = 1; //index of a vectorlayer
            map.layers[aktLayer].events.register('featureselected',   map.layers[aktLayer], regFeatureSelected);
            map.layers[aktLayer].events.register('featureunselected', map.layers[aktLayer], regFeatureUnselected);

         */

        /*
        if (typeof(clickCtrl) !== 'undefined' && clickCtrl != null ) {
          alert("clickCtrl defined and not null ");
        } else {alert("clickCtrl undefined or null");}; 
         */        
        // map.addControl(selectL);
        // map.addControl(clickCtrl);        
        // map.addControl(selectCtrlClick);
        // selectL.activate();
        // clickCtrl.activate();
        // selectCtrlClick.activate();

        // fuer popup
        //selectedControl = new OpenLayers.Control.SelectFeature(states,
        //  {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

        //AENDERUNG
        //add the main select (for regular select)
        selectedControl = new OpenLayers.Control.SelectFeature(states, {
            toggle: true,
            clickout: true,
            multiple: false,
            onSelect: alert("hier"),
        });
        states.events.on({ "featureselected": onMarkerSelect, 
            "featureunselected": tooltipUnselect()});
        //"featureunselected": onMarkerUnselect});

        //add the second select for tooltips:
        var highlightCtrl = new OpenLayers.Control.SelectFeature(states, { 
            hover: true,
            highlightOnly: true,
            renderIntent: "temporary",
            eventListeners: { featurehighlighted: tooltipSelect, 
            featureunhighlighted: tooltipUnselect } });

        //the order in which you add these lines seems to matter!
        map.addControl(highlightCtrl);
        map.addControl(selectedControl);
        highlightCtrl.activate();
        selectedControl.activate();



    };

    // Globale Variable für Merken der geladenen Layertypen  setzen
    lStat = lType; 

};

 
//  "<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>",    
function onFeatureSelect(feature) {
    selectedFeature = feature;
    popup = new OpenLayers.Popup.FramedCloud("chicken", 
            feature.geometry.getBounds().getCenterLonLat(),
            null,
            "<div style='font-size:.8em'>Feature: "  +"<br />Area: " + "</div>", 
            null, true, onPopupClose);
    feature.popup = popup;
    map.addPopup(popup);
};
function onFeatureUnselect(feature) {
    map.removePopup(feature.popup);
    feature.popup.destroy();
    feature.popup = null;
};

function onPopupClose(evt) {
    selectedControl.unselect(selectedFeature);
};

function regFeatureSelected()
{
    aktPopup = create_Popup();
    var objF = this.selectedFeatures[0];
    var desc   = objF.attributes['gen'] ? objF.attributes['gen'] : "about:blank";
    $("nodelist").innerHTML = "Selektiertes Land " + ", " + desc;
}

function regFeatureUnselected()
{
    if(aktPopup)
        map.removePopup(aktPopup.popup);

    document.getElementById("nodelist").innerHTML = "selected feature description";
}



}

edited tags

Link

edited Mar 3, 2011 at 12:09

Pablo

9.9k
6
45
73

Source Link

asked Mar 3, 2011 at 11:35

1amtoo1337

363
1
3
13

Hover/Popup feature problem

im really having an issue here.

I am trying to realise a map where i can hover over the features and they get highlighted (works), then i want to be able to click them (works) , i also want a div to change accordingly to the feature (partially works) and i want the popup to close.

Im aware that this question sounds kind of easy, though ive found out that multiple events on a feature are not an easy task to implement.

The map works as far as : I can hover a field, click on it, get a popup but heres where the fun begins. Once the popup is open i cannot close it anymore. Though the popup can be closed when clicking anywhere outside of the feature , so i think this has got to do with my clickout implementation. so far ive tried some stuff and im not seeing any progress.

If the feature im hovering hasnt been clicked on and i hover out of the feature without clicking, the feature stays selected as if the mouse was still hovering. This effect goes away once the feature has been clicked once, but comes back immediately if you start the procedure again (so hover feature 1-hoverStyle,hoverout-still hoverStyle, click feature 1- clickStyle, clickout- standard style, hover feature2- hoverStyle, hoverout-still hoverStyle, hover feature 1- hoverStyle , hoverOut- no Style ). I hope you can get something out of this information.

so now to the div change. i have it working on another layer, but in the layer with all the select and hover bla, it just doesnt want to work.

Heres some code for you to understand or help me with my Problem:

{


function tooltipSelect(event){
var feature = event.feature;
var selectedFeature = feature;
//if there is already an opened details window, don\'t draw the 
tooltip
if(feature.popup != null){
    return;
}
//if there are other tooltips active, destroy them
if(tooltipPopup != null){
    map.removePopup(tooltipPopup);
    tooltipPopup.destroy();
    if(lastFeature != null){
        delete lastFeature.popup;
        tooltipPopup = null;
    }
}
lastFeature = feature;
var tooltipPopup = new OpenLayers.Popup("activetooltip",
        feature.geometry.getBounds().getCenterLonLat(),
        new OpenLayers.Size(80,12),
        "&nbsp;"+feature.attributes.name,
        true );
//this is messy, but I'm not a CSS guru
tooltipPopup.contentDiv.style.backgroundColor='ffffcb';
tooltipPopup.closeDiv.style.backgroundColor='ffffcb';
tooltipPopup.contentDiv.style.overflow='hidden';
tooltipPopup.contentDiv.style.padding='3px';
tooltipPopup.contentDiv.style.margin='0';
tooltipPopup.closeOnMove = true;
tooltipPopup.autoSize = true;
feature.popup = tooltipPopup;
map.addPopup(tooltipPopup);

} function tooltipUnselect(event){ var feature = event.feature; if(feature != null && feature.popup != null){ map.removePopup(feature.popup); feature.popup.destroy(); delete feature.popup; tooltipPopup = null; lastFeature = null; } }

//lType: Region-Type //0=Alle, 1=Land, 2=Reg.Bezirk, 3= Kreis, 4=Gemeinde
function loadLayersByColour (lType) {

// alert("in loadLaysersByColour");
// 1.) einmaliges Erstellen der Filterliste fuer WebService Request
if (listRun == false){buildFilterLists(6,0);};
// 2.) entfernen eventuell bereits vorhandener alter Layer
if (listRun != false) {removeLayer(0);};

// 3.) aufbauen der Layer

// zunächst  Bundesländer
if (lType==1 || lType==0) {

    // create a wfs layer with the style map
    states = new OpenLayers.Layer.WFS(
            "Bundesländer",
            "http://myServer/geoserver/wfs",
            {typename: "myStore:layer"},
            {isBaseLayer: false, extractAttributes: true, styleMap: myStyleMapL}
    );      
    map.addLayers([states]);

    /*
        ctrlSelectFeatures = new OpenLayers.Control.SelectFeature(
                states,
                {
                    clickout: true, toggle: false,
                    multiple: false, hover: false,
                    toggleKey: "ctrlKey", // ctrl key removes from selection
                    multipleKey: "shiftKey" // shift key adds to selection
                }
        );

        map.addControl(ctrlSelectFeatures);
        ctrlSelectFeatures.activate();

        var aktLayer = 1; //index of a vectorlayer
        map.layers[aktLayer].events.register('featureselected',   map.layers[aktLayer], regFeatureSelected);
        map.layers[aktLayer].events.register('featureunselected', map.layers[aktLayer], regFeatureUnselected);

     */

    /*
    if (typeof(clickCtrl) !== 'undefined' && clickCtrl != null ) {
      alert("clickCtrl defined and not null ");
    } else {alert("clickCtrl undefined or null");}; 
     */        
    // map.addControl(selectL);
    // map.addControl(clickCtrl);        
    // map.addControl(selectCtrlClick);
    // selectL.activate();
    // clickCtrl.activate();
    // selectCtrlClick.activate();

    // fuer popup
    //selectedControl = new OpenLayers.Control.SelectFeature(states,
    //  {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

    //AENDERUNG
    //add the main select (for regular select)
    selectedControl = new OpenLayers.Control.SelectFeature(states, {
        toggle: true,
        clickout: true,
        multiple: false,
        onSelect: alert("hier"),
    });
    states.events.on({ "featureselected": onMarkerSelect, 
        "featureunselected": tooltipUnselect()});
    //"featureunselected": onMarkerUnselect});

    //add the second select for tooltips:
    var highlightCtrl = new OpenLayers.Control.SelectFeature(states, { 
        hover: true,
        highlightOnly: true,
        renderIntent: "temporary",
        eventListeners: { featurehighlighted: tooltipSelect, 
        featureunhighlighted: tooltipUnselect } });

    //the order in which you add these lines seems to matter!
    map.addControl(highlightCtrl);
    map.addControl(selectedControl);
    highlightCtrl.activate();
    selectedControl.activate();



};

// Globale Variable für Merken der geladenen Layertypen  setzen
lStat = lType;

};

// "Feature: " + feature.id +"
Area: " + feature.geometry.getArea()+"",
function onFeatureSelect(feature) { selectedFeature = feature; popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), null, "Feature: " +"
Area: " + "", null, true, onPopupClose); feature.popup = popup; map.addPopup(popup); }; function onFeatureUnselect(feature) { map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; };

function onPopupClose(evt) { selectedControl.unselect(selectedFeature); };

function regFeatureSelected() { aktPopup = create_Popup(); var objF = this.selectedFeatures[0]; var desc = objF.attributes['gen'] ? objF.attributes['gen'] : "about:blank"; $("nodelist").innerHTML = "Selektiertes Land " + ", " + desc; }

function regFeatureUnselected() { if(aktPopup) map.removePopup(aktPopup.popup);

document.getElementById("nodelist").innerHTML = "selected feature description";

}

vector features

Stack Exchange Network

Return to Question

Hover/Popup feature problem