1

I'm using Leaflet 1.7.1. I call function refreshLine(); (see below). I get map with layer line, everything OK. Also with option onEachFeature: tooltipLine.

Function for load lines returns GeoJSON with table line and all attributes:

function refreshLine() {
            $.ajax({
                url: 'load_data.php',
                
                data: {
                    table: 'line',
                    attribute: "*"
                },
                type: 'POST',
                success: function(response) {
                    arLineIDs = []; //move
                    jsnLine = JSON.parse(response);

                    lyrLine = L.geoJSON(jsnLine, {
                        onEachFeature: tooltipLine
                    }).addTo(mymap);

                },
                error: function(xhr, status, error) {
                    alert("ERROR: " + error);

                }
            });

            function tooltipLine(json, lyr) {
                var att = json.properties;
                lyr.bindTooltip("<h4>Type: " + att.type + "</h4>DN: " + att.dn + "<br>Material: " + att.material);

                 lyr.on('click', function (e) {
                     
                     //need to fill some inputs with this attributes on click
                     var dn = e.target.feature.properties.dn;
                     var material = e.target.feature.properties.material;

                     var dn = document.getElementById('dn').value = dn || "unknown";
                     var material = document.getElementById('material').value = material || "unknown";

                 })
            }
        }

So, this works.

I want in other part of my app get some info on click, all data attributes from clicked Line and push them to another div element. This code below also works. But I can't use both of them combined.

lyr.on('click', function (e) {

    if ($('input').length) {
        $('input').remove(); //removes previous if exist
    }

    var $container = $("#container");
    var attributes = [];
    for (var prop in e.target.feature.properties) {
        var $input = $("<input/>" + prop);
        $input.attr("id", prop);
        $input.val(e.target.feature.properties[prop] || "missing data");
        $container.append($input);

        attributes.push(prop + ": " + e.target.feature.properties[prop]);
        document.getElementById("Select").hidden = true;
        document.getElementById("attEdit").hidden = false;
    }
    return;
})

How can I include both code lyr.on('click'), because they mix with each other and don't want to load refreshLine() again or refreshLineWithAllAttributes(), if you now what I mean.

I can't use both at same time.

  • 1
    Mouse click is a mouse click. How would you differentiate that one click is for this and the other for that? – TomazicM Oct 1 at 15:41
  • Please explain under what conditions would the layer click event change? If we can understand those conditions, then a single click event function can be re-factored out and a conditional branching within it can give you either-or behavior. -- but first, please understand and explain to us what causes the click event behavior to change. – JasonInVegas Oct 1 at 18:42
  • Ok, one button in app is for planning measuring points and it creates point/marker on map click(point type). On click, also must pick few attributes from line where is marker placed and few attributes from poligon where marker is placed. Then second button in app is something like info about features, when you click on map feature (line) you get in sidebar all atributes and values from that object. – ejovrh2 Oct 2 at 8:13
  • 1
    Then in click event processing function just check which one of those buttons is active/pressed and then process event accordingly. – TomazicM Oct 2 at 9:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.