angular-leaflet-directive example fiddle

http://angularjs.org/

by Neeraj

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>
<body ng-controller="DemoController">
  <leaflet center="center"></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: 51.505,
            lng: -0.09,
            zoom: 5
        }
    })
}]);