1

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;
});
2
  • @TomazicM that function is basically the 2nd code that I have posted. Yes there's only one line string in each geojson. It's crazy but I hardcoded them one by one, that's why I created that function.
    – Wei Zhang
    Mar 23, 2022 at 17:04
  • Sorry about that, I already edited my post
    – Wei Zhang
    Mar 23, 2022 at 18:08

1 Answer 1

1

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();
});

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.