I'm trying to toggle between geojson layers that were loaded using the filelayerload javascript. Right now I'm basically stuck on how to append the geojson layers to one variable once they have been loaded using filelayerload. My thought is by appending them to one variable ('overlayMaps' variable in the code below), I can just use L.controls.layer to set up the toggling. Here's my code so far:

        //Main map layer:
    var mainmap =L.tileLayer(
        'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
        attribution: '© '+mapLink+'. Tiles courtesy of '+mapquestLink+mapquestPic,
        maxZoom: 19,
        subdomains: '1234',

    var baseMaps = {
        "Base Layer": mainmap
    var overlayMaps = {

    L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>';

    //Loads external geojson file:
     var fileload = new L.Control.fileLayerLoad({
        fileSizeLimit: 5000,
        fitBounds: true, //MOVE THE CENTER OF THE SCREEN
        layerOptions: {
        onEachFeature: function(feature, layer) {
            layer.bindPopup( "Name: " + feature.properties.Name);


You need to add an event listener on your control loader with event "data:loaded" as shown in Leaflet.FileLayer home page Usage section .

Then in your callback function, use method addOverlay on your Layers Control to append your layer.

// Add the overlays to the Layers Control at the end of the file loading.
fileload.loader.on('data:loaded', function (e) {
    // Add to map layer switcher

    // Example from Leaflet.FileLayer to load the entire file content
    // as 1 single layer.
    layerswitcher.addOverlay(e.layer, e.filename);

Demo: http://jsfiddle.net/ve2huzxw/5/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.