Leaflet.BetterFileLayer

Load your spatialized files into Leaflet the way it should be.

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 DOMParser)
• KML ( via DOMParser)
• KMZ ( via DOMParser)
• WKT (via wellknown)
• TopoJSON (via topojson-client)
• Encoded Polylines ( via polyline)
• Shapefile ( via shpjs) (zipped or separate files)

Installation

npm install leaflet-better-filelayer

Demo

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.

Usage

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

Documentation

Go to Wiki page

Typescript support

Custom html button

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 button have to be type "file"
// Example: <input type="file" accept=".gpx,.kml,.geojson,.json" multiple />
const options = {
  button: document.getElementById('my-button'), // Your button 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

For Framework devs

Components

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.

Handling component creation

To handle conditional created input, you can tell the plugin that you will bind the button 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);

Development

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.

Test

To run unity tests:

npm run test

Authors

• Gabriel Russo [email protected]

Credits

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

See License for more details