OL3 - QuadKey Source

Attempt to obtain tiles from non-Bing source using quadkey function. Returning 404 on http://tileserver.satmap.com/NL/11/12020211032.ipic for example.

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
<body>

<div id="map"></div>
<div>

<input id="swipe" type="range" style="width: 100%">
</div>
<div id="coords">
    <select id="baseMapLayer"></select>
    <div id="zoomLevel">Zoom level: </div>
    
</div>
</body>

CSS

html,body,#map { width:100%; height:100%; margin:0; }
#map {
    position: absolute;
    z-index: 5;
}
#coords{
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translate(-50%, 5px);
    background-color: rgba(238,238,238,.6);
    padding: 10px;
    color: #222;
    width: 350px;
    text-align: center;
}

JavaScript

var map=null;
var swipe = document.getElementById('swipe');
swipe.addEventListener('input', function() {
        //map.render();
        console.log("swipe");
      }, false);
// define the centre
var center = ol.proj.transform([4.5, 52],
    'EPSG:4326', 'EPSG:3857');

// DEFINE THE BASE LAYERS
// new MQ OSM layer
var mqLayer = new ol.layer.Tile({
    title: 'MapQuest OSM',
    type: 'base',
    visible: true,
    source: new ol.source.MapQuest({
        layer: 'osm'
    })
})

// Bing Maps
var sourceBingRoad = new ol.source.BingMaps({
    key: 'AtheSPyXDQQgpMhfsPsrCSWC2cOp_BZVB_Td7EBk5sAzONivB5tplhU4AY5P67SF',
    imagerySet: 'Road',
});

var bingMapsRoad = new ol.layer.Tile({
    source: sourceBingRoad,
    type: 'base',
    visible: false,
    title: 'Bings Maps Road'
});

var sourceBingAerial = new ol.source.BingMaps({
    key: 'AtheSPyXDQQgpMhfsPsrCSWC2cOp_BZVB_Td7EBk5sAzONivB5tplhU4AY5P67SF',
    imagerySet: 'AerialWithLabels',
});

var bingMapsAerial = new ol.layer.Tile({
    title: 'Bings Maps Aerial',
    type: 'base',
    visible: false,
    source: sourceBingAerial
});

/*********************/
/* Get QuadKey Layer */
/*********************/
var quadkey = function (x, y, z) {
    var quadKey = [];
    for (var i = z; i > 0; i--) {
        var digit = '0';
        var mask = 1 << (i - 1);
        if ((x & mask) != 0) {
            digit++;
        }
        if ((y & mask) != 0) {
            digit++;
            digit++;
        }
        quadKey.push(digit);
    }
    return quadKey.join('');
};

/*********************/
/* Transform Extent  */
/*********************/
function transform(extent) {
    return ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
}

// France
var franceextent = transform([-5.170, 41.222, 9.579, 51.096]);

var france = new ol.layer.Tile({
    type: 'base',
    title: 'France',
    sub: 'premium',
    visible: false,
    extent: franceextent,
    minZoom: 13,
    maxZoom: 16,
    source: new ol.source.XYZ({
       ...