I am currently working on a select element called district, which lists all the districts in the city.
My objective is to apply a filter that will dynamically display only the leaflet markers corresponding to the selected district on the map. Any suggestions on how I can achieve this?
The code snippet below showcases my map component, illustrating how data is fetched and markers are generated:
refresh() {
this.artworkService.retrieveAll().then( (artworkList) => {
this.artworkList = artworkList;
for (const artwork of this.artworkList) {
const popupOptions = { className: 'customPopup' };
const popupInfo =
"<span class='customPopup'><b>" +
artwork.name +
"</b></span>" +
"<br/>" +
artwork.firstname + " " + artwork.lastname +
"<br/>" +
artwork.streetname + artwork.streetnumber + ", " + artwork.zipcode;
console.log(artwork.name);
L.marker([artwork.latitude, artwork.longitude], this.markerIcon)
.addTo(this.map)
.bindPopup(popupInfo, popupOptions);
}
});
}
This is the HTML snippet for the filter functionality:
<div class="leaflet-top leaflet-left">
<div class="filterButton leaflet-control">
<i class="fa fa-filter fa-7x"></i>
<strong class="mt-4">District</strong>
<select class="ml-1" name="zipcode" [(ngModel)]="zipcode">
<option>-All-</option>
<option *ngFor="let zipcode of artworkList">{{zipcode}}</option>
</select>
</div>
</div>