LeafletMap

by Kyle Pennell

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0rc4.min.js"></script>
<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css">
<div ng-app="leafletMap">
    <div ng-controller="MapCtrl">
        <sap id="map"></sap>
    </div>
</div>

CSS

#map {
    height: 500px;
}

JavaScript

var module = angular.module('leafletMap', []);
module.directive('sap', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function (scope, element, attrs) {
            var map = L.map(attrs.id, {
                center: [17.059417, -96.721622],
                zoom: 10
            });
            //create a CloudMade tile layer and add it to the map
            L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(map);

            //add markers dynamically
            var points = [{
                lat: 16.950000,
                lng: -96.75
            }, {
                lat: 16.825845,
                lng: -99.81802
            }, {
                lat: 17.192604, 
                lng: -96.763734
            }, {
                lat: 15.865740,
                lng: -97.082449
            }, {
                lat: 18.488720,
                lng: -97.524819
            }];

            for (var p in points) {
                L.marker([points[p].lat, points[p].lng]).addTo(map);
            }
        }
    };
});

function MapCtrl($scope) {}