block by maptastik 58a19354dc93469e4178

Oblique Leaflet map

Full Screen

What

In this map I’m attempting to do a couple things.

Issues

Next step

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Oblique Leaflet</title>
    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src="//leaflet-extras.github.io/leaflet-providers/leaflet-providers.js"></script>
    <script src="https://rawgit.com/aparshin/leaflet-boundary-canvas/master/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>

ky-buff.js

var geom = {"type":"Polygon","coordinates":[[[-89.59205361012096,36.84793230786073],[-89.4747672857559,37.22035098538903],[-89.1167381858876,37.492628475765834],[-88.81268529379848,37.492504363053456],[-88.09930345138203,38.173588560967524],[-87.18969440137175,38.17835845381677],[-86.43646121362441,38.48221066013749],[-86.1515643083757,38.427702538949795],[-85.63973101316343,38.972338094954914],[-85.2609091180092,39.0328759104351],[-84.78896186331244,39.42970160019468],[-84.2369079659786,39.35232257123654],[-83.94635853293339,39.06681994822743],[-83.26889513637776,38.93142574949135],[-82.61644638421556,38.9380253447026],[-82.29956847438093,38.62475477764745],[-82.22105338867576,38.184585796348166],[-81.59561365304774,37.527684238868964],[-81.72318021162971,37.310887116969624],[-82.3811992053336,36.942132405030684],[-82.95000030874304,36.49298932315166],[-83.70911908492036,36.29433757687619],[-85.44891448249157,36.3282303256218],[-87.73335090942413,36.35364910445156],[-88.0452927409211,36.20653227519772],[-89.52986623977299,36.20822616576146],[-89.92370890381109,36.58431128389706],[-89.59205361012096,36.84793230786073]]]};