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); }) });
Improve this question

1 Answer 1

Reset to default
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

Improve this answer
2
  • Thank you very much. Where can I learn about these? Commented Aug 22, 2018 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.. Commented Aug 22, 2018 at 2:13

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.