webpackload.js

define([
    'mapbox-gl-supported'
 ], function(
    isMapboxGlSupported
 ) {
    // the function that will load the map code and initialize
    // the map, or if the map code has been loaded, just
    // initialize the map.
    var loadAndInitMap;

    // feature detection -- webGL detected.
    if(isMapboxGlSupported()) {
        // here is where we make the initialization dependent
        // on the loading of MapboxGL.
        loadAndInitMap = function() {
            require(['mapbox-gl'], function(initMap) {
                initMap();
            });
        };

        // once feature detection is complete, go ahead and start
        // loading the MapboxGL library in the background. The
        // inner initMap function is not called because we are
        // saving it for when the user clicks.
        require(['mapbox-gl'], function(initMap) {});
    } else {
        // feature detection -- webGL not detected.
        // here is where we make the initialization dependent
        // on the loading of Mapbox.js.
        loadAndInitMap = function() {
            require(['mapbox.js'], function(initMap) {
                initMap();
            });
        };

        // once feature detection is complete, go ahead and start
        // loading the Mapbox.js library in the background. The
        // inner initMap function is not called because we are
        // saving it for when the user clicks.
        require(['mapbox.js'], function(initMap) {});
    }

    // the user click will initialize the map, but wait until the 
    // correct library has been loaded.
    $(".map-container").click(loadAndInitMap);
});