makinacorpus / leaflet.filelayer

Loads files locally (GeoJSON, KML, GPX) as layers using HTML5 File API

Leaflet.FileLayer

Loads local files (GeoJSON, JSON, GPX, KML) into the map using the HTML5 FileReader API, 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!

Check out the demo !

For GPX and KML files, it currently depends on Tom MacWright's togeojson.js.

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

    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)

    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)

    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

Contributions

• Mathieu Leplatre
• Joey Baker http://byjoeybaker.com
• CJ Cenizal
• Jens-duttke
• Jmuccigr
• Matthew Mueller
• George Silva
• Simon Bats
• Opoto
• Lachlan Phillips
• kkdd

leaflet.filelayer's Issues

GPX files can contain route and track

The gpx format can contain a route and a track (rte and trk element) at the same time. Currently this is displayed with the same colour. Maybe use two colours and add a legend (or also called map key)

See also the wikipedia page with an example of how it probably should look like ;)

http://en.wikipedia.org/wiki/GPS_eXchange_Format

How to remove the FileLAyer control on map?

I tried to remove the created fileLayer control by using fileLayer.removeFrom(map), but it doesn't work! Any idea?

waypoint name

When loading gpx file, waypoints just appear as circle.
Can it be possible that 'waypoint name' appears?

Make Leaflet.FileLayer directly compatible with Leaflet.Draw and provide simple example.

Thanks for this amazing component, its fast and I love it, however I have spent many hours trying to get draw to edit my GPX uploads with no success yet. Close but no success. My use case is that my field techs are uploading a GPS track (GPX LineString) which is actually a wildfire boundary so it needs to be edited and closed into a polygon in the mapplication. I have tried a multitude of approaches including loading in turfJS and using custom Turf Script to convert the GeoJson LineString to a bonifide Polygon, but then I am unable to load the result into draw for editing. Would be so sweet to just have these two awesome components work together out of the box somehow.

release 1.0.0 or 1.1.0?

Hello,

In https://github.com/makinacorpus/Leaflet.FileLayer,

Changelog
1.0.0
Leaflet 1.1.0 compatibility (thanks @thorinii)

but in https://github.com/makinacorpus/Leaflet.FileLayer/releases

Latest release
1.1.0
@SBats SBats released this on 4 Aug · 3 commits to master since this release
Fixes
Leaflet 1.1.0 compatibility 🎉 (Fix #45 and #46) Thanks to @thorinii!

Event supporting loading several files at once

As loadMultiple is capable of loading several files at once - we need support it in events.

It could be separate events pair 'data:multiple:start'/'data:multiple:end'.

Sample usage: I want add loaded files to L.Layers layerchooser as layerGroup.
Also in this case I may prefer to forbid map.fitBounds().

Add drag and drop support

Suggestion and example already implemented by @calvinmetcalf in leaflet.workspace

https://twitter.com/CWMma/status/314445280412069888

data:loaded could return the original data too

On line 51,

the data:loaded event could also return the original data, so it can be further processed/stored in the app

this.fire('data:loaded', 
    {
        layer: layer, 
        filename: file.name, 
        format: ext, 
        result:e.target.result
    }
);

Add shapefile support

See https://github.com/calvinmetcalf/leaflet.shapefile

Existing polygon not remove if load a new one

I have seen a problem that if i load a KML file and display polygon on map using this plugin, and when drag and drop a new KML file or load from button, previous polygon still remain on map.

KML styling

togeojson library converts KML styles to geojson simplestyle (spec).
It is not explicitly mentioned in docs, but it's just mapbox standard.
You can see it in code, e.g. search for 'stroke': (https://github.com/mapbox/togeojson/blob/master/togeojson.js#L267 etc).

It would be great if FileLayer provide corresponding function for styling.
Sample: https://github.com/mapbox/mapbox.js/blob/publisher-production/src/simplestyle.js

File size limit

Input file size limit is now 1024kb
In the leaflet.filelayer.js file, I change this value(1024) to 9999, but limit didn't change.
Is it impossible to change upper limit of gpx(kml) file size?

Not running with Leaflet v1.1.0

This plugin is not running with new Leaflet v1.1.0
Besides some warning on the JS-console it creates a Type Error "L.Util.fileLoader is not a function"

Would be great if somebody is able to fix it.

Remove added layer

Is there a way to remove the added layer, without removing other polygons and markers?

togeojson deprecated

Hi,
please update the togeojson dependency:

npm WARN deprecated [email protected]: This module has moved: please install @mapbox/togeojson instead

thanks for the great work. Thanks!

Load KML without file dialog

I want to dynamically create HTML files that automatically load a specific KML file....without user interaction.

How/Where would I do that in the code? For example, if I use the 'well known' KML loading HTML, what do I need to change to auto-load my custom KML file from a local resource?

<!DOCTYPE html>
<html>
<head>
    <title>LeafletFileLayer Plugin</title>
    <meta charset="utf-8" />
    <link 
        rel="stylesheet" 
        href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
    />
    <link 
        rel="stylesheet" 
        href="http://makinacorpus.github.io/Leaflet.FileLayer/Font-Awesome/css/font-awesome.min.css"
    />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script
        src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
    </script>
    <script
        src="http://makinacorpus.github.io/Leaflet.FileLayer/leaflet.filelayer.js">
    </script>
    <script
        src="http://makinacorpus.github.io/Leaflet.FileLayer/togeojson/togeojson.js">
    </script>

    <script>
        var map = L.map('map').setView([-41.2858, 174.78682], 14);
        mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            }).addTo(map);

        var style = {color:'red', opacity: 1.0, fillOpacity: 1.0, weight: 2, clickable: false};
        L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>';
        L.Control.fileLayerLoad({
            fitBounds: true,
            layerOptions: {style: style,
                           pointToLayer: function (data, latlng) {
                              return L.circleMarker(latlng, {style: style});
                           }},
        }).addTo(map);

    </script>
</body>
</html>

FYI: forked and enhanced

Just as an FYI, I need additional functionality, so I forked. The changelog is here: https://github.com/joeybaker/Leaflet.FileLayer#changelog

Cannot read property 'editing' of undefined

Hello,
I'm getting an error when i try to load file second time
Cannot read property 'editing' of undefined

What could it possibly be ?

Multi file loader and integrated solution .kmz

Great plugin!!! it would be even better if you collaborate with the developer of leaflet .kmz to create an integrated solution.

Error when loading file on Internet Explorer

Hi.

Internet Explorer seems to have a problem with the loader. On load, the "file" variable is null. I only pauses the page when the console is open and the file finally loads. Not a major issue actually but something worth to mention.
Works great on other browsers but I have to be IE9 and higher compatible. I am currently using IE11 on Windows 8.1.

Thanks for the good work :-)

interactivity

great little app! Is there any way to add interactivity, something like click to view the attributes of the GeoJson?

Leaflet.FileLayer (demo) doesn't work for geojson files

Hello,
I have realized that the demo, http://makinacorpus.github.io/Leaflet.FileLayer/index.html, doesn't work for geojson files, but for kml files.
ps. I would appreciate it if you could put some sample files in the Leaflet.FileLayer directory.

Editing loaded shapes with leaflet draw controls

Hi, great piece of code, thanks!

When I load up a KML, I can view them on the map no problem. However the shapes are not editable with the leaflet draw controls.

Any idea how I can get this to work?

Thanks again.

bower support

Hi guys,

Do we have any plans to have bower support here?

Demo reverses lat longs?

Just tried to upload a geojson file to the demo. Uploads fine, but my London locations seem to have been plotted off the Seychelles. I believe the lat/longs are being reversed.

Option - show filename in tool tip

Forget the following - I worked out to do this using 'data:loaded'

If you load a lot of files it can be difficult to know which line is which. So an option to show the filename in the tooltip would be useful. Using the sticky option:
.bindTooltip('', {sticky: true})
the tooltip will appear anywhere on the line.

Demo broken

In Firefox 57 I get ReferenceError: assignment to undeclared variable control index.js:21:19 when I load the demo

Accessing LatLngs from KML-derived layer

I have an example KML file uploading and being displayed. Very cool.
But I'm wondering how to reference the lat/lngs in the returned layer object..

uploadControl.loader.on('data:loaded', function (event) {
   // event.layer gives you access to the layers you just uploaded!
  ...

Looking at the layer properties I can't see any means to reference the lat/lngs.

pc only？

It can only be imported on the computer. Mobile devices can't be used.Can you edit and export KML after importing it?

Incompatibility with Leaflet 0.6

Looks like there's an infinite loop at plugin initialization.

Start from demo and upgrade to Leaflet 0.6 to reproduce.

fileLayerLoad() returns undefined property 'loader'

I am getting errors that I cannot read the 'on' property of undefined.
Therefore, in the example below (copied from the Readme's event example), control.loader is undefined.

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

kml show image in description (displaying an image from the local disk)

Is it possible to display an image from the local disk after loading a local KML file ( image link in KML description)

Permit Load RasterFiles

Hello,

I suggest adding support for raster layers, for example:

tiff, gdal and geotiff

Inherit from L.Evented instead of L.Mixin.Events for custom events

As stated in console L.Mixin.Events is now deprecated and will be removed and any custom event should instead inherit from L.Evented.

L.Control.fileLayerLoad is not a function

I am getting this error when i use it with create-react-app:
TypeError: leaflet__WEBPACK_IMPORTED_MODULE_3___default.a.Control.fileLayerLoad is not a function
I tried different togeojson packages but it doesn't make any difference.

leaflet 1.0

Will the FileLayer plugin work with leaflet 1.0?

FileLayer with Angular4

Hello,

I'm having trouble using the FileLayer extension with my angular4 application.

I got this error leaflet__.Control.fileLayerLoad is not a function.

The script leaflet.filelayer.js, is well executed in my project. I tried to console.log the L object a the end of the script and the propertie FileLayer is well added to the the L object.
But when I try to use it in a component of my application, I still have the same error leaflet__.Control.fileLayerLoad is not a function. When I console.log L in my component, the propertie FileLayer is not present anymore. I also try to log window.L... same behaviour.

Here is my code:

in leaflet.filelayer.js:

    L.Control.FileLayerLoad = FileLayerLoad;
     L.Control.fileLayerLoad = function(options) {
       return new L.Control.FileLayerLoad(options);
     };
   }, window);

   console.log(L);

in my app component:

import { Component, Input, OnInit,
![from_component](https://user-images.githubusercontent.com/15265745/43597849-8a799d8c-9683-11e8-8142-a25fc1e35910.png)
 } from "@angular/core";
import { MapService } from "./map.service";
import { Map } from "leaflet";
import * as L from "leaflet";

@Component({
  selector: "pnx-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.scss"],
  providers: [MapService]
})
export class MapComponent implements OnInit {
  @Input() editionOptions: any;
  public map: Map;
  constructor(public mapService: MapService) {
  }
  ngOnInit() {
    this.mapService.initialize();
    this.map = this.mapService.map;
    console.log(L);

  }
}

I'm using leaflet 1.2, Angular 4 and LeafletFileLayer 1.2.0.

Thanks for your help.

Handle more GPX data

On one of my project, I'm trying to load a GPX file with "extra" gpx data, like :

• "time" at the point : http://www.topografix.com/gpx_manual.asp#time
• "pdop" : http://www.topografix.com/gpx_manual.asp#pdop
• "course" : http://www.topografix.com/gpx_manual.asp#course

Unfortunately, when loading the GPX file, that data seems lost because the GeoJSON format doesn't handle it.
Is there any way to retrieve that data ? Maybe the GPX parser that is used doesn't support that extra data but it could be kept anyway ?

Here is a GPX sample file with that extra data : http://wilkins.fr/gpx-sample/bangalore.gpx

Willing to help. Thanks.

Add MapBox's omnivore support

Document / refactor `loadData()`

The feature introduced by @opoto in #34 is not documented in the README. Maybe it could be useful to users like @kkdd to implement Gzip loading (#52)

Plus I believe we could probably share code between load() (load file) and loadData().

Control style of lines and placemarks markers

It seems that Leaflet.FileLayer is what I need to load a local KML file to my map.

My KML file contains a LineString and Placemarks.
When I load this KML file using the demo, the LineString and Placemarks are the same color (circleMarker for Placemarks)
I'd like to set a color (style) for the LineString and use (icon) Markers for the Placemarks.
Also need to make the markers clickable and show the marker description in a popup.

Is this possible ? (an example is highly appreciated !)

I'm pretty new to Leaflet :-)

Regards,

Robertico

Leaflet demo using GeoJson

Hi,

Could you please tell me if it is normal that the demo http://makinacorpus.github.io/Leaflet.FileLayer/ (shows an empty map) doesn't work or is there a problem with it?

Thank you in advance.

Declaring the local file

Where do I declare which file to load as a layer?
So I don't see a part of code in the usage where I can declare that I want to display this and this .geojson as a map layer.. Can somebody help?

Not working on mobile?

Although my mobile browsers support the FileReader API (checked with demo at https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL), the Leaflet.FileLayer demo does not work on my mobile. To reproduce:

1. open http://makinacorpus.github.io/Leaflet.FileLayer/ on Firefox for Android (48.0) of Chrome for Android (52.x)
2. click filelayer control and pick a gpx file -> file picker closes but nothing is diplayed on the map. No error message.

Support KMZ

Have you looked into how KMZ files could be supported? Given the nature of KMZ, I'm guessing it would just be a matter of getting to the archived .kml file zipped up inside... this looks promising as a starting point: http://gildas-lormeau.github.io/zip.js/

I may fork and implement this anyway, but wanted to see if it was on your roadmap.

How to use the points which come from the leaflet file layer plugin?

How to use the points which come from the leaflet file layer plugin?

I am using leaflet file layer plugin.I have added a kml file which includes some points. I want to do sth by using these points. But I don't know if the plugin saves this data or not. How can I use these points?

CDATA section ignored in KML description

When I load a KML file the KML description is ignored when it's inside a CDATA section.

This works just fine,

      <description>
           Here is some text
      </description>

but not this one;

      <description>
        <![CDATA[
             Here is some text
        ]]>
      </description>

It seems an old issue in togeojson.js and should be fixed mapbox/togeojson#42
Using the latest togeojson.js file doesn't solved my problem.

Is this a leaflet.filelayer issue or togeojson.js ?

Regards,

Robertico

Seeking advice: How can I activate this control without using the built in button?

I have a complex form that needs to be filled out (Metadata about the upload) before I can allow the upload of the GPX, I would like my own form elements to trigger the opening of the upload dialog, do I have to hide the button and push it programatically or is there an easier way? Thanks again!

Load different layers with random colors

I have a visualization problem when an user try to load more than 1 layer falling in the same location.
As per actual configuration in my web page I'm not able to assign different colors respect to layers loaded.

Is there any way to change color of layer during the loading??

E.g.

1. First layer loaded -> green
2. Second Layer loaded -> red
3. Third Layer loaded -> blue
4. Fourth Layer loaded -> any random color

Thanks for your answers

Not working in safari iOS 12 developer preview 1

Hi,
The button is not responding. I will try with safari technology preview 58 on my desktop to check the errors.