Leaflet.FileLayer
Loads local files (GeoJSON, GPX, KML) into the map using the HTML5 FileReader API, without server call !
- A simple map control
- The user can browse a file locally
- It is read locally (
FileReader
) and converted to GeoJSON - And loaded as a layer eventually!
Check out the demo !
For GPX and KML files, it currently depends on Tom MacWright's togeojson.js.
Install
In order to use this plugin in your app you can either:
- install it via your favorite package manager:
npm i leaflet-filelayer
bower install git://github.com:makinacorpus/Leaflet.FileLayer.git
- download the repository and import the
leaflet.filelayer.js
file in your app.
Usage
var map = L.map('map').fitWorld();
...
L.Control.fileLayerLoad({
layer: L.geoJson,
layerOptions: {style: {color:'red'}},
addToMap: true,
fileSizeLimit: 1024,
formats: [
'.geojson',
'.kml'
]
}).addTo(map);
Events:
var control = L.Control.fileLayerLoad();
control.loader.on('data:loaded', function (e) {
layerswitcher.addOverlay(e.layer, e.filename);
});
Changelog
1.0.0
- Leaflet 1.1.0 compatibility (thanks @thorinii)
0.6.0
- Better plugin packaging and dependencies
- Adding bower support (thanks @george-silva)
- Adding support for custom geoJson layers (thanks @MuellerMatthew)
- Treating json files as geoJson (thanks @Jmuccigr)
0.5.0
- Load multiple files (thanks @jens-duttke)
0.4.0
- Support whitelist for file formats (thanks CJ Cenizal)
0.3.0
- Add
data:error
event (thanks @joeybaker) - Fix multiple uploads (thanks @joeybaker)
- Add
addToMap
option (thanks @joeybaker)
(* Did not release version 0.2 to prevent conflicts with Joey's fork. *)
0.1.0
Authors
Contributions
- Mathieu Leplatre
- Joey Baker http://byjoeybaker.com
- CJ Cenizal
- Jens-duttke
- Jmuccigr
- Matthew Mueller
- George Silva
- Simon Bats
- Opoto
- Lachlan Phillips