Directive angularJS - Carte Interactive

1. PROBLEMATIQUE
Le réseau SensyBEE est composé d'un ensemble de sites avec des bâtiments de plusieurs étages qui comportent chacun un certain nombre de pièces. Dans les pièces se trouvent un ou plusieurs modules. Notre front-end a besoin d'une représentation interactive de ce réseau de modules.

L'utilisateur doit pouvoir :
• avoir un aperçu général et visuel du réseau avec le nombre de modules dans chaque zone,
• "zoomer" sur la carte pour afficher le détail d'un bâtiment, d'un étage puis d'une pièce,
• effectuer des actions à partir de cette carte (par exemple : ajouter un module ici dans le cas d'une pièce, voir les informations d'un module d'une pièce, etc..)

2. CONTRAINTES
La carte interactive doit être intégrée au Front-end existant. Pour cela, il faudra fournir une directive angularJS permettant de l'ajouter très facilement dans nos pages. Elle doit être codée en anglais.

Cette directive doit être rendue dans un dossier nommé map contenant :
• le fichier map.js : le code principal *commenté* de la directive
• le fichier map.tpl.html : le template html de la directive
• le fichier map.css : le css associé à la directive
• tous les autres fichiers utiles à la directive
• la documentation sur l'utilisation et le fonctionnement

La directive prendra en entrée les données JSON décrivant le réseau sous une forme déterminée ultérieurement mais ressemblant à :
{
batiment1 : {
etage1 : {
piece1 : {module1, module2, module3},
piece2 : {...}
},
etage2 : {...},
},
batiment2 : {....}
}

Sa configuration doit être flexible (taille, couleurs) et paramétrable via un objet mconf.