2

I am loading to my map two KML layers for which I add a quasi-similar featuresadded event :

layerICPE = new OpenLayers.Layer.Vector(
    "ICPE (Installations Classées pour la Protection de l'Environnement)", {
        projection: "EPSG:4326",
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "kml/icpe.kml",
            format: new OpenLayers.Format.KML({
                extractStyles: false,
                extractAttributes: true
            })
        }),
        styleMap: styleICPE
    }
);

layerICPE.events.on({
    featuresadded: function(evt) {
        $.ajax({
            type: "GET",
            url: "appel_bdd.php?layer=icpe",
            async: true,
            dataType: "json",
            success: function(data) {
                var taille = evt.features.length;              
                for (var i = 0; i < taille; i++) {
                    var feat = evt.features[i];
                    feat.attributes = data[feat.attributes.ID.value];
                }
                evt.object.redraw();
            }
        });
    }
});

layerVoieFerree = new OpenLayers.Layer.Vector(
    "Voies ferrées", {
        projection: "EPSG:4326",
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "kml/voie_ferree.kml",
            format: new OpenLayers.Format.KML({
                extractStyles: false,
                extractAttributes: true
            })
        }),
        styleMap: new OpenLayers.StyleMap({
            'default': styleVoieFerree
        })
    }
);

layerVoieFerree.events.on({
    featuresadded: function(evt) {
        $.ajax({
            type: "GET",
            url: "appel_bdd.php?layer=voie_ferree",
            async: true,
            dataType: "json",
            success: function(data) {
                var taille = evt.features.length;              
                for (var i = 0; i < taille; i++) {
                    var feat = evt.features[i];
                    feat.attributes = data[feat.attributes.ID.value];
                }
                evt.object.redraw();
            }
        });
    }
});

The only different thing is the value of the variable in the url. Since I will have to add this event to 16 layers, I would like to create a generic function with this value in parameter.

I have isolated the function :

ajoutAttributs = function(evt) {
    var nomlayer = 'icpe';
    $.ajax({
        type: "GET",
        url: "appel_bdd.php?layer=" + nomlayer,
        async: true,
        dataType: "json",
        success: function(data) {
            var taille = evt.features.length;              
            for (var i = 0; i < taille; i++) {
                var feat = evt.features[i];
                feat.attributes = data[feat.attributes.ID.value];
            }
            evt.object.redraw();
        }
    });
};

layerICPE.events.on({
    featuresadded: ajoutAttributs
});

I can't figure how to pass 'nomlayer' as an argument to the function.

I have tried :

ajoutAttributs = function(nomlayer, evt) {...};

layerICPE.events.on({
    featuresadded: ajoutAttributs('icpe', evt)
});

==> Uncaught ReferenceError: evt is not defined

ajoutAttributs = function(nomlayer, evt) {...};

layerICPE.events.on({
    featuresadded: ajoutAttributs('icpe')
});

==> nomlayer gets the correct value but evt is undefined

What am I doing wrong ? How can I pass an argument to this function and avoid typing it 16 times ?

Thanks.

1 Answer 1

0

I believe you are on the right path. The stumbling block that you are facing is that you can have only one event handler. You need two functions. One function adds your layers as you intend. You need another function to register an event handler for each layer. In OpenLayers there is a setup for one event. That's what you are using. You need to use the call where you setup an event handler that supports multiple events for multiple layers. evt is passed into this second procedure. You are dealing with a web browser that is generating the event. evt will be created when the call back is generated by the browser. You can use the OpenLayers example page and search for events or here's another stack exchange example.

2
  • I don't understand what you mean by You need to use the call where you setup an event handler that supports multiple events for multiple layers. Here is what I did : ajoutAttributs = function(evt, nomlayer) {...}; layerICPE.events.on({ featuresadded: function(evt) { ajoutAttributs(evt, 'icpe'); } }); layerVoieFerree.events.on({ featuresadded: function(evt) { ajoutAttributs(evt, 'voie_ferree'); } });
    – Alkwts
    Aug 11, 2014 at 8:00
  • The OpenLayers Select Feature on Multiple Layers Example may be what your are after. View source to look at the code starting with selectControl = new OpenLayers.Control.SelectFeature( [vectors1, vectors2], ... . You will note that multiple layers have to be referenced via [] and then there is a vectors1.events.on({... section for each layer. I don't think you can do this with one function call as you intend.
    – Greg
    Aug 12, 2014 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.