Loads local files (GeoJSON, JSON, GPX, KML) into the map using the HTML5 FileReader API, without server call !
FileReader
) and converted to GeoJSONCheck out the demo !
For GPX and KML files, it currently depends on Tom MacWright's togeojson.js.
In order to use this plugin in your app you can either:
npm i leaflet-filelayer
bower install git://github.com:makinacorpus/Leaflet.FileLayer.git
leaflet.filelayer.js
file in your app.In order to use this plugin, you need to have both leaflet
and togeojson
installed.
If you're using Leaflet < 1, you need to use the version 0.6.0
of this plugin. After that, Leaflet > 1 is required.
var map = L.map('map').fitWorld();
...
L.Control.fileLayerLoad({
// Allows you to use a customized version of L.geoJson.
// For example if you are using the Proj4Leaflet leaflet plugin,
// you can pass L.Proj.geoJson and load the files into the
// L.Proj.GeoJson instead of the L.geoJson.
layer: L.geoJson,
// See http://leafletjs.com/reference.html#geojson-options
layerOptions: {style: {color:'red'}},
// Add to map after loading (default: true) ?
addToMap: true,
// File size limit in kb (default: 1024) ?
fileSizeLimit: 1024,
// Restrict accepted file formats (default: .geojson, .json, .kml, and .gpx) ?
formats: [
'.geojson',
'.kml'
]
}).addTo(map);
Events:
var control = L.Control.fileLayerLoad();
control.loader.on('data:loaded', function (event) {
// event.layer gives you access to the layers you just uploaded!
// Add to map layer switcher
layerswitcher.addOverlay(event.layer, event.filename);
});
var control = L.Control.fileLayerLoad();
control.loader.on('data:error', function (error) {
// Do something usefull with the error!
console,error(error);
});
json
file as input (thanks kkdd)data:error
event (thanks @joeybaker)addToMap
option (thanks @joeybaker)( Did not release version 0.2 to prevent conflicts with Joey's fork. )
Contributions