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">
<link rel="stylesheet" href="http://watson.lennardvoogdt.nl/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css">
<script src="http://watsone.lennardvoogdt.nl/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
<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">
<body ng-controller="DemoController">
    <leaflet center="center" markers="markers" layers="layers"></leaflet>
</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) {
    angular.extend($scope, {
        center: {
            lat: 33.505,
            lng: -112,
            zoom: 13,
            autoDiscover: false

        },
        markers: {
            m1: {
                layer: "phoenix",
                lat: 33.505,
                lng: -112,
                message: "m1",
                label: {
                    message: "m1",
                    noHide: true
                }
                 
            },
            m2: {
                layer: "phoenix",
                lat: 33.504,
                lng: -112,
                message: "m2",
                label: {
                    message: "m2",
                }
            },
            m3: {
                layer: "phoenix",
                lat: 33.503,
                lng: -112,
                message: "m3",
                label: {
                    message: "m3",
                }
            }
        },
        layers: {
            baselayers: {
                
                osm: {
                    name: 'OpenStreetMap',
                    url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    type: 'xyz'
                }
            },
            overlays: {
                phoenix: {
                    name: "phoenix downtown",
                    type: "markercluster",
                    visible: true
                }
            }
        }


    });
}]);