angular ng-Map setBounds to adjust with circle radius

Question

I am using ngMaps in Angular. I have created a map and included a shape (circle) that can be adjusted depending on my radius value.

Is it possible to set the bounds of the map to adjust to include the entire circle?

Here is my view:

<ng-map class="bu-map"
                default-style="false"
                scrollwheel="false"
                style="margin: 0 -15px"
                data-ng-style="{'height': appCtrl.windowHeight - 81 + 'px'}"
                map-type-control="false"
        >

            <shape id="circle"
                   name="circle"
                   centered="true"
                   stroke-color='#FF0000'
                   stroke-opacity="0.8"
                   stroke-weight="1"
                   center="{{listCtrl.queryBounds.centerPoint}}"
                   radius="{{listCtrl.queryBounds.radius}}"
                   editable="false"></shape>
</ng-map>

and my controller:

        NgMap.getMap().then((map) => {
            bu.map = map;
            map.setCenter(centerPoint);
            bu.queryBounds = {
                centerPoint: [centerPoint.lat, centerPoint.lng],
                // miles to meters conversion
                radius: (parseFloat(searchQuery.radius) || 1) * 1600,
            };
            map.setZoom(10);
        });
    });

In this case, searchQuery.radius can be adjusted which adjusts the circle that is drawn on the map however it is too big for the map sometimes and the zoom doesn't adjust.

I did a calculation on setZoom but the setZoom values aren't diverse enough to perfectly include the circle.

Is this possible with setBounds?

Thanks!

Pengyy · Answer 1 · 2017-03-16T01:30:41.013

here is a native way. find 4 cordinates on the circle(name:east,west,north,south).

NgMap.getMap().then((map) => {
    let bounds = new google.maps.LatLngBounds();
    bounds.extend(east);
    bounds.extend(west);
    bounds.extend(north);
    bounds.extend(south);

    map.fitBounds(bounds);   // fit the zoom to show all the four cordinates
    map.setCenter(bounfd.getCenter());  // set the circle to the map center.
}

UPD: For the above way, by google.maps.geometry.spherical.computeOffset() we could find the four points' latlng.

Way2:

NgMap.getMap().then((map) => {
    map.fitBounds(map.shapes[0].getBounds());   // fit the zoom to the circle.
}

Note: By this way, you have to exact which shape in map.shapes is the circle element.

angular ng-Map setBounds to adjust with circle radius

1 Answers1