Loading multiple geojson files

[chibrams]

var MountMartinTrail = new L.GeoJSON.AJAX("https://chibrams.github.io/Trails/MountMartinTrailf.geojson", {
    onEachFeature: onEachFeature,
    style: style
});
var MLoop = new L.GeoJSON.AJAX("chibrams.github.io/Trails/MLoopf.geojson ", {
    onEachFeature: onEachFeature,
    style: style
});

var drtrails = L.layerGroup([MountMartinTrail, MLoop]);

var opts = {
    map: {
        center: [46.08, -77.45],
        zoom: 12,
        fullscreenControl: false,
        resizerControl: true,
    },
    elevationControl: {
        url: drtrails,
        options: {
            theme: "lime-theme",
            collapsed: false,
            detached: true,
            summary: "multiline",
        },
    },
    layersControl: {
        options: {
            collapsed: false,
        },
    },
};

var map = new L.Map('map', opts.map);
var controlElevation = L.control.elevation(opts.elevationControl.options);
var controlLayer = L.control.layers(null, null, opts.layersControl.options);

controlElevation.addTo(map);
controlElevation.load(opts.elevationControl.url);

map.on('eledata_loaded', function(e) {
    if (!controlLayer._map) controlLayer.addTo(map);
    controlLayer.addOverlay(e.layer, e.name);
});

[Raruto]

Hi Chibrams,

At present this library does not support a LayerGroup as input, if you are interested in adding it, I advise you to inspect the source code and propose a pull.

Happy Coding, Raruto

[gegeweb]

Hi @chibrams

Have you take a look at this example?

That propably should works as you expected (not tested, but i'll probably soon for a project):

var opts = {
    map: {
        center: [46.08, -77.45],
        zoom: 12,
        fullscreenControl: false,
        resizerControl: true,
    },
    elevationControl: {
        tracks: {
        track_1: {
        url: "https://chibrams.github.io/Trails/MountMartinTrailf.geojson",
        },
        track_2: {
        url: "chibrams.github.io/Trails/MLoopf.geojson",
        },
    },
        options: {
            theme: "lime-theme",
            collapsed: false,
            detached: true,
            summary: "multiline",
        },
    },
    layersControl: {
        options: {
            collapsed: false,
        },
    },
};

[Raruto]

For those still interested, here it is a simple example: leaflet-elevation_geojson-group.html