/*
 * Énoncé:
 *
 * Créer une directive "my-map" qui affiche une carte interactive dans la page via la librairie Leaflet.
 * La directive comportera un attribut "marker" qui prendra en paramètre un objet de la forme:
 * {
 *   lat: <latitute>,
 *   long: <longitude>
 * }
 * Cet objet devra servir à afficher un "Marker" sur la carte, et centrer celle ci sur la position donnée
 *
 * ! Le code et la feuille de style de la librairie Leaflet sont déjà intégrés dans la page !
 *
 * Documentation:
 * - Librairie Leaflet: http://leafletjs.com/index.html
 */


var Exo = angular.module('Exo', []);

Exo.directive('myMap', function() {

  return {
    restrict: 'E',
    scope: {
      marker: '=marker'
    },
    link: function(scope, element) {

      var map = L.map(element[0]).setView([scope.marker.lat, scope.marker.long], 13);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      L.marker([scope.marker.lat, scope.marker.long]).addTo(map);

    }
  };

});