42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
/*
|
|
* É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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
L.marker([scope.marker.lat, scope.marker.long]).addTo(map);
|
|
|
|
}
|
|
};
|
|
|
|
});
|