0 votes
in Education by (1.7m points)
I am trying to create an app using AngularJS that takes a user's location (from their mobile) and creates a radius that increases in size over time. Here is what I have so far: http://alainwebdesign.ca/doglocate/example/issue-1068-circle-events-doubled.html.

The app works for the most part, but the problem is that when you move/drag the map, the radius center changes which is not what I want. I want the center of the radius to be lock in at the specified location.

Here is my HTML:

<!DOCTYPE html>

<html ng-app="app">

<head>

    <link rel="stylesheet" ****="assets/stylesheets/example.css">

    <link rel="stylesheet" ****="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <script src="../website_libs/dev_deps.js"></script>

    <script src="https://code.angularjs.org/1.3.6/angular.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.js"></script>

    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="../dist/angular-google-maps_dev_mapped.js"></script>

    <script src="assets/scripts/controllers/issue-1068-circle-events-doubled.js"></script>

    <title>Dog Locate</title>

</head>

<body>

<div data-ng-controller="MapsCtrl">

    <ui-gmap-google-map

                        center='map.center'

                        zoom='map.zoom'

                        draggable='map.draggable'

                        dragging='map.dragging'

                        refresh='map.refresh'

                        options='map.options'

                        events='map.events'

                        pan='map.pan'>

        <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>

</body>

</html>

And here is my Javascript:

(function (window, ng) {

    ng.module('app', ['uiGmapgoogle-maps'])

    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval",

      function ($scope, $log, GoogleMapApi, $interval) {

          $log.currentLevel = $log.LEVELS.debug;

          var center = {

              latitude: 49.22,

              longitude: -122.66

          };

          $scope.map = {

              center: center,

              pan: false,

              zoom: 16,

              refresh: false,

              events: {},

              bounds: {}

          };

          $scope.map.circle = {

              id: 1,

              center: center,

              radius: 500,

              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: true, // optional: defaults to true

              editable: false, // optional: defaults to false

              visible: true, // optional: defaults to true

              events: {

                  dblclick: function () {

                      $log.debug("circle dblclick");

                  },

                  radius_changed: function (gObject) {

                      var radius = gObject.getRadius();

                      $log.debug("circle radius radius_changed " + radius);

                  }

              }

          }

          //Increase Radius:

          $interval(function(){

                $scope.map.circle.radius += 30;

          }, 1000);

      } ]);

})(window, angular);

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

1 Answer

0 votes
by (1.7m points)
Solved my own question. I just used Object.freeze(center) after declaring the center variable.

Related questions

...