Loads files locally (GeoJSON, KML, GPX) as layers using HTML5 File API
JavaScript HTML
Latest commit ef4f3ef Sep 28, 2016 @SBats SBats committed on GitHub Add new contributor to Readme.md



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.

Build Status


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.


    var map = L.map('map').fitWorld();
        // 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, .kml, and .gpx) ?
        formats: [


    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)



  • 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)


  • Load multiple files (thanks @jens-duttke)


  • 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


Makina Corpus


  • Mathieu Leplatre
  • Joey Baker http://byjoeybaker.com
  • CJ Cenizal
  • Jens-duttke
  • Jmuccigr
  • Matthew Mueller
  • George Silva
  • Simon Bats
  • Opoto