I have implemented a page with a range slider to control the radius of a Google Maps circle. The range slider is utilized from https://github.com/danielcrisp/angular-rangeslider. Here is the script in 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,
draggable: false,
clickable: false,
editable: true,
visible: true,
events:{
radius_changed: function(){
console.log("circle radius radius_changed: " + $scope.map.circle.radius);
}
}
};
});
Below is the html template associated with this code:
<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>
The issue I am facing is that when I change the slider value:
first time => radius_changed event is not triggered
second time => radius_changed event is fired before sliderChange function
In the console.log output:
-- Changing value to 20 --
slider value changed : 20
-- Changing value to 30 --
circle radius radius_changed: 20000
slider value changed : 30
-- Changing value to 40 --
circle radius radius_changed: 30000
slider value changed : 40
Any suggestions on how to resolve this issue?
Side Note: When I resize the window, the radius_changed event is triggered and the circle obtains the correct radius.