Leaflet lasso not working

[Kuhu Gupta]

Hello everyone, 

I have created a leaflet map with d3.js circles overlaid on them. Now I am trying to implement lasso feature on the map using leaflet-lasso.js and using this example https://bl.ocks.org/skokenes/a85800be6d89c76c1ca98493ae777572. I am using lasso.js but it does not seem to work and neither does it give any error. I have also tried working leaflet-lasso.js https://stackoverflow.com/questions/53575608/leaflet-lasso-js-not-returning-results but I face errors in that too. I have been trying hard to implement the lasso feature but nothing seems to work. I don't know where I am going wrong. This is my code snippet--

function create_map(error, all_data, hashmap, states) {

    

    geoData = all_data;

   

    //set latitude and longitude of the map

    var atlLatLng = new L.LatLng(37.7771, -103.3900);

    map = L.map('map').setView(atlLatLng, 5);

    

    // leaflet tile layer. This could be changed

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {

    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',

    maxZoom: 10,

    minZoom: 3,

    id: 'mapbox.light',

    accessToken: 'pk.eyJ1IjoiamFnb2R3aW4iLCJhIjoiY2lnOGQxaDhiMDZzMXZkbHYzZmN4ZzdsYiJ9.Uwh_L37P-qUoeC-MBSDteA'

    })

    .addTo(map);

    // add an sVG layer

   svgLayer = L.svg();

   svgLayer.addTo(map)

   // assigning  SVG

   var svg = d3.select('#map').select('svg');

   pointsG = svg.select('g').attr('class', 'leaflet-zoom-hide');

   updateSubset();

}

//update function of the points

function updateSubset(filterLoad = 0) {  

    // getting the filtered data

    var arr = geoData;

    Object.keys(fildata_category).forEach(key => fildata_category[key] === null && delete fildata_category[key])

    var filterObjArray = Object.entries(fildata_category);

    var filterQuantArray = Object.entries(fildata_quant);

    var result = arr.filter(o => filterObjArray.every(([k,v]) => v.includes(o[k])) && filterQuantArray.every(([k,[l,h]]) => o[k] >= l && o[k] <= h));

    

    var points = pointsG.selectAll("circle")

                              .data(result);

    var pointsEnter = points.enter().append("circle")

                            .attr("class", "points");  

                  

    points.merge(pointsEnter).attr("r", function(d) { return sizeScale(d[size_name]); })

          .style("fill-opacity", 0.4)

          .style("fill", function(d){ return ordinalScale(d[color_name]);})

          .attr("pointer-events","visible")

          .on("mouseover",function(d){

                var details = [];

                for(var prop in d){

                    details.push("<label>"+prop + " : </label>" + d[prop]);

                }

                d3.select("#info_box").selectAll("li").data(details).enter().append("li").html(function(d){return d;});

                $('#info_box li').addClass('list-group-item');

          })

          .on("mouseout", function(d){

                d3.select("#info_box").selectAll("li").remove();

          });  

        var lasso_points = pointsG.selectAll('circle');

        console.log(lasso_points)

        var lasso_start = function() {

            lasso.items()

                .attr("r",3.5) // reset size

                .classed("not_possible",true)

                .classed("selected",false);

        };

        var lasso_draw = function() {

        

            // Style the possible dots

            lasso.possibleItems()

                .classed("not_possible",false)

                .classed("possible",true);

            // Style the not possible dot

            lasso.notPossibleItems()

                .classed("not_possible",true)

                .classed("possible",false);

        };

        var lasso_end = function() {

            // Reset the color of all dots

            lasso.items()

                .classed("not_possible",false)

                .classed("possible",false);

            // Style the selected dots

            lasso.selectedItems()

                .classed("selected",true)

                .attr("r",7);

            // Reset the style of the not selected dots

            lasso.notSelectedItems()

                .attr("r",3.5);

        };

       var lasso = d3.lasso()

            .closePathSelect(true)

            .closePathDistance(100)

            .items(lasso_points)

            .targetArea(pointsG)

            .on("start",lasso_start)

            .on("draw",lasso_draw)

            .on("end",lasso_end); 

        

        pointsG.call(lasso);

        

    map.on('zoomend', updateLayers);

    updateLayers();

                   

    points.exit().remove();  

}