Refresh Leaflet Map with another research

Question

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

Falke Design · Answer 1 · 2021-03-31T15:18:41.810

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/

edited Mar 31 '21 at 15:18

answered Mar 31 '21 at 10:10

Falke Design

10,635
3
15
30

ah yeah on the first load, the variable `map` is not defined. I updated the answer – Falke Design Mar 31 '21 at 11:32
always same error : Uncaught Error: Map container not found. – d3LTa7 Mar 31 '21 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 `
` – Falke Design Mar 31 '21 at 11:44
sorry ... my fault ... I worked on the HTML part and had not closed a
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 Mar 31 '21 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 Mar 31 '21 at 13:06
I updated the answer. Now both issues should be covered. Please accept the answer – Falke Design Mar 31 '21 at 13:18
Sorry but no ... I did check to copy exactly, I also check my HTML. For example when I enter 80982473300012 for the first time, I have the result with the map, but if I enter 809824 for example, I have the error message with an empty gray frame from Leaflet and if I reset 80982473300012 I still have the error message with this error message in the console: Uncaught Error: Map container is being reused by another instance – d3LTa7 Mar 31 '21 at 15:04
I updated the answer again. Thr problem was, if the map was already removed, and then `map.remove()` is called again, it throws the error. That the error message als don't disapear sometimes, because you replaced the text with `' '`, so it war a invisible char and then always `isNaN` or `length != 3` was not correct. The grey box can be removed with css `display: none` – Falke Design Mar 31 '21 at 15:21

Refresh Leaflet Map with another research

1 Answers1