This is a Leaflet plugin for loading your spatialized data into leaflet based on leaflet-omnivore and Leaflet.FileLayer plugins. This plugin was made looking for a convenient and easy to use plugin for loading external spatial files to leaflet.

It currently supports:

• GeoJSON ( via JSON)
• JSON (Using the GeoJSON structure)
• CSV (via csv2geojson)
• GPX ( via togeojson)
• KML ( via togeojson)
• KMZ ( via zip.js + togeojson)
• WKT (via wellknown)
• TopoJSON (via topojson-client)
• Encoded Polylines ( via polyline)
• Shapefile ( via shpjs) (zipped or separate files)

npm install leaflet-better-filelayer

Checkout the Demo

Checkout the Demo with external button

Below gif show an example of loading a separated shapefile using drag and drop.

Note: The plugin only looks for .shp, .dbf, .shx, .prj with the same name.

As map option:

const map = L.map('map', { betterFileLayerControl: true })

Or like any control

L.control.betterFileLayer()
  .addTo(map);

// or

const control = new L.Control.BetterFileLayer();

control.addTo(map);

Go to Wiki page

If you are developing a web application and you want to use your own html button outside the map container, you can use the following code:

// Note: The input have to be type "file"
// Example: <input type="file" accept=".gpx,.kml,.geojson,.json" multiple />
const options = {
  button: document.getElementById('my-button'), // Your input HTML reference
}

const control = L.control.betterFileLayer(options)
  .addTo(map);

After that, the plugin will bind an "on change" event on this button, waiting for files.

You can see the example here

Note: The Drag and Drop event listener will bind it self automatically

If you made a component for this plugin, feel free to share, make a pull request!

I made a example using React, you can check in the react folder.

To handle conditional created input, you can tell the plugin that you will bind the input later.

Like this:

const options = {
    will_bind_button_later: true
}

const control = L.control.betterFileLayer(options)
    .addTo(map);

// Example using React
// ref = useRef();....
// <input ref={ref} ... />
control.bind_button(ref.current);

Install the development dependencies

npm install --save-dev

npm run build after any change and check changes.

Open index.html in your browser and start editing.

To run unity tests:

npm run test

• Gabriel Russo [email protected]

• Copyright (c) 2025, Gabriel Russo
• Copyright (c) 2014, Mapbox
• Copyright (c) 2012, Michael Bostock
• Copyright (c) 2012 Makina Corpus

See License for more details