I am developing a Leaflet map app where we can view and find people in need of essential help. Currently, my map app looks like this picture:
with markers and details of the markers beside the map. In this example, all markers are in map bounds.
How do I do so that when we pan the map to other places, the sidebar will only show the details of visible markers? Currently, I implement it so that it just lists all details and marker details stored in a database. The current code is like this:
<div class=" ">
<div class="text-center">
<h2>SOS Berhampiran</h2>
</div>
<div class="beneflist">
<h3>Perlu Bantuan</h3>
@foreach($beneficiary as $key => $data)
<div class="helpsquare">
<b style="font-size: 25px">{{$data->name}}</b><br>
{{$data->help_needed}}<br>
Jenis Bantuan: <b style="font-size: 20px">{{$data->help_type}}</b>
</div>
@endforeach
</div>
<div class="beneflist">
<h3>Mahu Membantu</h3>
@foreach($donor as $key => $data)
<div class="helpsquare">
<b style="font-size: 25px">{{$data->name}}</b><br>
{{$data->help_offered}}<br>
Jenis Bantuan: <b style="font-size: 20px">{{$data->help_type}}</b><br>
<a href=" " type="buttons" class="btn btn-success">Lihat Bantuan</a>
</div>
@endforeach
</div>
</div>
This is the js used to reiterate the table contents
<script>
const beneficiary = [
@foreach($beneficiary as $key => $data)
[ "{{$data->lat}}" , "{{$data->lng}}" , "{{$data->name}}", "{{$data->help_type}}"],
@endforeach
];
const donor = [
@foreach($donor as $key => $data)
[ "{{$data->lat}}" , "{{$data->lng}}" , "{{$data->name}}", "{{$data->help_type}}"],
@endforeach
];
</script>
And this is the database table:
