angular-leaflet-directive center autoDiscover example

http://angularjs.org/

by Chance Nursey-Bush

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css">
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">
<script src="http://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.label/leaflet.label.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<body ng-controller="DemoController">
  <leaflet center="center" layers="layers" defaults="defaults"></leaflet>
  <button ng-click="hello()">Click me!</button>
</body>

CSS

.angular-leaflet-map {
  width: 640px;
  height: 480px;
}

JavaScript

var app = angular.module('demoapp', ['leaflet-directive']);

app.controller('DemoController', ['$scope', 'leafletData', function($scope, leafletData) {
  $scope.hello = function() {
    leafletData.getMap().then(function(map) {
      //map._onResize();
      //$scope.map = null;
      //$scope.center = null;
      //$scope.layers = null;
      //$scope.defaults = null;
      $scope.refresh();
      map.invalidateSize(true);
    });
  }

  $scope.refresh = function() {
    angular.extend($scope, {
      center: {
        lat: 33.505,
        lng: -112,
        zoom: 10,
        autoDiscover: true

      },
      layers: {
        baselayers: {

          osm: {
            name: 'OpenStreetMap',
            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            type: 'xyz'
          }
        }
      },
      defaults: {
        maxZoom: 15,
        minZoom: 6
      }
    });
  }
  
  $scope.refresh();
}]);