BREAKING CHANGE : replace app.js with prod app.js adapted for J5

com_leaflet/media/js/app.js

@@ -18,12 +18,12 @@ jQuery(() => {
     let markersDT = null;
 
     // INIT MAP
-    var map = L.map('mapid').setView([43.821871, 2.245650], 7.5);
+    var map = L.map('mapid').setView([44.032156, 1.634136], 7.5);
 
 
     L.tileLayer('https://api.mapbox.com/styles/v1/dgtnarmelle/cl6vzlpvx000f14upjewi4mfl/tiles/{z}/{x}/{y}?access_token={accessToken}', {
         attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-        maxZoom: 13,
+        maxZoom: 20,
         minZoom: 7,
         tileSize: 512,
         zoomOffset: -1,
@@ -64,7 +64,10 @@ jQuery(() => {
                 data: { [token]: "1", task: "initData", format: "json", type: "markers", catId: category[0] },
                 async: false,
                 success: function (result) {
-                    markersExperience = result.data;
+                    //On garde la liste de côté pour pouvoir l'afficher lors du clic sur un marker DT*/
+
+                    markersDT = result.data;
+
                 },
                 error: function () { console.log('ajax call failed'); },
             });
@@ -74,7 +77,11 @@ jQuery(() => {
                 data: { [token]: "1", task: "initData", format: "json", type: "markers", catId: category[1] },
                 async: false,
                 success: function (result) {
-                    markersSIAE = markersExperience.concat(result.data);
+                    if (markersDT) {
+                        markersExperience = markersDT.concat(result.data);
+                    } else {
+                        markersExperience = result.data;
+                    }
                 },
                 error: function () { console.log('ajax call failed'); },
             });
@@ -85,7 +92,7 @@ jQuery(() => {
                 async: false,
                 success: function (result) {
                     //On ajoute tout dans le tableau final unique que l'on appelle markersFetch par soucis de comptabilité avec l'ancien code
-                    markersFetch = markersSIAE.concat(result.data);
+                    markersFetch = markersExperience.concat(result.data);
                     //Maintenant qu'on a tous nos projets on peut les ajouter a la carte
                     //onAdd: C'est la fonction d'initialisation qui est appelée lorsqu'on ajoute cet objet à la carte. 
                     //Elle permet de construire le div HTML qui contiendra la légende. Ce div est associé à la classe CSS info.
@@ -95,8 +102,6 @@ jQuery(() => {
                     }
                     listeProjets.addTo(map);
 
-                    //On garde la liste de côté pour pouvoir l'afficher lors du clic sur un marker DT
-                    markersDT = result.data;
                 },
                 error: function () { console.log('ajax call failed'); },
             });
@@ -124,7 +129,7 @@ jQuery(() => {
                 data: { [token]: "1", task: "initData", format: "json", type: "activite" },
                 async: false,
                 success: function (result) {
-                    activites = Object.values(JSON.parse(result.data.fieldparams).options);;
+                    activites = Object.values(JSON.parse(result.data.fieldparams).options);
                 },
                 error: function () { console.log('ajax call failed'); },
             });
@@ -208,7 +213,6 @@ jQuery(() => {
         div.innerHTML += '<input class="uk-button uk-button-secondary" type="button" value="Reset" >';
         return div;
     };
-
     departementsLists.addTo(map);
     categoriesLists.addTo(map);
     activiteLists.addTo(map);
@@ -219,6 +223,7 @@ jQuery(() => {
     $('.leaflet-control').mouseover(function () {
         map.dragging.disable();
         map.doubleClickZoom.disable()
+        map.scrollWheelZoom.disable();
     })
     $('.leaflet-control').mouseout(function () {
         map.dragging.enable();
@@ -261,12 +266,13 @@ jQuery(() => {
         });
     });
 
+    dpt_active = []
     $(".leaflet-control:not(.reset , .listeProjets)").click((event) => {
         var arrayActiveDpt = $('.departements img').hasClass('active');
         var arrayActiveCtg = $('.categorie img').hasClass('active');
         var arrayActiveAct = $('.activite img').hasClass('active');
-
         active = []
+
         var activeDepartement = document.getElementsByClassName("active");
         for (i = 0; i < activeDepartement.length; i++) {
             active.push(activeDepartement[i].id);
@@ -284,7 +290,6 @@ jQuery(() => {
             listeProjets.addTo(map);
         } else {
             reg_tile_temp.clearLayers();
-
             var articlesByDepartement = [];
             var articlesByCategories = [];
             var articlesByActivites = [];
@@ -313,7 +318,7 @@ jQuery(() => {
             if (arrayOfArticlesByDepartement.length != 0 && arrayOfArticlesByCategories.length != 0) {
                 for (let ABD in arrayOfArticlesByDepartement) {
                     for (let ABC in arrayOfArticlesByCategories) {
-                        if (arrayOfArticlesByDepartement[ABD].id.indexOf(arrayOfArticlesByCategories[ABC].id) != '-1') {
+                        if (arrayOfArticlesByDepartement[ABD].id == arrayOfArticlesByCategories[ABC].id) {
                             articleAfterActivate.push(arrayOfArticlesByDepartement[ABD]);
                         }
                     }
@@ -322,7 +327,7 @@ jQuery(() => {
             if (arrayOfArticlesByDepartement.length != 0 && arrayOfArticlesByActivites.length != 0) {
                 for (let ABD in arrayOfArticlesByDepartement) {
                     for (let ABA in arrayOfArticlesByActivites) {
-                        if (arrayOfArticlesByDepartement[ABD].id.indexOf(arrayOfArticlesByActivites[ABA].id) != '-1') {
+                        if (arrayOfArticlesByDepartement[ABD].id == arrayOfArticlesByActivites[ABA].id) {
                             articleAfterActivate.push(arrayOfArticlesByDepartement[ABD]);
                         }
                     }
@@ -331,7 +336,7 @@ jQuery(() => {
             if (arrayOfArticlesByActivites.length != 0 && arrayOfArticlesByCategories.length != 0) {
                 for (let ABA in arrayOfArticlesByActivites) {
                     for (let ABC in arrayOfArticlesByCategories) {
-                        if (arrayOfArticlesByActivites[ABA].id.indexOf(arrayOfArticlesByCategories[ABC].id) != '-1') {
+                        if (arrayOfArticlesByActivites[ABA].id == arrayOfArticlesByCategories[ABC].id) {
                             articleAfterActivate.push(arrayOfArticlesByActivites[ABA]);
                         }
                     }
@@ -364,7 +369,6 @@ jQuery(() => {
             if (articleAfterActivate != markersFetch || articleAfterActivate.length != 0) {
                 map.removeLayer(group);
                 sidebar.hide();
-                map.setView([46, 0], 6);
                 initMarkersAndGroup(articleAfterActivate);
                 map.addLayer(group);
             }
@@ -410,9 +414,7 @@ jQuery(() => {
         });
 
         $(".close").click(() => {
-
+            displayListOfArticles();
-            $(".listeProjets p").hide();
-            $(".listeProjets").show();
         });
 
     });
@@ -421,23 +423,39 @@ jQuery(() => {
     reg_tile_temp = new L.layerGroup().addTo(map);
 
     //---Markers and Cluster
-    const markerIcon = L.icon({
+    const enedisMarkerIcon = L.icon({
         iconSize: [25, 41],
         iconAnchor: [10, 41],
         popupAnchor: [2, -40],
-        iconUrl: 'https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png',
+        iconUrl: '/components/com_leaflet/assets/css/images/marqueur-enedis.png',
-        shadowUrl: 'https://unpkg.com/leaflet@1.4.0/dist/images/marker-shadow.png'
+        shadowUrl: '/components/com_leaflet/assets/css/images/marker-shadow.png'
+    });
+
+    const cooraceMarkerIcon = L.icon({
+        iconSize: [25, 41],
+        iconAnchor: [10, 41],
+        popupAnchor: [2, -40],
+        iconUrl: '/components/com_leaflet/assets/css/images/marqueur-coorace.png',
+        shadowUrl: '/components/com_leaflet/assets/css/images/marker-shadow.png'
+    });
+
+    const expMarkerIcon = L.icon({
+        iconSize: [25, 41],
+        iconAnchor: [10, 41],
+        popupAnchor: [2, -40],
+        iconUrl: '/components/com_leaflet/assets/css/images/marqueur-commun.png',
+        shadowUrl: '/components/com_leaflet/assets/css/images/marker-shadow.png'
     });
 
     var LeafIcon = L.Icon.extend({
         options: {
-            shadowUrl: 'https://unpkg.com/leaflet@1.4.0/dist/images/marker-shadow.png',
+            shadowUrl: '/components/com_leaflet/assets/css/images/marker-shadow.png',
             iconSize: [25, 41],
             iconAnchor: [10, 41],
             popupAnchor: [2, -40]
         }
     });
-    var orangeIcon = new LeafIcon({ iconUrl: 'https://eolab.cnes.fr/images/Projets/icon_orange.png' });
+    var selectedIcon = new LeafIcon({ iconUrl: '/components/com_leaflet/assets/css/images/marqueur-selected.png' });
 
 
     initMarkersAndGroup(markersFetch);
@@ -449,8 +467,8 @@ jQuery(() => {
         dataOfTheme.forEach((theme) => {
             var img = document.createElement("IMG");
             img.setAttribute("src", `${window.location.origin}/images/cartographie/${nameOfTheme}/${theme.value}.png`);
-            img.setAttribute("width", "40px");
+            img.setAttribute("width", "60px");
-            img.setAttribute("height", "40px");
+            img.setAttribute("height", "60px");
             img.setAttribute("style", "margin-right: 10px;margin-top: 10px;");
             img.setAttribute("id", theme.value);
             img.setAttribute("title", theme.name);
@@ -462,7 +480,13 @@ jQuery(() => {
         _div = L.DomUtil.create('div', 'listeProjets'), article;
         _div.innerHTML = `<div class=listeArticles><h3><span uk-icon="menu"></span> Liste (<span class="nombreProjetsAffiches">` + article.length + `</span>)</h3></div>`;
         for (var i = 0; i < article.length; i++) {
-            _div.innerHTML += `<p style="display: none;"><a href="${window.location.origin}/projets/${article[i].alias}" target="_blank">` + article[i].title + `</a></p>`;
+            if(article[i].catid == 18){
+            _div.innerHTML += `<p style="display: none;"><a href="${window.location.origin}/actions-partenariales/${article[i].alias}" target="_blank">` + article[i].title + `</a></p>`;
+            }else if (article[i].catid == 19){
+                _div.innerHTML += `<p style="display: none;"><a href="${window.location.origin}/fiche-savoir-faire/${article[i].alias}" target="_blank">` + article[i].title + `</a></p>`;
+            }else if (article[i].catid == 20){
+                _div.innerHTML += `<p style="display: none;"><a href="${window.location.origin}/fiche-appel-a-projet/${article[i].alias}" target="_blank">` + article[i].title + `</a></p>`;s
+            }
         }
     }
 
@@ -484,13 +508,16 @@ jQuery(() => {
     }
     function displayListOfArticlesOnSidebarClosed() {
         $(".close").click(() => {
-
+            displayListOfArticles();
-            $(".listeProjets p").hide();
-            $(".listeProjets").show();
         });
 
     }
 
+    function displayListOfArticles() {
+        $(".listeProjets p").hide();
+        $(".listeProjets").show();
+    }
+
     //Fonction qui vérifie si l'état du champs contenant la chaîne WKT de la zone d'intérêt des projets. 
     function checkInterestZone(zone) {
         if (zone == null) {
@@ -500,8 +527,60 @@ jQuery(() => {
         }
     }
 
+    //Détecte les niveaux de zoom et gère le comportement du marker sélectionné selon le niveau
+    var zoomInZone = document.getElementsByClassName('leaflet-control-zoom-in');
+    var zoomOutZone = document.getElementsByClassName('leaflet-control-zoom-out');
+    for (i = 0; i < zoomInZone.length; i++) {
+        zoomInZone[i].addEventListener('click', function () {
+            if (map.getZoom() < 9) {
+                reg_tile_temp.clearLayers();
+                sidebar.hide();
+                displayListOfArticles();
+            }
+        })
+    }
+    for (i = 0; i < zoomOutZone.length; i++) {
+        zoomOutZone[i].addEventListener('click', function () {
+            if (map.getZoom() < 9) {
+                reg_tile_temp.clearLayers();
+                sidebar.hide();
+                displayListOfArticles();
+            }
+        })
+    }
+    //EOF Fonction gestion sélection zoom
+
+    function getDepartementName(departementValue) {
+
+        if (departementValue == "ariege") {
+            return "Ariège";
+        } else if (departementValue == "aude") {
+            return "Aude";
+        } else if (departementValue == "aveyron") {
+            return "Aveyron";
+        } else if (departementValue == "gard") {
+            return "Gard";
+        } else if (departementValue == "haute-garonne") {
+            return "Haute-Garonne";
+        } else if (departementValue == "gers") {
+            return "Gers";
+        } else if (departementValue == "herault") {
+            return "Hérault";
+        } else if (departementValue == "lot") {
+            return "Lot";
+        } else if (departementValue == "lozere") {
+            return "Lozere";
+        } else if (departementValue == "pyrenees-orientales") {
+            return "Pyrenees-Orientales";
+        } else if (departementValue == "tarn") {
+            return "Tarn";
+        } else if (departementValue == "tarn-garonne") {
+            return "Tarn et Garonne";
+        }
+    }
+
     function initMarkersAndGroup(items) {
-        group = new L.markerClusterGroup({ showCoverageOnHover: false, zoomToBoundsOnClick: true,  spiderfyOnMaxZoom: false, disableClusteringAtZoom : 8});
+        group = new L.markerClusterGroup({ showCoverageOnHover: false, zoomToBoundsOnClick: true, spiderfyOnMaxZoom: false, disableClusteringAtZoom: 8 });
 
         for (let article = 0; article < items.length; article++) {
             var articleMarker = items[article].localisation;
@@ -511,15 +590,28 @@ jQuery(() => {
             let long = coordArticleMarker[1];
             let title = items[article].title;
 
-            var _mar = L.marker(new L.LatLng(lat, long), {
+            var _mar;
-                icon: markerIcon
+            var idOfCategory = items[article].catid;
+            if (idOfCategory == 18) {
+                _mar = L.marker(new L.LatLng(lat, long), {
+                    icon: expMarkerIcon
                 });
+            } else if (idOfCategory == 19) {
+                _mar = L.marker(new L.LatLng(lat, long), {
+                    icon: cooraceMarkerIcon
+                });
+            } else if (idOfCategory == 20) {
+                _mar = L.marker(new L.LatLng(lat, long), {
+                    icon: enedisMarkerIcon
+                });
+            }
 
             _mar.bindPopup(title);
             _mar.on('click', function clicMarker() {
+                reg_tile_temp.clearLayers();
                 $(".listeProjets").hide();
                 const _marActive = L.marker(new L.LatLng(lat, long), {
-                   icon: orangeIcon
+                    icon: selectedIcon
                 });
 
                 //Récupérer les coordonnées du point, stocker dans une variable (appelée dans la sidebar.setContent plus bas)                    
@@ -527,25 +619,39 @@ jQuery(() => {
 
                 //Vérifier si marqueur est de type DT ou autres
                 //On se base sur nomdelasiae car le champ n'est pas présent sur les projets DT mais est présent sur les autres
-                if (items[article].nomdelasiae == null)
+                if (items[article].catid == 20) {
-                {
+                    dpt = getDepartementName(items[article].departement);
                     content = `<div class="listeProjetsDT">
                             <div class=listeArticles>
-                            <h3 class="uk-heading-medium">
+                            <h3 class="uk-heading-small uk-margin-top">
-                            <span uk-icon="icon: menu; ratio: 2" class="uk-icon"></span> Liste (<span class="nombreProjetsAffiches">${markersDT.length}</span>)
+                            <span uk-icon="icon: menu; ratio: 2" class="uk-icon"></span> Liste des Appels à projet du département : `+ dpt +
-                            </h3>
+                        `</h3>
                             </div>`;
                     for (var i = 0; i < markersDT.length; i++) {
+                        if (markersDT[i].departement == items[article].departement) {
                             content += `<p>
-                                    <a href="${window.location.origin}/projets/${markersDT[i].alias}" target="_blank">` + markersDT[i].title + `</a>
+                                    <a href="${window.location.origin}/fiche-appel-a-projet/${markersDT[i].alias}" target="_blank">` + markersDT[i].title + `</a>
                                     </p>`;
                         }
+                    }
                     content += `</div>`;
-                            
+                } else if (items[article].catid == 18) {
-                } else {
+                    content = `<h3 class="uk-heading-small uk-margin-top">${title}</h3> <br/>
-                    content = `<h3 class="uk-heading-medium">${title}</h3> <br/>
                     <div class="uk-text-lead uk-margin-bottom">${items[article].introtext} </div>
-                            <a class="uk-button uk-button-primary" href="${window.location.origin}/projets/${items[article].alias}" target="_blank"><span uk-icon="table"></span>Voir l'article complet</a>`;
+                    <a class="uk-button uk-button-primary" href="${window.location.origin}/actions-partenariales/${items[article].alias}" target="_blank"><span uk-icon="table"></span>Voir l'article complet</a>`;
+
+                } else if (items[article].catid == 19) {
+                    actName = getActiviteName(items[article].activite);
+                    content = `<h3 class="uk-heading-small uk-margin-top">${title}</h3> <br/>
+                            <div class="uk-text-lead uk-margin-bottom">Domaine d'activité : <ul>`;
+                    for (var i = 0; i < actName.length; i++) {
+                        content += `<li>` + actName[i] + `</li>`;
+                    }
+                    content += `</ul><br/>Adresse : ${items[article].adresse}</div>`;
+                    if (items[article].zonedintervention != null) {
+                        content += `<div class="uk-text-lead uk-margin-bottom">Zone d'intervention : ${items[article].zonedintervention}</div>`;
+                    }
+                    content += `<a class="uk-button uk-button-primary" href="${window.location.origin}/fiche-savoir-faire/${items[article].alias}" target="_blank"><span uk-icon="table"></span>Voir l'article complet</a>`;
                 }
                 sidebar.setContent(content);
                 sidebar.on('close', displayListOfArticlesOnSidebarClosed());
@@ -555,8 +661,6 @@ jQuery(() => {
                 var zoneDefined = checkInterestZone(items[article].jce);
                 if (zoneDefined) {
                     geom_temp = omnivore.wkt(items[article].jce);
-                    //console.log("geom_temp " + geom_temp);
-                    // reg_tile_temp.clearLayers();
                     geom_temp.addTo(reg_tile_temp);
                 }
                 _marActive.addTo(reg_tile_temp);
@@ -567,7 +671,19 @@ jQuery(() => {
             }
 
             group.addLayer(_mar);
-            
         }
     }
+
+    function getActiviteName(act) {
+        actList = activites;
+        var actOfArticle = [];
+        for (var i = 0; i < actList.length; i++) {
+            for (var j = 0; j < act.length; j++) {
+                if (actList[i].value == act[j]) {
+                    actOfArticle.push(actList[i].name);
+                }
+            }
+        }
+        return actOfArticle;
+    }
 });