Javascript - onclick problem when 2 polygon are returned

Question

I'm just a beginner in javascript. I try to change method of generating map in leaflet using Polish WKT database. And it works but only when 1 position is returned. Onclick don't work when more positions are returned, f.ex. when you seach for "Koty 4" - there are 2 villages with parcel number 4. What am I doing wrong?

        function load(){
            map = L.map('mapa').setView([52, 19], 6);
            L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
            var wmsLayer = L.tileLayer.wms('https://integracja.gugik.gov.pl/cgi-bin/KrajowaIntegracjaEwidencjiGruntow', {
                layers: 'geoportal,dzialki,numery_dzialek,budynki',format: 'image/png', transparent: true,
            }).addTo(map);
            window.osmMap = map;
        }

        function addPolygon(points){
            var gPoints = new Array();
            var _p = points.split(',');
            var cX = 0, cY = 0;
            var p0 = null;
            var gPoints2 = new Array();
            var geojson_pgons = Terraformer.WKT.parse(geomWKT);
            var xMin = 1000, yMin = 1000, xMax = -1000, yMax = -1000;
            for(var i=0;i<_p.length;i++){
                var point = _p[i].split(' ');
                if(p0==null) p0 = point;
                cX += parseFloat(point[0]);
                cY += parseFloat(point[1]);
                xMin = Math.min(xMin,point[0]);
                xMax = Math.max(xMax,point[0]);
                yMin = Math.min(yMin,point[1]);
                yMax = Math.max(yMax,point[1]);
                gPoints.push(new Array(point[1],point[0]));
            }
                map.eachLayer(function(polygon) {
                if( polygon instanceof L.GeoJSON )
                map.removeLayer(polygon);
                }); 
            var polygon = L.geoJson(geojson_pgons, {}).addTo(window.osmMap);
            var bounds = geojson_pgons.bbox();
            window.osmMap.fitBounds([ [bounds[1], bounds[0]], [bounds[3], bounds[2]] ]);    

Answer 1

Change your code to:

var fg;

function load(){
//...
    fg = L.featureGroup().addTo(map);
}

function addPolygon(points){
            var gPoints = new Array();
            var _p = points.split(',');

            fg.clearLayers() //Deleting the old polygons
            var poly = L.polygon([]).addTo(fg);

            for(var i=0;i<_p.length;i++){
                var point = _p[i].split(' ');
                poly.addLatLng([point[1],point[0]]);
            }

            var bounds = poly.getBounds();
            window.osmMap.fitBounds(bounds);
        }

If you add the polygon to a featuregroup you can call fg.clearLayers() to remove old polygons from the map.