CODEWITHSUNDEEP
javascripthtmlleafletelectron
Sky020
Sky020

Reputation: 47

How to prevent Leaflet.js from reloading Electron app?

I have set up an app using Electron. For the most part, all of my code is in the index.html file. The app takes some data from the user, and uses it to plot areas on a Leaflet map. The map is plotted onto a <div>

The Leaflet map can be drawn with the taken geolocation, but, when the areas are plotted, the app reloads, causing the data to be lost.

I have rearranged most of the javascript, to find any issues there. I have tried global and local variables.

    //Geoloaction for now using dev tools to spoof for test location.
    const geo = navigator.geolocation;
    let lat;
    let lon;
    let map;

    document.getElementById("geo").addEventListener("click", () => {
      geo.getCurrentPosition((position) => {
        lat = position.coords.latitude;
        lon = position.coords.longitude;
        document.getElementById('location').value = (lat + ', ' + lon);
        mapIt();
      }, error);
    });

    document.getElementById('submit').addEventListener("click", () => {
      let rad = document.getElementById('radius');
      let squa = document.getElementById('square');
      if (rad.checked) {
        radius();
      } else if (squa.checked) {
        square();
      }
    });

    //Mapping function using Leaflet
    function mapIt() {
      console.log("RUNNING");
      map = L.map('maps').setView([lat, lon], 8);
      const attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';
      const tileURL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      const tiles = L.tileLayer(tileURL, {
        attribution
      });
      tiles.addTo(map);
    }

    function error(error) {
      console.log(error.POSITION_UNAVAILABLE);
    }

At the end of either of these two functions, the app is caused to reload:

    function square() {
      //Some Calculations...

      let bounds = [
        [lat,lon],[lat,lon]
      ];
      L.rectangle(bounds, {
        color: "#ff7800",
        weight: 1
      }).addTo(map);
      map.fitBounds(bounds)
    }

    function radius() {
      //Some Calculations...

      L.circle([lat, lon], {
        radius: (km_R * 1000)
      }).addTo(map);
    }

There should be no need for the app to reload. Everything worked fine, until I added those last two functions. I have debugged, and the functions run until the end. No error messages are ejected.

Is this just an issue with an Electron App's format? Will it go away, after I build and package the App?

Upvotes: 1

Views: 266

Answers (1)

ghybs
ghybs

Reputation: 53185

Smells like you have an HTML <form> with a <button> or <input type="submit"/>, since you target an element with id "submit".

If that is the case, the HTML specified behaviour is to send the form data to the page indicated by the action attribute. If there no such indication, it sends the data to the current page, effectively reloading it.

See also javascript redirect not working anyway

The easy solution is simply to add event.preventDefault() at the start of your event listener.

Leaflet itself has no mean to reload your page.

For refererence for the case of a button: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

If your buttons are not for submitting form data to a server, be sure to set their type attribute to button. Otherwise they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document.

Upvotes: 1

Related Questions