Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/makinacorpus/Leaflet.FileLayer
Loads files locally (GeoJSON, KML, GPX) as layers using HTML5 File API
https://github.com/makinacorpus/Leaflet.FileLayer
javascript leaflet
Last synced: 3 months ago
JSON representation
Loads files locally (GeoJSON, KML, GPX) as layers using HTML5 File API
- Host: GitHub
- URL: https://github.com/makinacorpus/Leaflet.FileLayer
- Owner: makinacorpus
- License: mit
- Created: 2013-03-19T16:11:34.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2024-01-15T15:27:34.000Z (about 1 year ago)
- Last Synced: 2024-04-23T10:34:19.770Z (9 months ago)
- Topics: javascript, leaflet
- Language: JavaScript
- Homepage: http://makinacorpus.github.io/Leaflet.FileLayer/
- Size: 1.54 MB
- Stars: 263
- Watchers: 41
- Forks: 95
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- project-awesome - makinacorpus/Leaflet.FileLayer - Loads files locally (GeoJSON, KML, GPX) as layers using HTML5 File API (JavaScript)
README
Leaflet.FileLayer
=================
Loads local files (GeoJSON, JSON, GPX, KML) into the map using the [HTML5 FileReader API](http://caniuse.com/filereader), **without server call** !
* A simple map control
* The user can browse a file locally
* It is read locally (``FileReader``) and converted to GeoJSON
* And loaded as a layer eventually!
For GPX and KML files, it currently depends on [Tom MacWright's togeojson.js](https://github.com/tmcw/togeojson).
Install
-----
In order to use this plugin in your app you can either:
* install it via your favorite package manager:
* `npm i leaflet-filelayer`
* `bower install git://github.com:makinacorpus/Leaflet.FileLayer.git`
* download the repository and import the `leaflet.filelayer.js` file in your app.
Dependencies and compatibilities
-----
In order to use this plugin, you need to have both `leaflet` and `togeojson` installed.
If you're using Leaflet < 1, you need to use the version `0.6.0` of this plugin. After that, Leaflet > 1 is required.
Usage
-----
```javascript
var map = L.map('map').fitWorld();
...
L.Control.fileLayerLoad({
// Allows you to use a customized version of L.geoJson.
// For example if you are using the Proj4Leaflet leaflet plugin,
// you can pass L.Proj.geoJson and load the files into the
// L.Proj.GeoJson instead of the L.geoJson.
layer: L.geoJson,
// See http://leafletjs.com/reference.html#geojson-options
layerOptions: {style: {color:'red'}},
// Add to map after loading (default: true) ?
addToMap: true,
// File size limit in kb (default: 1024) ?
fileSizeLimit: 1024,
// Restrict accepted file formats (default: .geojson, .json, .kml, and .gpx) ?
formats: [
'.geojson',
'.kml'
]
}).addTo(map);
```
Events:
* **data:loaded** (event)
```javascript
var control = L.Control.fileLayerLoad();
control.loader.on('data:loaded', function (event) {
// event.layer gives you access to the layers you just uploaded!
// Add to map layer switcher
layerswitcher.addOverlay(event.layer, event.filename);
});
```
* **data:error** (error)
```javascript
var control = L.Control.fileLayerLoad();
control.loader.on('data:error', function (error) {
// Do something usefull with the error!
console,error(error);
});
```
Changelog
---------
### 1.2.0 ###
* Leaflet 1.2.0 compatibility
* Accept `json` file as input (thanks kkdd)
### 1.1.0 ###
* Leaflet 1.1.0 compatibility (thanks @thorinii)
### 0.6.0 ###
* Better plugin packaging and dependencies
* Adding bower support (thanks @george-silva)
* Adding support for custom geoJson layers (thanks @MuellerMatthew)
* Treating json files as geoJson (thanks @Jmuccigr)
### 0.5.0 ###
* Load multiple files (thanks @jens-duttke)
### 0.4.0 ###
* Support whitelist for file formats (thanks CJ Cenizal)
### 0.3.0 ###
* Add `data:error` event (thanks @joeybaker)
* Fix multiple uploads (thanks @joeybaker)
* Add `addToMap` option (thanks @joeybaker)
(* Did not release version 0.2 to prevent conflicts with Joey's fork. *)
### 0.1.0 ###
* Initial working version
Authors
-------
[](http://makinacorpus.com)
Contributions
* Mathieu Leplatre
* Joey Baker http://byjoeybaker.com
* CJ Cenizal
* Jens-duttke
* Jmuccigr
* Matthew Mueller
* George Silva
* Simon Bats
* Opoto
* Lachlan Phillips
* kkdd