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)
