store permanent variable in AngularJS app

I am building an AngularJS app where users select a point using Google Maps, and they are given a radius that expands with time. I would also like them to be able to easily share that radius with others by just giving a link. Here are my pages:

Select the point: http://alainwebdesign.ca/pl2/tom/getlocation.html

Search radius: http://alainwebdesign.ca/pl2/

I thought about using ngRoute and keeping the app all on one page which could work for the one user for the one session. But I want others to be able to access the search radius just with the URL. If you have other suggestions (such as using php or JSON) I would like to hear them.

JS for selecting the location:

var map = null;
var markers = [];
var custCenter = {};

function initMap()
{
    var startingCenter = { lat: 49.22, lng: -122.66 };
    custCenter = { lat: 49.22, lng: -122.66 };

    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: custCenter,
        mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function (event) {
        var myLatLng = event.latLng;

        deleteMarkers();
        addMarker(myLatLng);

        window.lat = myLatLng.lat();
        window.lng = myLatLng.lng();
        alert(window.lat + ', ' + window.lng);  
    });

    // Adds a marker at the center of the map.
    addMarker(custCenter);
}

// Adds a marker to the map and push to the array.
function addMarker(location) 
{
    var marker = new google.maps.Marker({
        position: location,
        map: map                
    });            

    markers.push(marker);
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map); 
    }
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
    clearMarkers();
    markers = [];
}

And JS for the search Radius:

(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 = { //dynamic var(s)
              latitude: 49.22, 
              longitude: -122.66
          };

          Object.freeze(center);

          $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; //dynamic var
          }, 1000);
      } ]);



})(window, angular);

New code for search radius:

(function (window, ng) {
    ng.module('app', ['uiGmapgoogle-maps', 'ui.router'])



    //Should the .configuarion be set here?
       $stateProvider
      .state('inbox', {
          url: '/:center/:radius',
          templateUrl: 'index.html',
          controller: 'MapCtrl',
          resolve: {
            resolveMap: function (MapService, $stateParams) {
              return MapService.getData($stateParams.center, $stateParams.radius);
          }
        }
      })


    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval",
      function ($scope, $log, GoogleMapApi, $interval) {
          $log.currentLevel = $log.LEVELS.debug;
          var center = custCenter;

          Object.freeze(center);

          $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; //dynamic var
    $state.transitionTo('/', {
        center: $stateParams.center, 
        radius: $scope.map.circle.radius
    }, 
    { 
        notify: false 
    });
}, 1000); //end of interval function


      } ]); //end of controller



})(window, angular);

Answers


What you could do is the following:

Define a route(state) like so in Angular's UI router (not sure that this feature is available in nfRouter:

myApp.config(function($stateProvider) {
  $stateProvider
          .state('location', {
              url: '/:lat/:lon/:radius',
              templateUrl: 'partials/map.html',
              controller: 'MapCtrl',
              resolve: {
                resolveMap: function (MapService, $stateParams) {
                  return MapService.getData($stateParams.lat, $stateParams.lon, $stateParams.radius);
              }
            }
          });

});

Now, change the :radius parameter as your radius increases.

// Within your controller
$interval(function(){
    $scope.map.circle.radius += 30; //dynamic var
    $state.transitionTo('/', {
        lat: $stateParams.lat, 
        long: $stateParams.lon, 
        radius: $scope.map.circle.radius
    }, 
    { 
        notify: false 
    });
}, 1000);

Now, whenever you hit a url, you have all of the data you need to resolve the map. Voila!


Need Your Help

Interacting with mipmap image assets in Android Studio, displayed using ImageView widget

java android imageview png mipmaps

I'm trying to do something that should be simple, import png files, use them in a number of imageview widgets (as the background). As part of my code I would like to see that when widget a is click...

PyCharm Edu introduction course, string multiplication

python pycharm

I'm new to Python and currently running the "Introduction to Python" course for PyCharm Edu. I'm having a problem with the following task (strings -> string multiplication)