QGIS- Leaflet (Customizing OnClick event)

I have difficulty adding code to customize actions/ events when clicking on a polygon using Leaflet web map.

The ultimate goal is not only showing that little pop-up but also a info slider HTML code to be added by my self. Currently I suspect this may be the place to add or change something but not really sure:

function pop_LotDrawing_2(feature, layer) {
        layer.on({
            mouseout: function(e) {
                for (i in e.target._eventParents) {
                    e.target._eventParents[i].resetStyle(e.target);
                }
            },
            mouseover: highlightFeature,
        });
        var popupContent = '<table>\
                <tr>\
                    <td colspan="2"><strong>Lot</strong><br />' + (feature.properties['Lot'] !== null ? Autolinker.link(String(feature.properties['Lot'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <th scope="row">Design</th>\
                    <td>' + (feature.properties['Design'] !== null ? Autolinker.link(String(feature.properties['Design'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <th scope="row">Area (sqm)</th>\
                    <td>' + (feature.properties['Area (sqm)'] !== null ? Autolinker.link(String(feature.properties['Area (sqm)'])) : '') + '</td>\
                </tr>\
            </table>';
        layer.bindPopup(popupContent, {maxHeight: 400});

Eventually, I want to realize something like this website: http://novieveshki.ru/map/

enter image description here

Solution

One way of doing this might be to create an array that will hold all of your polygon features. You can add all of your polygons to this array, then loop over the elements in the array to attach an event handler and add it to the map. You can attach the event handler using polygon.on().

Here's an example where I add a circle and triangle to the map. I give both of these shapes a description. I then add them to the polygons array, and once they're initialized, I loop over the array to attach the event handler and add them to the map. Click "Run Snippet" to give it a try (it will probably be easier to see on the full screen view).

You can style the sidebar however you'd like, and modify the event handler and/or CSS to create an animation effect if desired.

Hope this gets your on the right track.

let map = new L.Map('map');
// polygons array to hold all polygons
let polygons = [];

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
  maxZoom: 18
}).addTo(map);

// Location to center the map
let london = new L.LatLng(51.505, -0.09);
map.setView(london, 13);

// Create a circle around a point
let circleLocation = new L.LatLng(51.508, -0.11),
  circleOptions = {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
  };

let circle = new L.Circle(circleLocation, 500, circleOptions);
// This is what will be displayed in the sidebar on click
circle.desc = "You clicked a circle!";
// Add the circle to the polygons array
polygons.push(circle);

// Create a triangle with vertices below
let p1 = new L.LatLng(51.509, -0.08),
  p2 = new L.LatLng(51.503, -0.06),
  p3 = new L.LatLng(51.51, -0.047),
  polygonPoints = [p1, p2, p3];

let polygon = new L.Polygon(polygonPoints);
// This is what will be displayed in the sidebar on click
polygon.desc = "You clicked a triangle!";
// Add the triangle to the polygons array
polygons.push(polygon);

// Loop over all elements in the polygons array and attach the event handler and add the element to the map
polygons.forEach(function (i) {
	i.on("click", changeSidebar);
  map.addLayer(i);
});

// Basic event handler that just changes the sidebar innerHTML to the element's `desc` property defined above.
function changeSidebar (event) {
	sidebar.innerHTML = event.target.desc;
}

#sidebar {
  width: 30%;
  height: 500px;
  position: absolute;
  right: 0;
  background-color: #c3c3c3;
}

#map {
  width: 70%;
  height: 500px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<div id="sidebar"></div>
<div id="map"></div>