Leaflet – How to Remove or Replace Popup Content in GeoJSON Layer in Leaflet

geojsonjavascriptleafletpopup

I'm using Leaflet library, I have this custom navigation route where it shows the route between building A to building B. After the user choose the starting and destination area, a LineString is added to the map and a popup appears giving some information. When I select another path (let's say C to D) the same data in popup will appear.

Here I created variable building_path

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

If the user click start button, it generates the geojson data

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

Here's the function to add GeoJSON data in the map

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

    if (
      (start == "A Building" && finish == "B Building") ||
      (start == "B Building" && finish == "A Building")
    ) {
      $.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>test1</p>"
            );
          removePathBtn();
        }
        building_path.addData(data);
        building_path.openPopup();
      });
    }

    if (
      (start == "C Building" && finish == "D Building") ||
      (start == "D Building" && finish == "C Building")
    ) {
      $.getJSON("data/pathData/be/be-chs-path.geojson", function (data) 
      {
        if (map.hasLayer(building_path)) {
          building_path.clearLayers();
          building_path.clearLayers();
        } else {
          building_path
            .addTo(map)
            .bindPopup(
                "<p>test2</p>"
            );
          removePathBtn();
        }
        building_path.addData(data);
        building_path.openPopup();
      });
    }
}

If I select Building A to B popup appears containing "test1" but when I select C to D popup also shows the same text ("test1"). It should return "test2" instead.

I'm thinking that it is because I already added the data in building_path so it returns the same data. Now, how can I remove/replace the data inside building_path?

Best Answer

Logic of your code is such that you add popup text only if building_path layer is not already added to the map. So if you first select Building A to B, popup "test1" is bound to the layer. When you after that select Building C to D, building_path layer is already added to the map and so popup "test2" is not bound to the layer.

You have to bound popup text each time selection is done. Code could then look something like this:

function addData(data, popupTxt) {
  if (map.hasLayer(building_path)) {
    building_path.clearLayers();
  } else {
    building_path.addTo(map);
    removePathBtn();
  }
  building_path
    .addData(data)
    .bindPopup(
      '<p>' + popupTxt + '</p>'
    )
    .openPopup();
}

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

  if (
    (start == "A Building" && finish == "B Building") ||
    (start == "B Building" && finish == "A Building")
  ) {
    $.getJSON("data/pathData/be/be-ab-path.geojson", function (data) {
      addData(data, 'test1');
    });
  }

  if (
    (start == "C Building" && finish == "D Building") ||
    (start == "D Building" && finish == "C Building")
  ) {
    $.getJSON("data/pathData/be/be-chs-path.geojson", function (data) {
      addData(data, 'test2');
    });
  }
}
Related Question