$(document).ready(() => {
    console.log('Initializing Canopy...');

    // Markers All/None
    exists('.leaflet-control-layers-overlays', () => {
        $('.leaflet-control-layers-overlays').prepend('<label><div><a href="#" id="toggleAllMarkers">All</a><span>&nbsp;|&nbsp;</span><a href="#" id="toggleNoneMarkers">None</a></div></label><label><hr/></label>');

        const $markers = $('.leaflet-control-layers-selector');
        $('#toggleAllMarkers').on('click', () => {
            $markers.prop('checked', false);
            $markers.click();
        });
        $('#toggleNoneMarkers').on('click', () => {
            $markers.prop('checked', true);
            $markers.click();
        });
    });

});

function exists(selector, callback) {
    if ($(selector).length) {
        callback();
    } else {
        setTimeout(() => {
            exists(selector, callback);
        }, 500);
    }
}