Leaflet.BetterFileLayer

$3

!npm
!downloads
!license
!GitHub Workflow Status

---

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

``commandline
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.

!example

Usage

As map option:

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

Or like any control

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

// or

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

control.addTo(map);
`

Documentation

> Go to Wiki page

Typescript support

!event_types
!event_types
!event_types

$3

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:

`js
// Note: The button have to be type "file"
// Example:
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

$3

#### 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:

`ts
const options = {
will_bind_button_later: true
}

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

// Example using React
// ref = useRef();....
//
control.bind_button(ref.current);
`

Development

Install the development dependencies

`commandline
npm install --save-dev
`

npm run build after any change and check changes.

Open index.html in your browser and start editing.

$3

To run unity tests:

`commandline
npm run test
``

Authors

- Gabriel Russo

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