leaflet-better-filelayer

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

Installation

For Leaflet 2.x

npm install leaflet-better-filelayer

For Leaflet 1.x

npm install leaflet-better-filelayer@1.0.1

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: Internally, the plugin groups .shp, .dbf, .shx and .prj with the same name.

Usage

import { BetterFileLayer } from "leaflet-better-filelayer";

const map = new Map('map');

const bfl = new BetterFileLayer();

map.addControl(bfl);

Documentation

For Leaflet 2.x

Go to Wiki page

For Leaflet 1.x

Go to Wiki page

And

Go to 1.0.1 tag

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 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 bfl = new 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

Development

Install the development dependencies

npm install --save-dev

Start Vite development mode

npm run dev

Open localhost:3000 in your browser and start editing index.html.

Test

To run unity tests:

npm run test

Linting & Code Style

npm run style && npm run lint

Contributors

• Gabriel Russo [e-mail]

License

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

See License for more details