Load spatialized files into leaflet using the HTML FileReader API
npm install leaflet-better-filelayer!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)
``commandline`
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:
`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);
`
!event_types
!event_types
!event_types
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
#### 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);
`
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.
To run unity tests:
`commandline``
npm run test
- Gabriel Russo
- Copyright (c) 2025, Gabriel Russo
- Copyright (c) 2014, Mapbox
- Copyright (c) 2012, Michael Bostock
- Copyright (c) 2012 Makina Corpus
See License for more details