cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
ysapiyev Member
Member

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
ysapiyev Member
Member

Re: Change zoom by click

Solved by proper usage of d3 functions for leaflet map.

View solution in original post

1 REPLY 1
ysapiyev Member
Member

Re: Change zoom by click

Solved by proper usage of d3 functions for leaflet map.

View solution in original post

Helpful resources

Announcements
New Kudos Received Badges Coming

New Kudos Received Badges Coming

Kudos to you if you earned one of these! Check your inbox for a notification.

Microsoft Implementation for Communities Wins Award

Microsoft Implementation for Communities Wins Award

Learn about the award-winning innovation that was implemented across Microsoft’s Business Applications Communities.

Power Platform World Tour

Power Platform World Tour

Find out where you can attend!

Top Solution Authors
Top Kudoed Authors (Last 30 Days)
Users online (2,112)