To Show selected Icon as Active, when icon or icon list is clicked

I'm using Leaflet for non-geographic image (like floor plan).

Feature to implement:

1. Load the dynamic(markers) icons created on the non geographic image based on x,y coordinates.

   • was able to do this using unproject.

2. On hover of any marker show the product/item details as the popup/tool tip.

   • was able to do this with option - title - add the object data while creating markers.

3. On clicking any item in the list (towards left in the image attached) or corresponding marker in the map container the icon should be shown as active by color change on any simple style.

I'm seeking the solution for the 2 and 3.

Below is the code I tried.

planPos = [
{
  x: 1500,
  y: 500,
  item: 'Sensors',
  Model: 'ABC',
  Make: 'Bosh',
  Elevation: '2.3 meters',
  Criticality: 'High',
  Accessibility: 'Concrete',
  LocationType: 'Kitchen',
  Zone: 'Annexure',
  ZoneType: 'Building',
  Restriction: 'Securenced',
  ZoneNotes: 'The is big sentence at the room level and building',
  PositionDetails: 'One of the position details near the room and details',
  InstallationNotes: 'One of the big resource for the building',
  Status: 'Active'
},
{
  x: 125,
  y: 45
},
{
  x: this.w * 0.5,
  y: this.h * 0.5
}];


mapInit() {
// create the slippy map
this.map = L.map('image-map', {
  attributionControl: false,
  minZoom: 1,
  maxZoom: 4,
  center: [0, 0],
  zoom: 1,
  crs: L.CRS.Simple
});


this.myFeatureGroup = L.featureGroup().addTo(this.map).on("click", this.groupClick);
// calculate the edges of the image, in coordinate space
this.southWest = this.map.unproject([0, this.h], this.map.getMaxZoom() - 1);
this.northEast = this.map.unproject([this.w, 0], this.map.getMaxZoom() - 1);
this.bounds = new L.LatLngBounds(this.southWest, this.northEast);

// add the image overlay, 
// so that it covers the entire map
L.imageOverlay(this.url, this.bounds).addTo(this.map);

// tell leaflet that the map is exactly as big as the image
this.map.setMaxBounds(this.bounds);

this.planPos.forEach(p => {
  L.marker(this.map.unproject([p.x, p.y], this.ACTUAL_SIZE_ZOOM), {
    draggable: true,
    title: `item: ${p.item}
    \n Model: ${p.Model}
    \n Make: ${p.Make}
    \n Elevation: ${p.Elevation}
    \n Criticality: ${p.Criticality}
    \n Accessibility: ${p.Accessibility}
    \n LocationType:  ${p.LocationType}
    \n Zone: ${p.Zone}
    \n ZoneType: ${p.ZoneType}
    \n Restriction: ${p.Restriction}
    \n ZoneNotes: ${p.ZoneNotes}
    \n PositionDetails: ${p.PositionDetails}
    \n InstallationNotes: ${p.InstallationNotes}
    \n Status: ${p.Status}`,
    name: p.Make
  });
 });
}