From d40720f80cbac699faa07edc8dbbd1fb4d8adea7 Mon Sep 17 00:00:00 2001 From: "vincent.tisseyre" Date: Tue, 12 Nov 2024 12:28:09 +0100 Subject: [PATCH] BREAKING CHANGE : replace app.js with prod app.js adapted for J5 --- com_leaflet/media/js/app.js | 234 +++++++++++++++++++++++++++--------- 1 file changed, 175 insertions(+), 59 deletions(-) diff --git a/com_leaflet/media/js/app.js b/com_leaflet/media/js/app.js index 1a287e8..a076b34 100644 --- a/com_leaflet/media/js/app.js +++ b/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 © OpenStreetMap contributors, Imagery © Mapbox', - 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 += ''; 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(() => { - - $(".listeProjets p").hide(); - $(".listeProjets").show(); + displayListOfArticles(); }); }); @@ -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', - shadowUrl: 'https://unpkg.com/leaflet@1.4.0/dist/images/marker-shadow.png' + iconUrl: '/components/com_leaflet/assets/css/images/marqueur-enedis.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,20 +467,26 @@ 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("height", "40px"); + img.setAttribute("width", "60px"); + img.setAttribute("height", "60px"); img.setAttribute("style", "margin-right: 10px;margin-top: 10px;"); img.setAttribute("id", theme.value); img.setAttribute("title", theme.name); icons.push(img); }) - } + } function addListOfArticles(article) { _div = L.DomUtil.create('div', 'listeProjets'), article; _div.innerHTML = `

Liste (` + article.length + `)

`; for (var i = 0; i < article.length; i++) { - _div.innerHTML += `

` + article[i].title + `

`; + if(article[i].catid == 18){ + _div.innerHTML += `

` + article[i].title + `

`; + }else if (article[i].catid == 19){ + _div.innerHTML += `

` + article[i].title + `

`; + }else if (article[i].catid == 20){ + _div.innerHTML += `

` + article[i].title + `

`;s + } } } @@ -484,13 +508,16 @@ jQuery(() => { } function displayListOfArticlesOnSidebarClosed() { $(".close").click(() => { - - $(".listeProjets p").hide(); - $(".listeProjets").show(); + displayListOfArticles(); }); } + 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,9 +527,61 @@ 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; // mise au format des coordonnées pour affichage avec L.marker @@ -510,64 +589,101 @@ jQuery(() => { let lat = coordArticleMarker[0]; let long = coordArticleMarker[1]; let title = items[article].title; - - var _mar = L.marker(new L.LatLng(lat, long), { - icon: markerIcon - }); - + + var _mar; + 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) sidebar.show(); //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) - { - content = `
+ if (items[article].catid == 20) { + dpt = getDepartementName(items[article].departement); + content = `
-

- Liste (${markersDT.length}) -

+

+ Liste des Appels à projet du département : `+ dpt + + `

`; for (var i = 0; i < markersDT.length; i++) { - content += `

- ` + markersDT[i].title + ` + if (markersDT[i].departement == items[article].departement) { + content += `

+ ` + markersDT[i].title + `

`; + } } content += `
`; - - } else { - content = `

${title}


-
${items[article].introtext}
- Voir l'article complet`; + } else if (items[article].catid == 18) { + content = `

${title}


+
${items[article].introtext}
+ Voir l'article complet`; + + } else if (items[article].catid == 19) { + actName = getActiviteName(items[article].activite); + content = `

${title}


+
Domaine d'activité :
    `; + for (var i = 0; i < actName.length; i++) { + content += `
  • ` + actName[i] + `
    • `; + } + content += `

Adresse : ${items[article].adresse}
`; + if (items[article].zonedintervention != null) { + content += `
Zone d'intervention : ${items[article].zonedintervention}
`; + } + content += `Voir l'article complet`; } sidebar.setContent(content); sidebar.on('close', displayListOfArticlesOnSidebarClosed()); - + //Remet reg_tile_temp à 0 avant d'y intégrer geom_temp si le champs contenant le WKT de la zone d'intérêt est complété reg_tile_temp.clearLayers(); 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); - + }); if (map.getZoom() > 15 && map.hasLayer(_mar)) { map.closePopup(); } - + 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; + } });