TransWikia.com

Leaflet multiple on('click') actions

Geographic Information Systems Asked by ejovrh2 on March 29, 2021

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.

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP