Change zoom by click

[ysapiyev]

Hi everyone, I have custom visual with map and circles on it. 

I want to use on('click') to change zoom, however, setview method from leaflet doesn't work.

const circle = g.append('circle')
                        .style("opacity", 0) 
                        .attr("r", outerRadius)
                        .attr("pointer-events","visible")
                        .attr('transform',"translate("+ map.latLngToLayerPoint(dpt.latlng as any).x +","+ map.latLngToLayerPoint(dpt.latlng as any).y +")");
                    
circle..on('click', function() {
                            //map.setView([map.latLngToLayerPoint(dpt.latlng as any).x, map.latLngToLayerPoint(dpt.latlng as any).y], this.iZoom);
                            //map.setView(circle.getLatLng(), 16);
                            this.drill_down(map.getZoom());
                            d3.selectAll('foreignObject').remove(); 
                        });
private drill_down(mapZoom: number, options: VisualUpdateOptions): void {
            
            if(mapZoom < +Visual.h2Zoom) { 
                let data_1 = Visual.dataForMap(mapZoom, options);
                let ov_lat = 0;
                let count_lat = 0;
                let ov_lng = 0;
                let count_lng = 0;
                data_1.forEach(function(d) {
                   ov_lat =+ d.lat;
                   count_lat++;
                   ov_lng =+ d.lng;
                   count_lng++;
                })
                let av_lat = ov_lat/count_lat;
                let av_lng = ov_lng/count_lng;

                this.map.setView([av_lat, av_lng], +Visual.h2Zoom);
            }};

What can be the problem?

Regards,

Yerkhan

[ysapiyev · Accepted solution]

Solved by proper usage of d3 functions for leaflet map.