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 = `
- ` + markersDT[i].title + ` + if (markersDT[i].departement == items[article].departement) { + content += `
`; + } } content += `