Afficher-masquer la carte

**d3LTa7** · 01/04/2021, 10h54

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

**mathieu** · 01/04/2021, 13h23

l'écran gris est le résultat normal de la commande "map.remove()".
vous souhaitez quel résultat quand le numéro saisi n'est pas valide ? vous voulez que le plan ne change pas ou bien qu'il disparaisse ?

**d3LTa7** · 01/04/2021, 14h20

qu'il disparaisse tout simplement !

**mathieu** · 01/04/2021, 14h33

dans ce cas je pense qu'il faut juste faire "map = L.map('mapid')" une seule fois au lancement de la page et vous cachez l'élément div "mapid" en css.
ensuite si le code est valide, vous affichez l'élément et vous faites "map.setView".
et si le code n'est pas valide, vous cachez l'élément.

https://javascript.developpez.com/fa...SS#affichObjet

**d3LTa7** · 01/04/2021, 15h06

J'ai tenté ça mais ca ne marche pas...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
    <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>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#mapid { 
    height: 200px; 
    width: 500px;
    display: none;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let map;
map = L.map('mapid')
const form = document.getElementById('form');
form.addEventListener('submit',(ev) => {
    ev.preventDefault();
    let saisi = document.getElementById('sic').value;
    if(isNaN(saisi) || saisi.length != 14){
        document.getElementById('mapid').display = "none";
        document.getElementById('result').textContent = "Veuillez rentrer un numéro SIRET valable (14 chiffres)";
    }else{
        document.getElementById('mapid').display = "block";
        document.getElementById('result').textContent ='';
        fonctionTest(saisi);
    }
})
 
function addCoor(long, lat){
    map.setView([lat, long], 15);  
    //map.getContainer().style.display = "block";
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
}

**mathieu** · 01/04/2021, 15h27

vous avez loupé un morceau pour afficher et cacher, c'est ".style.display ...".

**d3LTa7** · 01/04/2021, 15h33

Ca marche parfaitement !! Merci beaucoup !

Afficher-masquer la carte [LeafLet]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager