tileGrid: new ol.tilegrid.WMTS({
    origin: [-4194304, 4194304],
    resolutions: [
        8192.0,
        4096.0,
        2048.0,
        1024.0,
        512.0,
        256.0
    ],
    matrixIds: [0, 1, 2, 3, 4, 5],
    tileSize: 512
})

    <!-- https://github.com/proj4js/proj4js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4-src.js"></script>

    <!-- https://github.com/kartena/Proj4Leaflet -->
    <script src="http://glovis.usgs.gov/next/js/leaflet_plugins/proj4leaflet_new.js"></script> 

    <div id="map" style="background: #000000;  height: 660px;"></div>

    <script type="text/javascript">
        $(document).ready(function () {
            var proj1 = new L.Proj.CRS(
                "EPSG:4326",
                "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs", {
                    origin: [-180, 90],
                    resolutions: [
                        0.5625,
                        0.28125,
                        0.140625,
                        0.0703125,
                        0.03515625,
                        0.017578125,
                        0.0087890625,
                        0.00439453125,
                        0.002197265625
                    ],
                    // Values are x and y here instead of lat and long elsewhere.
                    bounds: [
                       [-180, -90],
                       [180, 90]
                    ]
                }
            );
           
            var webCrs = L.extend({}, L.CRS, {
                code: 'EPSG:4326',
                projection: L.Projection.LonLat,
                transformation: new L.Transformation(1 / 360, 0.5, -1 / 360, 0.5),
                scale: function (zoom) {
                    return 512 * Math.pow(2, zoom);
                }
             });                 
           
            var wmsCrs = L.extend({}, L.CRS, {
                projection: L.Projection.SphericalMercator,
                transformation: new L.Transformation(1, 0, 1, 0),
                scale: function (zoom) {
                    return 512 * Math.pow(2, zoom);
                }
            }); 
           
            //NOTE :: We will need it to work with the map being in it's default projection
            var map = new L.Map('map', {
                inertia: false,
                boxZoom: true,
                worldCopyJump: true,
                zoomControl: false,
                doubleClickZoom: false,
                preferCanvas: true,
                unloadInvisibleTiles: false,
                updateWhenIdle: true,
                crs: L.CRS.EPSG3857 //This is the map default - which matches our config
            });
            
            L.control.scale({
                position: 'bottomright'
            }).addTo(map);

            var layerOptions = {
                layer: '',
                minZoom: 2,
                maxZoom: 20,
                tileSize: 256,
                subdomains: "abc",
                continuousWorld: true, // Prevent Leaflet from retrieving non-existent tiles on the borders.
                attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
            };

            map.addLayer(L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', layerOptions));
            map.setView(new L.LatLng(-36.4621, -79.6164), 12);

            
            var webCrs = L.extend({}, L.CRS, {
                projection: L.Projection.LonLat,
                transformation: new L.Transformation(1, 0, 1, 0),
                scale: function (zoom) {
                    return 512 * Math.pow(2, zoom);
               }
            });                
            
            //NOTE :: dds.cr.usgs.gov/gibs_test is an internal proxy that points to sit.gibs.earthdata.nasa.gov to simplify our firewall rules to sit.gibs.earthdata.nasa.gov
            var sceneBrowse = L.tileLayer('https://dds.cr.usgs.gov/gibs_test/wmts/epsg4326/std/ASTER_L1T_Radiance_Terrain_Corrected_v3_STD/default/2016-01-01T15:29:32Z/15.625m/{z}/{x}/{y}.png', {
                format: 'image/png',
                transparent: true,
                tileSize: 512,
                attribution: 'GIBS!!!',
                crs: webCrs//L.CRS.EPSG4326
            });
            
            sceneBrowse.on('tileload', function(event)
            {
                console.log('Tile ' + event.coords.z + '/' + event.coords.x + '/' + event.coords.y/* + ' - ' + event.tile.currentSrc*/);
            });
            
            map.addLayer(sceneBrowse);
            
            //Add a polygon to the map so we know we're looking within the granule location
            var geoJson = {type:"Polygon",coordinates:[[[-80.0854,-36.807],[-79.1354,-36.7959],[-79.1516,-36.1163],[-80.0934,-36.1271],[-80.0854,-36.807]]]};
            var layerStyle = {
                color: '#ff0000', 
                fillColor: '#ff0000', 
                fillOpacity: 0.1, 
                opacity: 1, 
                weight: 2
            };
            
            L.GeoJSON.geometryToLayer(geoJson).setStyle(layerStyle).addTo(map);
        });
    </script>
</body>