cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Responsive Resident
Responsive Resident

Change zoom by click

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

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Responsive Resident
Responsive Resident

Re: Change zoom by click

Solved by proper usage of d3 functions for leaflet map.

View solution in original post

1 REPLY 1
Highlighted
Responsive Resident
Responsive Resident

Re: Change zoom by click

Solved by proper usage of d3 functions for leaflet map.

View solution in original post

Helpful resources

Announcements
Community Blog

Community Blog

Visit our Community Blog for articles, guides, and information created by fellow community members.

Using the Community

Using the Community

Need help with the Power BI Community? Our 'Using the Community' support articles are a great place to start.

Community Summit North America

Community Summit North America

Innovate, Collaborate, Grow. The top training and networking event across the globe for Microsoft Business Applications

Power Platform 2020 release wave 2 plan

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors