Add colors to icons

webapp/templates/app.js

@@ -145,6 +145,7 @@ function updateEligData(map, eligData) {
     if (building.bat_info != "") {
       addrImm += ` (Bat ${building.bat_info})`
     }
+    let colorMarker = 'black'
     let messageElig = ``
     eligTestApi=`eligtest/ftth?idImm=${building.idImm}&codePostal=${building.codePostal}&axione=${building.aquilenetEligStatus.isEligible}&liazo=${building.fdnEligStatus.isEligible}`
     // éligible chez Aquilenet, lien pour le test
@@ -154,15 +155,18 @@ function updateEligData(map, eligData) {
       const idImm=encodeURIComponent(building.idImm);
       messageElig += `<br/><a href=${urlTestFTTH}?ftth=1&axione=1&adsltel=NOUVEAU&cp=${zip}&refimmeuble=${idImm}`
                    + `>Tester l'éligibilité</a>`
+      colorMarker = 'green'
     // pas de données Axione mais Kosc nous renvoie qque chose à cette adresse (fdnEligStatus)
     // c'est peut être OK, on croise avec les données ARCEP (othersEligStatus)
     // Enfin on affiche un lien vers le test d'éligibilté KOSC à cette adresse
     } else if (building.fdnEligStatus.isEligible && building.othersEligStatus.isEligible) {
       messageElig = `<p class=deployeeFDN>Fibre deployee mais pas chez Axione !`
       messageElig += `<br/><a href=${eligTestApi}>Tester l'eligibilite par Kosc et Bouygues</a></p>`
+      colorMarker = 'orange'
     // Pas de données Kosc ou Axione mais l'ARCEP nous dit qu'une fibre est déployée à cette adresse
     } else if (building.othersEligStatus.isEligible) {
       messageElig = `<p class=deployeeAutres>Fibre deployee mais non eligible Aquilenet, desole :(</p>`
+      colorMarker = 'red'
     // Pas de fibre il semblerait, proposer un test ADSL Aquilenet
     } else {
       messageElig = `<p class=nonDeployee>Fibre non deployee :(</p>`
@@ -184,7 +188,15 @@ function updateEligData(map, eligData) {
     if (building.aquilenetEligStatus.reasonNotEligible != "") {
       messageElig += `<br/> Pour Aquilenet, raison non eligible: ${building.aquilenetEligStatus.reasonNotEligible}`
     }
-    const marker = new L.marker(latlng)
+    var markerIcon = new L.Icon({
+      iconUrl: `static/icons/marker-icon-${colorMarker}.png`,
+      shadowUrl: 'static/vendor/images/marker-shadow.png',
+      iconSize: [25, 41],
+      iconAnchor: [12, 41],
+      popupAnchor: [1, -34],
+      shadowSize: [41, 41]
+    });
+    const marker = new L.marker(latlng, {icon: markerIcon})
       .bindPopup(`${addrImm}<br/>${building.codePostal} ${building.commune}`
                + `<br/><br/>${messageElig}<br/><br/>Ref Immeuble: ${building.idImm}`, {
                 maxWidth : 560