Jerome2606 Jerome2606 - 6 months ago 121
AngularJS Question

angular-google-map angular set radius with range slider

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

Answer

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 Using scope.$watch and scope.$apply 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();
        });
Comments