diff --git a/README.md b/README.md index 23add44..294f385 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # JWE

-Ce projet cartographique est une application Web simple qui vous permet de tester vos connaissances des communes des territoires proposés à l'aide de cartes interactives. +Ce projet cartographique est une application Web simple qui vous permet de tester vos connaissances des communes ou des pays proposés à l'aide de cartes interactives.

diff --git a/js/map.js b/js/map.js index 1ecf4c9..c1284eb 100644 --- a/js/map.js +++ b/js/map.js @@ -2,11 +2,18 @@ * js/map.js */ +/** + * Typos + * + * Après l'ajout de l'Afrique, on remplace "communes" par "zones" + * Zones = Communes ou Pays + */ + /** * Récupérer le nom du fichier actuel (ex: 971.php) et en extraire le code du département (ex: 971). */ const currentFileName = window.location.pathname.split('/').pop() -const codeDepartement = currentFileName.split('.')[0] +const codeCarte = currentFileName.split('.')[0] /** * Définir le centre , le niveau de zoom et le style de la carte en fonction du code du département. @@ -15,7 +22,7 @@ let centerCoordinates let zoomLevel let styleFileName -switch (codeDepartement) { +switch (codeCarte) { case 'KAMA': centerCoordinates = [21.21, 1.36] // Afrique zoomLevel = 2.7 @@ -57,7 +64,7 @@ const map = new maplibregl.Map({ zoom: zoomLevel }) -if (codeDepartement !== '973') { +if (codeCarte !== '973') { /** * Désactive le zoom, le double-clic, le déplacement de la carte pour les cartes autres que celle la Guyane. */ @@ -73,9 +80,9 @@ if (codeDepartement !== '973') { map.setMaxZoom(9.5) } -if (codeDepartement === 'KAMA') { +if (codeCarte === 'KAMA') { /** - * Ajoute les contrôles de navigation à la carte, et définit les niveaux de zoom minimum et maximum pour la Guyane. + * Ajoute les contrôles de navigation à la carte, et définit les niveaux de zoom minimum et maximum pour l'Afrique'. */ map.addControl(new maplibregl.NavigationControl({showCompass: false})) map.setMinZoom(2.4) @@ -111,7 +118,7 @@ let hoveredStateId = null /** * Référence à la commune actuellement sélectionnée pour trouver. */ -let currentCommune = null +let currentZone = null /** * Ensemble des codes des communes déjà trouvées correctement. @@ -122,12 +129,12 @@ const correctAnswers = new Set() * Récupère les propriétés des communes depuis un fichier GeoJSON en fonction du code du département. * * @async - * @param {string} codeDepartement - Numéro du département. + * @param {string} codeCarte - Code de la carte. * @returns {Promise} Promesse résolue avec les propriétés des communes. */ -async function getFile(codeDepartement) { +async function getFile(codeCarte) { try { - const response = await fetch(`../kat/data/${codeDepartement}/contours-${codeDepartement === 'KAMA' ? 'pays' : 'communes'}.geojson`) + const response = await fetch(`../kat/data/${codeCarte}/contours-${codeCarte === 'KAMA' ? 'pays' : 'communes'}.geojson`) if (!response.ok) { throw new Error(`Échec du chargement du fichier JSON : ${response.statusText}`) } @@ -143,26 +150,26 @@ async function getFile(codeDepartement) { /** * Récupère les coordonnées du centre de la commune depuis le fichier "centres.json" en fonction du code du département. * - * @param {string} codeDepartement - Numéro du département. - * @param {string} communeCode - Code de la commune. + * @param {string} codeCarte - Code de la carte. + * @param {string} codeZone - Code de la zone. * @returns {Promise} Promesse résolue avec les coordonnées du centre de la commune. */ -async function getCommuneCenterCoordinates(codeDepartement, communeCode) { +async function getZoneCenterCoordinates(codeCarte, codeZone) { try { // Utiliser fetch pour lire le fichier "centres.json" - const response = await fetch(`../kat/data/${codeDepartement}/centres.json`) + const response = await fetch(`../kat/data/${codeCarte}/centres.json`) if (!response.ok) { throw new Error(`Échec du chargement du fichier JSON : ${response.statusText}`) } const centerData = await response.json() - // Vérifier si le code de la commune existe dans les données - if (communeCode in centerData) { - const coordinates = centerData[communeCode] + // Vérifier si le code de la zone existe dans les données + if (codeZone in centerData) { + const coordinates = centerData[codeZone] return coordinates } else { - throw new Error(`Aucune donnée de centre trouvée pour la commune : ${communeCode}`) + throw new Error(`Aucune donnée de centre trouvée pour la commune : ${codeZone}`) } } catch (error) { console.error('Erreur lors de la récupération des coordonnées du centre de la commune :', error) @@ -187,64 +194,64 @@ function updateScore(isCorrect) { /** * Sélectionne une commune au hasard parmi celles qui n'ont pas encore été trouvées. * - * @param {Array} communes - Liste de toutes les communes. - * @returns {Object|null} Retourne la commune sélectionnée ou null si toutes les communes ont été trouvées. + * @param {Array} zones - Liste de toutes les zones. + * @returns {Object|null} Retourne la commune sélectionnée ou null si toutes les zones ont été trouvées. */ -function pickRandomCommune(communes) { - const communesRestantes = communes.filter(commune => !correctAnswers.has(commune.code)) +function pickRandomZone(zones) { + const zonesRestantes = zones.filter(commune => !correctAnswers.has(commune.code)) - if (communesRestantes.length === 0) { + if (zonesRestantes.length === 0) { return null } - const index = Math.floor(Math.random() * communesRestantes.length) - return communesRestantes[index] + const index = Math.floor(Math.random() * zonesRestantes.length) + return zonesRestantes[index] } /** - * Définit la commune actuelle à trouver et met à jour l'affichage. + * Définit la zone actuelle à trouver et met à jour l'affichage. * - * @param {Object} commune - La commune à définir comme actuelle. + * @param {Object} zone - La zone à définir comme actuelle. */ -function setCommune(commune) { - if (currentCommune) { +function setZone(zone) { + if (currentZone) { map.setFeatureState( - {source: 'communes', id: currentCommune.code}, + {source: 'communes', id: currentZone.code}, {current: false} ) } - currentCommune = commune - document.getElementById('commune').innerText = commune.nom + currentZone = zone + document.getElementById('commune').innerText = zone.nom map.setFeatureState( - {source: 'communes', id: commune.code}, + {source: 'communes', id: zone.code}, {current: true} ) } /** - * Vérifie si le code de la commune cliquée correspond à la commune actuelle à trouver. + * Vérifie si le code de la zone cliquée correspond à la commune actuelle à trouver. * - * @param {string} communeCode - Code de la commune à vérifier. + * @param {string} codeZone - code de la zone à vérifier. * @returns {boolean} Résultat de la vérification. */ -function checkAnswer(communeCode) { - return currentCommune && communeCode === currentCommune.code +function checkAnswer(codeZone) { + return currentZone && codeZone === currentZone.code } /** * Code pour la gestion des événements de la carte (load, mousemove, mouseleave, click). */ map.on('load', async () => { - const communes = await getFile(codeDepartement) + const zones = await getFile(codeCarte) /** * Ajouter une source de données pour les communes. */ map.addSource('communes', { 'type': 'geojson', - 'data': `../kat/data/${codeDepartement}/contours-${codeDepartement === 'KAMA' ? 'pays' : 'communes'}.geojson`, + 'data': `../kat/data/${codeCarte}/contours-${codeCarte === 'KAMA' ? 'pays' : 'communes'}.geojson`, 'promoteId': 'code' }) @@ -311,7 +318,7 @@ map.on('load', async () => { }) /** - * Gère l'evenement mouseleave (quand la souris quitte la commune) + * Gère l'evenement mouseleave (quand la souris quitte la zone) */ map.on('mouseleave', 'drom', () => { map.getCanvas().style.cursor = '' @@ -325,21 +332,21 @@ map.on('load', async () => { }) /** - * Gère l'evenement click (quand on clique sur la commune) + * Gère l'evenement click (quand on clique sur la zone) */ map.on('click', 'drom', async e => { if (e.features.length > 0) { - const clickedCommuneCode = e.features[0].id - const clickedCommuneNom = e.features[0].properties.nom - const isCorrect = checkAnswer(clickedCommuneCode) + const clickedCodeZone = e.features[0].id + const clickedZoneNom = e.features[0].properties.nom + const isCorrect = checkAnswer(clickedCodeZone) if (isCorrect) { updateScore(true) - const centerCoordinates = await getCommuneCenterCoordinates(codeDepartement, clickedCommuneCode) + const centerCoordinates = await getZoneCenterCoordinates(codeCarte, clickedCodeZone) const popup = new maplibregl.Popup({offset: popupOffsets, closeButton: false, className: 'popup-ok'}) .setLngLat([centerCoordinates[0], centerCoordinates[1]]) - .setHTML(`

Bravo, c'est ${clickedCommuneNom}

`) + .setHTML(`

Bravo, c'est ${clickedZoneNom}

`) .setMaxWidth('200px') .addTo(map) @@ -347,21 +354,21 @@ map.on('load', async () => { popup.remove() }, 1500) - correctAnswers.add(clickedCommuneCode) - communes.forEach(commune => { + correctAnswers.add(clickedCodeZone) + zones.forEach(commune => { map.setFeatureState( {source: 'communes', id: commune.code}, {incorrect: false} ) }) map.setFeatureState( - {source: 'communes', id: clickedCommuneCode}, + {source: 'communes', id: clickedCodeZone}, {correct: true, current: false} ) - const newCommune = pickRandomCommune(communes) - if (newCommune) { - setCommune(newCommune) + const newZone = pickRandomZone(zones) + if (newZone) { + setZone(newZone) } else { const totalAnswers = Number.parseInt(ok.innerText, 10) + Number.parseInt(ko.innerText, 10) const percentageCorrectAnswers = (Number.parseInt(ok.innerText, 10) / totalAnswers) * 100 @@ -373,11 +380,11 @@ map.on('load', async () => { } } else { updateScore(false) - const centerCoordinates = await getCommuneCenterCoordinates(codeDepartement, clickedCommuneCode) + const centerCoordinates = await getZoneCenterCoordinates(codeCarte, clickedCodeZone) const popup = new maplibregl.Popup({offset: popupOffsets, closeButton: false, className: 'popup-ko'}) .setLngLat([centerCoordinates[0], centerCoordinates[1]]) - .setHTML(`

Faux, c'est ${clickedCommuneNom}

`) + .setHTML(`

Faux, c'est ${clickedZoneNom}

`) .setMaxWidth('200px') .addTo(map) @@ -386,13 +393,13 @@ map.on('load', async () => { }, 1500) map.setFeatureState( - {source: 'communes', id: clickedCommuneCode}, + {source: 'communes', id: clickedCodeZone}, {incorrect: true} ) } } }) - const commune = pickRandomCommune(communes) - setCommune(commune) + const zone = pickRandomZone(zones) + setZone(zone) })