1

I have a displayed markers for the leaflet-knn on the map and the name of marker is displayed on the div at right-panel. When I click on this list, I want to show the popup on the associated marker. I have to pass selected text on right panel click but how can I show.

This is code so far I have tried.

HTML

<div class="container">
  <div class="row">
    <div id="map"></div>
  </div>

  <div class="right-panel">
    <h3>Nearby Search Result</h3>
    <div id="results">
      <div class="ui list"></div>
    </div>
  </div>
</div>

JS

var gjLayer = L.geoJson(testCities, {
  onEachFeature: onEachFeature
});

function onEachFeature(feature, layer) {
  layer.on('click', function(e) {
    let feature = this.feature;
    let content = "<b>Name:</b> " + feature.properties.name;

    e.latlng.layer.bindPopup(content);
  });
}
$(function() {
  let res;
  const distance = 10000;
  const longitude = myloc.lng;
  const latitude = myloc.lat;

  res = leafletKnn(gjLayer).nearest(
    [longitude, latitude], 5, distance);

  for (i = 0; i < res.length; i++) {
    var result = res[i].layer.feature.properties;
    map.addLayer(res[i].layer);
    searchResult(result);
  }

  function searchResult(result) {
    item = '';
    item = '<div class="item">' + '<div class="content">' + '<a class="header">' + result.name + '</a></div></div>';
    $(".ui.list").append(item);
  }

  $('.content').on('click', function(e) {
    let content = $(this).text();
    onEachFeature(content);
  })
});
1

You need to set the layer ID to an attribute, in my case "Team" (Must be unique) You do this in the onEachFeature function.

onEachFeature: function (feature, layer) {
layer._leaflet_id = feature.properties.Team;

Now in your HTML table on the right side you have the "Team" names in the TD tag. Now I use JQuery to enable an on click event, so if you click on the "Team" name in the table, it grabs the name and fires a map._layers click event. Which is just like clicking on the feature itself, so it opens the feature popup

$('#myTable tr').click(function(x) {
    theTeam = (this.getElementsByTagName("td").item(0)).innerHTML;
    map._layers[theTeam].fire('click');
});

Here is a working example, set the select in the upper right to 500 and click near a point, it creates the table list, and if you click on one it fires the click event and zooms to the point.

http://www.gistechsolutions.com/leaflet/DEMO/baseball/BaseballPanelSelect2.html

  • Thank you very much. Where can I learn about these? – S S Aug 22 '18 at 2:08
  • @SS I picked up on stack exchange just reading questions and answers. Most tutorials are very basic. You were very specific, so just asking someone is likely the best answer. That and Google.. – Bill Chappell Aug 22 '18 at 2:13

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.