vincent.tisseyre/enedis_carto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

carto_J5 to main #1

Merged
vincent.tisseyre merged 15 commits from carto_J5 into main 2024-11-12 12:53:09 +01:00
Conversation 0 Commits 15 Files Changed 343 +175 -59
1 changed files with 175 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d40720f80c - Show all commits

234
com_leaflet/media/js/app.js
View File

@ -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(() => {
$(".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 = `<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(() => {
$(".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 = `<div class="listeProjetsDT">
if (items[article].catid == 20) {
dpt = getDepartementName(items[article].departement);
content = `<div class="listeProjetsDT">
<div class=listeArticles>
<h3 class="uk-heading-medium">
<span uk-icon="icon: menu; ratio: 2" class="uk-icon"></span> Liste (<span class="nombreProjetsAffiches">${markersDT.length}</span>)
</h3>
<h3 class="uk-heading-small uk-margin-top">
<span uk-icon="icon: menu; ratio: 2" class="uk-icon"></span> Liste des Appels à projet du département : `+ dpt +
`</h3>
</div>`;
for (var i = 0; i < markersDT.length; i++) {
content += `<p>
<a href="${window.location.origin}/projets/${markersDT[i].alias}" target="_blank">` + markersDT[i].title + `</a>
if (markersDT[i].departement == items[article].departement) {
content += `<p>
<a href="${window.location.origin}/fiche-appel-a-projet/${markersDT[i].alias}" target="_blank">` + markersDT[i].title + `</a>
</p>`;
}
}
content += `</div>`;
} else {
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>`;
} else if (items[article].catid == 18) {
content = `<h3 class="uk-heading-small uk-margin-top">${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}/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());
//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;
}
});