Leaflet – How to Show Popup on GeoJSON Layer Data When Button is Clicked

buttonjavascriptleafletpopup

I have a LineString geoJSON data, I want to show popup when button is click. My problem is, it's not showing whenever I click the button. It only shows when I click the LineString itself. My goal is when I click the button, the LineString is added to map and at the same time, the popup will appear.

Here I define the geoJSON data:

var building_path = L.geoJson(null, {
    style: function (feature) {
        return {
            color: "black",
            fill: false,
            opacity: 1,
            weight: 3,
        };
    },
});

Here I added the geoJSON data and the popup:

function getGeojsonPath() {

    var start = document.getElementById("startingArea").value;
    var finish = document.getElementById("destinationArea").value;

    if (start == "Building A" && finish == "Building B") {

        $.getJSON("data/pathData/be/be-ab-path.geojson", function (data) {
            if (map.hasLayer(building_path)) {
              building_path.clearLayers();
            } else {
                building_path
                  .addTo(map)
                  .bindPopup("<p>test</p>" + "<p>test2</p>")
                  .openPopup();
                removePathBtn();
              }
        
            building_path.addData(data);
        });
        return false;
    }
}

Here is my geoJSON data:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "DISTANCE": 0.128238
        },
    "geometry": {
        "type": "LineString",
        "coordinates": [
            [120.34215550457571, 16.04672731771538],
            [120.3421395789594, 16.046759377869236],
            [120.34199188984383, 16.046696224082183],
            [120.34195685348942, 16.046680918980528],
            [120.34190473925673, 16.0467853975548],
            [120.34183098633275, 16.04692564604781],
            [120.34178917672887, 16.047004675701842],
            [120.34170095261294, 16.047175802371285],
            [120.3416524279819, 16.047268828157797],
            [120.3416160505979, 16.047337298215382],
            [120.3417702905748, 16.047410303844615],
            [120.3417585559111, 16.047433986389535]
        ]
      }
    }
  ]
}

Then the button:

$("#start-btn").click(function () {
    $("#navigateModal").modal("hide");
    getGeojsonPath(); //geoJSON LineString
    return false;
});

Best Answer

Problem in your code is that your are opening popup only the first time layer is added to the map, and not subsequently when content of layer is cleared and new data added. Popup has to be opened each time.

Relevant part of the code could then look something like this:

$.getJSON("data/pathData/be/be-ab-path.geojson", function (data) {
  if (map.hasLayer(building_path)) {
    building_path.clearLayers();
  } else {
    building_path
      .addTo(map)
      .bindPopup("<p>test</p>" + "<p>test2</p>")
    removePathBtn();
  }
  building_path.addData(data);
  building_path.openPopup();
});
Related Question