LeafletMap

refer to https://groups.google.com/forum/?fromgroups#!topic/angular/y7sxWWKeE9Q

by niden

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>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css">
<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://raw.github.com/gist/1716010/aee7456d81622e253397e61e080504e8b886d05e/TileLayer.TileJSON.js"></script>
<div ng-app="leafletMap">
    <div ng-controller="MapCtrl">
        <map id="map"></map>
    </div>
</div>

CSS

#map{
    height: 450px; 
    border: 1px solid #333335;
    margin-bottom:20px;
}

JavaScript

var module = angular.module('leafletMap', []);
module.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {
            console.log(element);
            var map = new L.Map(attrs.id);
            var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18
            });
            //Define the colors to be used for routes(red,yellow,blue,green,light blue, gold,purple,pink,brown,black)
            var colors = ["#0000ff", "#0099ff", "#0000ff", "#00ff00", "#990000", "#cc9900", "#660099", "#ff00ff", "#663300", "#000000"];
            //array of routes
            var mapRoutes = scope.routes;
            //an array to hold the lat and lng of every point used
            var totalLatLngs = [];
            //create a polyline that includes every point(necessary for correct bounds)
            var allPoints = new L.Polyline(totalLatLngs, {
                weight: 0
            });
            for (var route in mapRoutes) {
                //creates an empty array(necessary for the polyline to initiate)
                var latlngs = [];
                //create a polyline with an empty array(the route line)
                var polyline = new L.Polyline(latlngs, {
                    color: colors[route], //TODO: make work for any # of routes
                    weight: 3,
                    opacity: .7
                });
                //put the polyline in a feature group with a popup(popups can't be bound to individual polylines)
                var group = new L.FeatureGroup([polyline]).bindPopup(mapRoutes[route].Name);

                //iterate through the destinations
                var destinations = mapRoutes[route].RouteDestinations;
                for (var d in destinations) {
                    var name = destinations[d].Name;
                   ...