carto_J5 to main #1
@ -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 © <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,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("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);
|
||||
@ -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(() => {
|
||||
|
||||
$(".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,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), {
|
||||
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)
|
||||
@ -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">
|
||||
<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++) {
|
||||
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 {
|
||||
content = `<h3 class="uk-heading-medium">${title}</h3> <br/>
|
||||
} 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}/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;
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user