1

I am aware that I can use leafet ajax to add an external geojson to a leaflet map like such...

var geojsonLayer = new L.GeoJSON.AJAX('c:/data/map/sample.geojson');       
geojsonLayer.addTo(map);

How instead can I collect the external geojson path from the user and pass to the L.GeoJSON.AJAX() argument?

I can use <input type="file"/> (or similar) to collect path from user. But how do I extend so that the user supplies the path such that L.GeoJSON.AJAX('../some/path/provided/by/user/geojson.geojson')

Working codepen.

EDIT: Working Solution

HTML

<li>
    <input id="upload" type="file"/>
    <a href="" data-toggle="collapse" data-target=".navbar-collapse.in" id="upload_link">                           
    <i class="fa fa-upload"></i>&nbsp;&nbsp;Import Geojson</a>
</li>

CSS

#upload_link{
    text-decoration:none;
}
#upload{
    display:none
}

JS

$(function(){
$("#upload_link").on('click', function(e){
    e.preventDefault();
    $("#upload:hidden").trigger('click');
});
});

document.getElementById('upload').addEventListener("change", function (evt) {
  var file = evt.target.files[0], // Read first file for this example.
      reader = new FileReader();

  reader.onload = function (e) {
    var fileText = e.target.result,
        fileData = JSON.parse(fileText),
        group = L.geoJson(fileData).addTo(map);

    map.fitBounds(group.getBounds());
  }

  reader.readAsText(file);
});
2

Your "working" Pen has unassigned qom variable, and L.GeoJSON.AJAX('#loadButton') is definitely not going to work, as '#loadButton' URL will not provide a valid JSON data.

The thing you must understand is that AJAX is made to retrieve network resources. Until some point it was possible to use it to read local data (on your file system), only if the page was open from your file system as well. But Chrome now blocks even that. Firefox may still allow it.

Now if you want to let the user load his/her own local file, you should use instead HTML5 File API. You will find plenty resources on the net for that, e.g. https://www.html5rocks.com/en/tutorials/file/dndfiles/

When the file input changes, you retrieve the file and feed it into a FileReader (readAsText). Then parse as JSON, and finally feed the JSON object to L.geoJSON factory. No need for Leaflet GeoJSON AJAX plugin.

<input id="fileInput" type="file"/>
document.getElementById("fileInput").addEventListener("change", function (evt) {
  var file = evt.target.files[0], // Read first file for this example.
      reader = new FileReader();

  reader.onload = function (e) {
    var fileText = e.target.result,
        fileData = JSON.parse(fileText),
        group = L.geoJSON(fileData).addTo(map);

    map.fitBounds(group.getBounds());
  }

  reader.readAsText(file);
});

A "working" pen: http://codepen.io/anon/pen/RppzvO

  • This worked perfectly. Indeed I was headed in the wrong direction. Thank you for replying and setting me straight. In the end I implemented for a bootstrap drop-down link. For reference I have provided the working parts in an EDIT on the original question (above). – wtgeographer Mar 11 '17 at 22:07

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.