D3 Examples - Oblique Leaflet map

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Oblique Leaflet</title>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>
    <script src="https://leaflet-extras.github.io/leaflet-providers/leaflet-providers.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/aparshin/leaflet-boundary-canvas/src/boundarycanvas.js"></script>
    <script src="ky-buff.js"></script>
    
    <style>
        html, body, #map {
            height: 100%;
            margin: 0px;
        }
        body {
            perspective: 1200;
        }
        #map {
            overflow: visible;
            -webkit-transform: rotateX(-70deg) rotateZ(25deg);
            transform: rotateX(-70deg) rotateZ(25deg);
        }
        .leaflet-container {
            background: none;
        }
        
        .leaflet-layer:last-child {
            transform:translateZ(1px);
        }
​
        #map, #map * {
            -webkit-transform-style:preserve-3d;
            transform-style:preserve-3d;
        }
    </style>
</head>
​
<body>
    <div id="map"></div>
​
    <script type="text/javascript">
        var map = L.map('map', {
            zoomControl: false,
            scrollWheelZoom: false,
            doubleClickZoom: false,
            attributionControl: false
            })
            .setView([37.478128, -86.011963], 8);
            var getPxBounds = map.getPixelBounds;
        
        map.getPixelBounds = function () {
            var bounds = getPxBounds.call(this);
            // ... extend the bounds
            bounds.min.x=bounds.min.x-2000;
            bounds.min.y=bounds.min.y-2000;
            bounds.max.x=bounds.max.x+2000;
            bounds.max.y=bounds.max.y+2000;
            return bounds;
        };
​
        var base = L.tileLayer.provider('CartoDB.DarkMatterNoLabels').addTo(map); 
        
        var withBoundary = function(providerName) {
            return L.TileLayer.BoundaryCanvas.createFromLayer(
                L.tileLayer.provider(providerName),
                {boundary: geom
                }
            )
        }
        
        var night = withBoundary('NASAGIBS.ViirsEarthAtNight2012').addTo(map);
       
    </script>
</body>
</html>
    
Oblique Leaflet map

What

Issues

Next step
