"Use the angular-google-map plugin to dynamically set the radius on a map using

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.

Answer №1

After some investigation, I finally figured out the issue. It turns out that the sliderValue wasn't updating the scope properly.

To solve this, I removed the on-handle-up from my html directive range-slider and added a $watch function. For more information, you can visit How do I use $scope.$watch and $scope.$apply in AngularJS?.

Here is the updated code:

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

Answer №2

events:{
                        size_changed: function(){
                            $timeout(function(){
                                $scope.$apply(function(){
                                    //console.log("shape size size_changed: " + $scope.shapes[0].size);
                                    $rootScope.$broadcast('LSN_BIND_SIZE_DATA', $scope.shapes[0].size);
                                });
                            });

                        }
                    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to ensure that the popover div remains visible when clicking inside it in a "dismissible popover" using Twitter Bootstrap with the data-trigger attribute set to "

I am struggling with a dismissible popover that contains a text box. When I click inside the text box to type, it disappears due to the "data-trigger="focus". Is there a way for the div not to disappear when clicked inside intelligently? Here is the releva ...

Switch the Ionic Slide Box to the "does-continue" setting

Currently in the process of constructing a slide-box containing numerous items. I've borrowed the code from the example provided here for an infinite number of items, and it's performing well. However, I have a considerable yet finite amount of ...

Browsers are failing to display any content during ajax calls

I am currently attempting to extract artist URLs from the following page: https://myspace.com/discover/artists?genreId=1002532 However, this page is making an AJAX call to retrieve user details. I have identified the URL in Firebug as: https://myspace.c ...

When making xmlhttp requests, IE9 will prioritize loading from the cache rather than from the server when the data is available

During my local development process, I've been utilizing this AJAX code: function getChart(num,ld,margin,idr) { idr = typeof(idr) != 'undefined' ? idr : 0; $(ld).style.display="inline-block"; if (window.XMLHttpRequest) { ...

Click on Angular ng-repeat to dynamically insert data using ng-click

When using $http.get to fetch PHP data in ng-repeat, everything works fine. However, I encounter an issue when attempting to use ng-click to add PHP data from a second page into the ng-repeat, but it is not functioning correctly. Do you have any suggestio ...

Swiper.IO pagination indicators not displaying

Why is the pagination not showing up on the image carousel I created with Swiper? Despite being in the DOM, it has a height of 0 and manual changes have no effect. Any suggestions? import Swiper from '../../vendor/swiper.min.js'; export default ...

"Clicking on the dropdown menu will consistently result in it collapsing

When it comes to a DropDown menu, the typical expectation is that when an option is selected, the menu will collapse. However, in my situation, I do not want the dropdown menu to collapse if the user is attempting to log in and clicks on the Username and P ...

Is this included in the total number of reads?

Following my query with CollectionsGroup, I attempted to retrieve the information of the parent's parent like this: db.collectionGroup('teams').where('players', 'array-contains', currentUser.uid).get().then(function(snaps ...

The instance is referencing "underscore" during render, but it is not defined as a property or method

I have experience as a skilled react developer, but I've taken over a vue.js project from another developer and managed it for quite some time. Regrettably, I haven't put in the effort to learn vue properly. When using lodash, I encountered an u ...

Guide to creating a new window without a menu bar for an onclick function in electronJS

After trying to remove the menu bar from the main window using win.setMenu(null) in the main.js file, I encountered a new issue. When opening a new window (referred to as the "add items window"), I struggled to find a way to hide the menu bar in it as well ...

Trouble with variable in require path causing issues with r.js

As a newcomer to optimizing with r.js, I am also a big fan of requirejs build-config.js ({ appDir: "./src/main/webapp/webresources/javascript/", baseUrl: "./", dir: "./target/webresources/js", optimizeCss ...

avoiding less than or greater than symbols in JavaScript

I'm encountering an issue while attempting to escape certain code. Essentially, I need to escape "<" and ">" but have them display as "<" and "> in my #output div. At the moment, they show up as "&lt;" and "&gt;" on the page. This ...

VueJS Component has trouble refreshing the DOM content following an AJAX Promise

I've encountered issues updating data in my Vue application after an AJAX callback. I have previously resolved similar problems by using Vue.set, but for some reason, it's not working for me today. The only difference is that I am calling a serv ...

In AngularJS, the event handler does not receive the current input value that is being passed

<div ng-repeat="item in groups"> <p hidden><input type="hidden" value="{{item.id_group}}" /></p> <p><textarea>{{item.description}}</textarea></p> <p> <a href="" ng-click="editGrou ...

Tips for updating a nested MongoDB object

Looking to implement a reporting feature for my application When making a PUT request in the front end: .put(`http://localhost:3000/api/posts/report`, { params: { id: mongoId, ...

Storing chosen choices from various select lists with similar class name in JavaScript

I am struggling to save all the selected options in an array for future output. Despite trying various suggestions, I haven't been able to make it work yet. The class names and names cannot be modified. HTML <select class="addon addon-select" nam ...

Using Fabric JS to create a group of multiple objects

Can Fabric JS allow for grouping all objects on the canvas with a click event? ...

Tips for adding HTML table information to a database

I have a table in HTML where one column can be edited, and I need to save that data into my database. Firstly, here is the code snippet: var tableData = [{ "Item Code": "C001", "Item Name": "Beverages", "Quantity": "0" }, { ...

Combining Socket.io with AJAX for real-time web applications

I am currently working on a web application that relies on Socket.io for delivering notifications to users. I'm wondering if it would be more beneficial to utilize Socket.io exclusively for all client-server communication, or if mixing in traditional ...

Identifying the Origin of the Mouse Pointer When Hovering Over Elements

Could someone please advise on how to detect the movement of the mouse pointer using jQuery when it hovers over an element such as a div? I am looking for a way to determine if the mouse pointer entered the element from the top, left, bottom, or right sid ...