I want to use the following Leaflet function:

# Generated using folium

<!DOCTYPE html>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

            L_NO_TOUCH = false;
            L_DISABLE_3D = false;


    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet"
    <link rel="stylesheet"
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>

    <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
                #map_66b1b7a41888486489d7071f3813b568 {
                    position: [33.220439, 35.808097];
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;


    <link rel="stylesheet"
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.66.2/L.Control.Locate.min.js"></script>

<div class="folium-map" id="map_66b1b7a41888486489d7071f3813b568"></div>


            var map_66b1b7a41888486489d7071f3813b568 = L.map(
                    center: [0, 0],
                    crs: L.CRS.EPSG3857,
                    zoom: 1,
                    zoomControl: true,
                    preferCanvas: false,

            var tile_layer_0a32d276fd2b4f6283661e69935b3fde = L.tileLayer(
                {"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}

            var locate_control_49017e7509714376802af8f77cb2b0e8 = L.control.locate(
                {"drawMarker": true, "showCompass": true}
        # Maybe a clickon will be set here that will write the geolocation to a json local file or something like that.


I want that the location found when this function is activated will be saved, maybe with AJAX or to JSON.

JSON file would be ideal since I want to work with the data in python as well.

I'm kinda new to JavaScript so my knowledge on this click on works is limited (I mostly work with Python).

  • 1
    Save to JSON variable? Save JSON to local file? Save to JSON server file? Save JSON to server DB?
    – TomazicM
    Mar 14 '20 at 16:03
  • @TomazicM edited Mar 14 '20 at 16:13
  • 1
    JSON file where? Local file or on server? Please be clear in specifying your requirements.
    – TomazicM
    Mar 14 '20 at 16:33
  • I meant a local file on working directory would be perfectly fine Mar 14 '20 at 17:22

Upon clicking L.control.locate button, circle marker is drawn at the current location when location is found. One possible approach to save location to file is that upon clicking on this marker, it's location is saved (downloaded) as text file.

But to catch marker click event, marker instance is needed. It's available only as internal _marker property of locate control. Another problem is that this internal marker is created only after location is found, so there is no way to access it before to attach click event function to it.

Solution is to catch locationfound event and only after some delay attach click event to created marker. For some strange reason, marker click event is fired twice in Chrome browser (and Chrome base browsers), so this has to be taken into account.

Download/save of marker location is done with one of the millions of solution that can be found on Stackoverflow.

Code could then look something like this:

lc = L.control.locate({
  "drawMarker": true, "showCompass": true

var cnt;
map.on('locationfound', function () {
  setTimeout(function() {
    cnt = 0;
    lc._marker.on('mousedown', function (evt) {
      if (cnt > 1) {
        cnt = 0;
      saveAsLocalFile(JSON.stringify(evt.latlng), 'location.txt', 'text/plain;charset=utf-8');
  }, 100);

function saveAsLocalFile(data, filename, type) {
  var file = new Blob([data], {type: type});
  if (window.navigator.msSaveOrOpenBlob) // IE10+
    window.navigator.msSaveOrOpenBlob(file, filename);
  else { // Others
    var a = document.createElement("a");
    var url = URL.createObjectURL(file);
    a.href = url;
    a.download = filename;
    setTimeout(function() {
    }, 0); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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