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.
var map = L.map('map').fitWorld();
...
L.Control.fileLayerLoad({
// 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, .kml, and .gpx) ?
formats: [
'.geojson',
'.kml'
]
}).addTo(map);
Events:
var control = L.Control.fileLayerLoad();
control.loader.on('data:loaded', function (e) {
// Add to map layer switcher
layerswitcher.addOverlay(e.layer, e.filename);
});
- data:error (error)
- Support whitelist for file formats (thanks CJ Cenizal)
- 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. *)
- Initial working version
Contributions
- Joey Baker http://byjoeybaker.com