1

I'm trying to refresh the Leaflet map! I read the documentation and look on the internet but I can't find the solution ...

I tried a lot of method like map.remove () or map.viewreset or other solution read here or on the documentation.

I would obviously like the map to change when the user does a new search (by entering a new number and clicking on the button) and that the map is no longer visible if the number does not enter returns a status 200 (so either it is not a 14-digit sequence or the sequence does not exist in the API)

Thanks for your help :)

index.php :

    <body>
        <form id="form">
            <label for="sic" class="sic"> Numéro de SIRET : </label>
            <input type="text" id="sic" name="texte"/>
            <input type="submit" value="envoyer" id="valider" class="send"/>
        </form>
        <p id="result"></p>
        <div id="mapid"></div>
        <script src="script.js"></script>
    </body>

script.js

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('result').textContent = "Veuillez rentrer un numéro SIRET valable (14 chiffres)";
        document.getElementById('sic').value = ' ';
    }else{
        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);
            addCoor(longitude,latitude)
        }              
    });



function addCoor(long, lat){
   const map = L.map('mapid').setView([lat, long], 14);
   // map.viewreset;
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
}
Improve this question

1 Answer 1

Reset to default
1

The normal behaviour would be to re-center the map, instead of deleting it and then add it again to the page. But else, the correct way would be to remove the map with map.remove(). I think this has not worked for you, because you dont' do this before you create the new map. (I think because your map variable is not global).

So change it to:

form.addEventListener('submit',(ev) => {
    ev.preventDefault();
    if(map && !mapRemoved){
        map.getContainer().style.display = "none";
        map.remove(); // <-- remove the map
        mapRemoved = true;
        
    }
    let saisi = document.getElementById('sic').value;
    if(isNaN(saisi) || saisi.length != 3){
        document.getElementById('result').textContent = "Veuillez rentrer un numéro SIRET valable (14 chiffres)";
        document.getElementById('sic').value = '';
    }else{
        document.getElementById('result').innerHTML = '';
        fonctionTest(saisi);
    }
})




let mapRemoved = false;
let map; // <-- global map variable
function addCoor(){
   map = L.map('mapid').setView([42, 12.46], 14);
   map.getContainer().style.display = "block";
   mapRemoved = false;
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
}

https://jsfiddle.net/falkedesign/91h57ur0/

Improve this answer
8
  • ah yeah on the first load, the variable map is not defined. I updated the answer
    – Falke Design
    Commented Mar 31, 2021 at 11:32
  • always same error : Uncaught Error: Map container not found.
    – d3LTa7
    Commented Mar 31, 2021 at 11:41
  • Do you have your code exactly same as in my answer? Your error should then not be possible. Your error means, that you don't have a html element with the id mapid, but you have <div id="mapid"></div>
    – Falke Design
    Commented Mar 31, 2021 at 11:44
  • sorry ... my fault ... I worked on the HTML part and had not closed a <div> It works perfectly, I just need to find a way to delete the card when the user does not enter 14 digits. I tried this: if(isNaN(saisi) || saisi.length != 14){ document.getElementById('result').textContent = "Veuillez rentrer un numéro SIRET valable (14 chiffres)"; map.remove(); document.getElementById('sic').value = ' ';}
    – d3LTa7
    Commented Mar 31, 2021 at 12:05
  • In fact I have another problem. If the user does not enter 14 digits, I have my error message but the map remains on the previous search. In addition, if the user corrects his error and correctly enters 14 digits, the error message still appears. I have to do a hard refresh (ctrl + F5) for my script to work again
    – d3LTa7
    Commented Mar 31, 2021 at 13:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.