Afficher-masquer la carte
Bonjour ! :)
J'ai un petit souci sur mon projet au niveau du refresh lié à l'instance.
Quand je fais ma première recherche en saisissant une bonne suite de chiffres, pas de souci, j'ai bien les infos demandés avec ma carte Leaflet et les bonnes coordonnées. Sur ma deuxième recherche, si je fais une erreur de saisi, j'ai bien mon message d'erreur mais j'ai un cadre gris à l'emplacement de la carte, si je tente une 3ème saisi en rentrant un autre bonne suite de chiffres, j'ai toujours mon message d'erreur avec un autre message d'erreur dans ma console :
Uncaught Error: Map container is being reused by another instance
Pour bien faire, je dois faire Ctrl+F5 avant chaque recherches pour que ça marche, mais j'imagine qu'il y a une solution à ça...
Dans mon code j'ai volontairement laissé en commentaire les parties "display" car je pensais que cette méthode résoudrait le problème du cadre gris mais en faite il fait buguer Leaflet. Par exemple, si ces lignes sont actives et que je fais 2 recherches à la suite (avec de bon chiffres et donc avec 2 résultats) la carte du 2ème résultat apparait avec la moitié en gris, et plus je fais des recherches, plus la partie grise s’agrandit. Mais je pense que ce problème est aussi lié à ce problème d'instance.
Merci d'avance :)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <?php
include 'vendor/autoload.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<title>Entreprise</title>
</head>
<body>
<form id="form" class="form">
<input type="text" id="sic" class="num" name="texte" placeholder="SIRET"/>
<input type="submit" value="GO" id="valider" class="send"/>
</form>
<p id="result"></p>
<div id="mapid"></div>
<script src="script.js"></script>
</body>
</html> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| let map;
const form = document.getElementById('form');
form.addEventListener('submit',(ev) => {
ev.preventDefault();
if(map){
//map.getContainer().style.display = "none";
map.remove();
}
let saisi = document.getElementById('sic').value;
if(isNaN(saisi) || saisi.length != 14){
document.getElementById('result').textContent = "Veuillez rentrer un numéro SIRET valable (14 chiffres)";
}else{
document.getElementById('result').textContent ='';
fonctionTest(saisi);
}
})
function fonctionTest(siret){
let request = new XMLHttpRequest();
request.open("GET", 'apireq.php?texte='+siret, true);
request.addEventListener("readystatechange", () => {
if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
const reponse = JSON.parse(request.responseText);
addResult(reponse.etablissement.unite_legale.denomination, reponse.etablissement.unite_legale.nom, reponse.etablissement.geo_adresse, reponse.etablissement.unite_legale.etablissement_siege.date_dernier_traitement);
console.log(reponse);
addCoor(reponse.etablissement.unite_legale.etablissement_siege.longitude, reponse.etablissement.unite_legale.etablissement_siege.latitude)
}
});
request.send();
}
function addResult(deno, nom, add, date){
console.log(deno);
if(deno == null){
document.getElementById('result').textContent = nom+' '+add+' '+date;
}else{
document.getElementById('result').textContent = deno+' '+add+' '+date;
}
}
function addCoor(long, lat){
map = L.map('mapid').setView([lat, long], 15);
//map.getContainer().style.display = "block";
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
} |
