Create maps pages
This commit is contained in:
@@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>JWE - KAT</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
|
||||||
|
<link rel="stylesheet" href="./css/map.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 id="title">Guadeloupe (971)</h1>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: center;">
|
||||||
|
<p style="color: green; font-weight: bold; margin-right: 2em;">Correct ✅ : <span style="color: black;" id="OK">0</span></p>
|
||||||
|
<p style="color: red; font-weight: bold;">Faux ❌ : <span style="color: black;" id="KO">0</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p style="font-weight: bold;">Trouve la commune</p>
|
||||||
|
<p id="commune" style="font-size: 30px; font-weight: bold; color: #1F51FF;">...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="map"></div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||||
|
<script src="./js/map.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>JWE - KAT</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
|
||||||
|
<link rel="stylesheet" href="./css/map.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 id="title">Martinique (972)</h1>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: center;">
|
||||||
|
<p style="color: green; font-weight: bold; margin-right: 2em;">Correct ✅ : <span style="color: black;" id="OK">0</span></p>
|
||||||
|
<p style="color: red; font-weight: bold;">Faux ❌ : <span style="color: black;" id="KO">0</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p style="font-weight: bold;">Trouve la commune</p>
|
||||||
|
<p id="commune" style="font-size: 30px; font-weight: bold; color: #1F51FF">...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="map"></div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||||
|
<script src="./js/map.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>JWE - KAT</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
|
||||||
|
<link rel="stylesheet" href="./css/map.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 id="title">Guyane (973)</h1>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: center;">
|
||||||
|
<p style="color: green; font-weight: bold; margin-right: 2em;">Correct ✅ : <span style="color: black;" id="OK">0</span></p>
|
||||||
|
<p style="color: red; font-weight: bold;">Faux ❌ : <span style="color: black;" id="KO">0</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p style="font-weight: bold;">Trouve la commune</p>
|
||||||
|
<p id="commune" style="font-size: 30px; font-weight: bold; color: #1F51FF">...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="map"></div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||||
|
<script src="./js/map.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>JWE - KAT</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
|
||||||
|
<link rel="stylesheet" href="./css/map.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 id="title">La Réunion (974)</h1>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: center;">
|
||||||
|
<p style="color: green; font-weight: bold; margin-right: 2em;">Correct ✅ : <span style="color: black;" id="OK">0</span></p>
|
||||||
|
<p style="color: red; font-weight: bold;">Faux ❌ : <span style="color: black;" id="KO">0</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p style="font-weight: bold;">Trouve la commune</p>
|
||||||
|
<p id="commune" style="font-size: 30px; font-weight: bold; color: #1F51FF">...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="map"></div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||||
|
<script src="./js/map.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+42
@@ -0,0 +1,42 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, #map {
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title,div {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-ko .maplibregl-popup-content {
|
||||||
|
background-color: rgba(255, 0, 0, 0.9);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0px 0px 0px 2px rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-ok .maplibregl-popup-content {
|
||||||
|
background-color: rgba(0, 255, 34, 0.9);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0px 0px 0px 2px rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.maplibregl-popup-tip {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
body {
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 5.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, li {
|
||||||
|
padding: 3vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,383 @@
|
|||||||
|
/**
|
||||||
|
* js/map.js
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Définir le centre , le niveau de zoom et le style de la carte en fonction du code du département.
|
||||||
|
*/
|
||||||
|
let centerCoordinates
|
||||||
|
let zoomLevel
|
||||||
|
let styleFileName
|
||||||
|
|
||||||
|
switch (codeDepartement) {
|
||||||
|
case '971':
|
||||||
|
centerCoordinates = [-61.4167, 16.25] // Guadeloupe
|
||||||
|
zoomLevel = 9
|
||||||
|
styleFileName = 'ortho.json'
|
||||||
|
break
|
||||||
|
case '972':
|
||||||
|
centerCoordinates = [-61.01635, 14.60285] // Martinique
|
||||||
|
zoomLevel = 9.5
|
||||||
|
styleFileName = 'ortho.json'
|
||||||
|
break
|
||||||
|
case '973':
|
||||||
|
centerCoordinates = [-53.1258, 3.9339] // Guyane française
|
||||||
|
zoomLevel = 7
|
||||||
|
styleFileName = 'ortho-jwe.json'
|
||||||
|
break
|
||||||
|
case '974':
|
||||||
|
centerCoordinates = [55.52905, -21.13014] // La Réunion
|
||||||
|
styleFileName = 'ortho.json'
|
||||||
|
zoomLevel = 9.5
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
centerCoordinates = [-61.4167, 16.25] // Par défaut (Guadeloupe)
|
||||||
|
styleFileName = 'ortho.json'
|
||||||
|
zoomLevel = 9.5
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialise et configure la carte
|
||||||
|
*/
|
||||||
|
const map = new maplibregl.Map({
|
||||||
|
container: 'map',
|
||||||
|
style: `./kat/styles/${styleFileName}`,
|
||||||
|
center: centerCoordinates,
|
||||||
|
zoom: zoomLevel
|
||||||
|
})
|
||||||
|
|
||||||
|
if (codeDepartement !== '973') {
|
||||||
|
/**
|
||||||
|
* Désactive le zoom, le double-clic, le déplacement de la carte pour les cartes autres que celle la Guyane.
|
||||||
|
*/
|
||||||
|
map.scrollZoom.disable()
|
||||||
|
map.doubleClickZoom.disable()
|
||||||
|
map.dragPan.disable()
|
||||||
|
} else {
|
||||||
|
/**
|
||||||
|
* Ajoute les contrôles de navigation à la carte, et définit les niveaux de zoom minimum et maximum pour la Guyane.
|
||||||
|
*/
|
||||||
|
map.addControl(new maplibregl.NavigationControl({showCompass: false}))
|
||||||
|
map.setMinZoom(7)
|
||||||
|
map.setMaxZoom(9.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Définit les décalages des popups en fonction de leur position.
|
||||||
|
*/
|
||||||
|
const popupOffsets = {
|
||||||
|
'top': [0, 0],
|
||||||
|
'top-left': [0, 0],
|
||||||
|
'top-right': [0, 0],
|
||||||
|
'bottom': [0, -30],
|
||||||
|
'bottom-left': [0, -50],
|
||||||
|
'bottom-right': [0, -50],
|
||||||
|
'left': [25, -25],
|
||||||
|
'right': [-25, -25]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Référence aux éléments HTML pour afficher le score.
|
||||||
|
*/
|
||||||
|
const ok = document.getElementById('OK')
|
||||||
|
const ko = document.getElementById('KO')
|
||||||
|
|
||||||
|
/**
|
||||||
|
* État actuel de la commune survolée.
|
||||||
|
*/
|
||||||
|
let hoveredStateId = null
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Référence à la commune actuellement sélectionnée pour trouver.
|
||||||
|
*/
|
||||||
|
let currentCommune = null
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ensemble des codes des communes déjà trouvées correctement.
|
||||||
|
*/
|
||||||
|
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.
|
||||||
|
* @returns {Promise<Object[]>} Promesse résolue avec les propriétés des communes.
|
||||||
|
*/
|
||||||
|
async function getFile(codeDepartement) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`./kat/data/${codeDepartement}/contours-communes.geojson`)
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Échec du chargement du fichier JSON : ${response.statusText}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
data = await response.json()
|
||||||
|
return data.features.map(({properties}) => properties)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur:', error)
|
||||||
|
throw new Error(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
* @returns {Promise<number[]>} Promesse résolue avec les coordonnées du centre de la commune.
|
||||||
|
*/
|
||||||
|
async function getCommuneCenterCoordinates(codeDepartement, communeCode) {
|
||||||
|
try {
|
||||||
|
// Utiliser fetch pour lire le fichier "centres.json"
|
||||||
|
const response = await fetch(`./kat/data/${codeDepartement}/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]
|
||||||
|
return coordinates
|
||||||
|
} else {
|
||||||
|
throw new Error(`Aucune donnée de centre trouvée pour la commune : ${communeCode}`)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors de la récupération des coordonnées du centre de la commune :', error)
|
||||||
|
throw new Error(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Met à jour le score en fonction de la réponse.
|
||||||
|
*
|
||||||
|
* @param {boolean} isCorrect - Indique si la réponse est correcte.
|
||||||
|
*/
|
||||||
|
function updateScore(isCorrect) {
|
||||||
|
if (isCorrect) {
|
||||||
|
ok.innerText = Number.parseInt(ok.innerText, 10) + 1
|
||||||
|
} else {
|
||||||
|
ko.innerText = Number.parseInt(ko.innerText, 10) + 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
function pickRandomCommune(communes) {
|
||||||
|
const communesRestantes = communes.filter(commune => !correctAnswers.has(commune.code))
|
||||||
|
|
||||||
|
if (communesRestantes.length === 0) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const index = Math.floor(Math.random() * communesRestantes.length)
|
||||||
|
return communesRestantes[index]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Définit la commune actuelle à trouver et met à jour l'affichage.
|
||||||
|
*
|
||||||
|
* @param {Object} commune - La commune à définir comme actuelle.
|
||||||
|
*/
|
||||||
|
function setCommune(commune) {
|
||||||
|
if (currentCommune) {
|
||||||
|
map.setFeatureState(
|
||||||
|
{source: 'communes', id: currentCommune.code},
|
||||||
|
{current: false}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
currentCommune = commune
|
||||||
|
document.getElementById('commune').innerText = commune.nom
|
||||||
|
|
||||||
|
map.setFeatureState(
|
||||||
|
{source: 'communes', id: commune.code},
|
||||||
|
{current: true}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Vérifie si le code de la commune cliquée correspond à la commune actuelle à trouver.
|
||||||
|
*
|
||||||
|
* @param {string} communeCode - Code de la commune à vérifier.
|
||||||
|
* @returns {boolean} Résultat de la vérification.
|
||||||
|
*/
|
||||||
|
function checkAnswer(communeCode) {
|
||||||
|
return currentCommune && communeCode === currentCommune.code
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Code pour la gestion des événements de la carte (load, mousemove, mouseleave, click).
|
||||||
|
*/
|
||||||
|
map.on('load', async () => {
|
||||||
|
const communes = await getFile(codeDepartement)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ajouter une source de données pour les communes.
|
||||||
|
*/
|
||||||
|
map.addSource('communes', {
|
||||||
|
'type': 'geojson',
|
||||||
|
'data': `./kat/data/${codeDepartement}/contours-communes.geojson`,
|
||||||
|
'promoteId': 'code'
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ajouter une couche de remplissage pour les communes.
|
||||||
|
*/
|
||||||
|
map.addLayer({
|
||||||
|
'id': 'drom',
|
||||||
|
'type': 'fill',
|
||||||
|
'source': 'communes',
|
||||||
|
'layout': {},
|
||||||
|
'paint': {
|
||||||
|
'fill-color': '#1F51FF',
|
||||||
|
'fill-opacity': [
|
||||||
|
'case',
|
||||||
|
['boolean', ['feature-state', 'hover'], false],
|
||||||
|
0.8,
|
||||||
|
0
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ajouter une couche de remplissage pour les communes (2ème couche), en prenant en compte les réponses correctes et incorrectes.
|
||||||
|
*/
|
||||||
|
map.addLayer({
|
||||||
|
'id': 'drom-2',
|
||||||
|
'type': 'fill',
|
||||||
|
'source': 'communes',
|
||||||
|
'layout': {},
|
||||||
|
'paint': {
|
||||||
|
'fill-color': [
|
||||||
|
'case',
|
||||||
|
['boolean', ['feature-state', 'correct'], false], '#00FF00',
|
||||||
|
['boolean', ['feature-state', 'incorrect'], false], '#FF0000',
|
||||||
|
'rgba(0,0,0,0)'
|
||||||
|
],
|
||||||
|
'fill-opacity': [
|
||||||
|
'case',
|
||||||
|
['boolean', ['feature-state', 'hover'], false], 0.5,
|
||||||
|
0.8
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gère l'evenement mousemove (quand la souris survole la commune)
|
||||||
|
*/
|
||||||
|
map.on('mousemove', 'drom', e => {
|
||||||
|
map.getCanvas().style.cursor = 'pointer'
|
||||||
|
if (e.features.length > 0) {
|
||||||
|
if (hoveredStateId) {
|
||||||
|
map.setFeatureState(
|
||||||
|
{source: 'communes', id: hoveredStateId},
|
||||||
|
{hover: false}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
hoveredStateId = e.features[0].id
|
||||||
|
map.setFeatureState(
|
||||||
|
{source: 'communes', id: hoveredStateId},
|
||||||
|
{hover: true}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gère l'evenement mouseleave (quand la souris quitte la commune)
|
||||||
|
*/
|
||||||
|
map.on('mouseleave', 'drom', () => {
|
||||||
|
map.getCanvas().style.cursor = ''
|
||||||
|
if (hoveredStateId) {
|
||||||
|
map.setFeatureState(
|
||||||
|
{source: 'communes', id: hoveredStateId},
|
||||||
|
{hover: false}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
hoveredStateId = null
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gère l'evenement click (quand on clique sur la commune)
|
||||||
|
*/
|
||||||
|
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)
|
||||||
|
|
||||||
|
if (isCorrect) {
|
||||||
|
updateScore(true)
|
||||||
|
const centerCoordinates = await getCommuneCenterCoordinates(codeDepartement, clickedCommuneCode)
|
||||||
|
|
||||||
|
const popup = new maplibregl.Popup({offset: popupOffsets, closeButton: false, className: 'popup-ok'})
|
||||||
|
.setLngLat([centerCoordinates[0], centerCoordinates[1]])
|
||||||
|
.setHTML(`<h3>Bravo, c'est ${clickedCommuneNom}</h3>`)
|
||||||
|
.setMaxWidth('200px')
|
||||||
|
.addTo(map)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
popup.remove()
|
||||||
|
}, 1500)
|
||||||
|
|
||||||
|
correctAnswers.add(clickedCommuneCode)
|
||||||
|
communes.forEach(commune => {
|
||||||
|
map.setFeatureState(
|
||||||
|
{source: 'communes', id: commune.code},
|
||||||
|
{incorrect: false}
|
||||||
|
)
|
||||||
|
})
|
||||||
|
map.setFeatureState(
|
||||||
|
{source: 'communes', id: clickedCommuneCode},
|
||||||
|
{correct: true, current: false}
|
||||||
|
)
|
||||||
|
|
||||||
|
const newCommune = pickRandomCommune(communes)
|
||||||
|
if (newCommune) {
|
||||||
|
setCommune(newCommune)
|
||||||
|
} else {
|
||||||
|
const totalAnswers = Number.parseInt(ok.innerText, 10) + Number.parseInt(ko.innerText, 10)
|
||||||
|
const percentageCorrectAnswers = (Number.parseInt(ok.innerText, 10) / totalAnswers) * 100
|
||||||
|
|
||||||
|
alert(`Fin du jeu, ${Math.round(percentageCorrectAnswers)} % de bonnes réponses !`, )
|
||||||
|
setTimeout(() => {
|
||||||
|
location.reload()
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
updateScore(false)
|
||||||
|
const centerCoordinates = await getCommuneCenterCoordinates(codeDepartement, clickedCommuneCode)
|
||||||
|
|
||||||
|
const popup = new maplibregl.Popup({offset: popupOffsets, closeButton: false, className: 'popup-ko'})
|
||||||
|
.setLngLat([centerCoordinates[0], centerCoordinates[1]])
|
||||||
|
.setHTML(`<h3>Faux, c'est ${clickedCommuneNom}</h3>`)
|
||||||
|
.setMaxWidth('200px')
|
||||||
|
.addTo(map)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
popup.remove()
|
||||||
|
}, 1500)
|
||||||
|
|
||||||
|
map.setFeatureState(
|
||||||
|
{source: 'communes', id: clickedCommuneCode},
|
||||||
|
{incorrect: true}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const commune = pickRandomCommune(communes)
|
||||||
|
setCommune(commune)
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user