angular-google-map angular set radius with range slider

Question

I try to have a page with a range slider (using https://github.com/danielcrisp/angular-rangeslider) that controls radius of my Google Maps circle. Here's the content of my controller:

//range
        $scope.sliderValue = 10;
        $scope.center = {
            latitude: 51.1771171,
            longitude: 4.3532966
        };
        $scope.sliderChange = function() {
            console.log("slider value changed : " + $scope.sliderValue);
            //$scope.map.circle

            $scope.map.circle.radius = $scope.sliderValue * 1000;
        };
        //Map
        uiGmapGoogleMapApi.then(function (maps) {

            //$scope.uiMap = maps;
            //google.maps.event.trigger(this.map, 'resize');

            $scope.map = {
                center: $scope.center,
                zoom: 11,
                control: {}
            };

            $scope.map.circle = {
                id: 1,
                center: $scope.center,
                radius: 10000,
                stroke: {
                    color: '#08B21F',
                    weight: 2,
                    opacity: 1
                },
                fill: {
                    color: '#08B21F',
                    opacity: 0.5
                },
                geodesic: false, // optional: defaults to false
                draggable: false, // optional: defaults to false
                clickable: false, // optional: defaults to true
                editable: true, // optional: defaults to false
                visible: true, // optional: defaults to true
                events:{
                    radius_changed: function(){
                        //window.alert("circle radius radius_changed");
                        console.log("circle radius radius_changed: " + $scope.map.circle.radius);


                    }
                }
            };

        });

And my html template:

<div class="col-md-4">
            <div range-slider on-handle-up="sliderChange()" min="10" max="200" model-max="sliderValue" step="10" pin-handle="min"></div>
</div>
<div class="col-md-8">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control">
        <ui-gmap-circle center="map.circle.center"
                        radius="map.circle.radius"
                        fill="map.circle.fill"
                        stroke="map.circle.stroke"
                        clickable="map.circle.clickable"
                        draggable="map.circle.draggable"
                        editable="map.circle.editable"
                        visible="map.circle.visible"
                        events="map.circle.events">
        </ui-gmap-circle>
    </ui-gmap-google-map>
</div>
</div>

This code gives that when I change the slider value:

first time => radius_changed is not fired
second time => radius_changed is fired before sliderChange

In console.log:

-- I set value to 20 --

slider value changed : 20

-- I set value to 30 --

circle radius radius_changed: 20000

slider value changed : 30

-- I set value to 40 --

circle radius radius_changed: 30000

slider value changed : 40

Any idea ?

Remark: If I resize the window, the event radius_changed is fired and circle get the right radius

score 2 · Accepted Answer · edited May 23 '17 at 10:28

Finally, I found what's going on. My problem was that the change of sliderValue does not affect the scope.

So I remove the on-handle-up in my html on my directive range-slider and add a $watch See How do I use $scope.$watch and $scope.$apply in AngularJS? for more information.

So here's my code:

$scope.sliderChange = function() {
            console.log("slider value changed : " + $scope.sliderValue);
            //$scope.map.circle
            if ($scope.map !== undefined) {
                $scope.map.circle.radius = $scope.sliderValue * 1000;
            }
        };
        $scope.$watch('sliderValue', function () {
            $scope.sliderChange();
        });

score 0 · Answer 2 · answered May 19 '16 at 08:13

events:{
                        radius_changed: function(){
                            $timeout(function(){
                                $scope.$apply(function(){
                                    //console.log("circle radius radius_changed: " + $scope.circles[0].radius);
                                    $rootScope.$broadcast('LSN_BIND_RADIUS_DATA', $scope.circles[0].radius);
                                });
                            });

                        }
                    }

please explain why this is the answer – Dacaspex May 19 '16 at 08:31 — Dacaspex, May 19 '16 at 08:31

angular-google-map angular set radius with range slider

2 Answers2