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