In this map I'm attempting to do a couple things.
tiles load unreliably. They flicker in and out of view. What's going on here? SOLVED!
As you pan the map, scroll bars show up in the window (no big deal. just curious)
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Oblique Leaflet</title> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
| <script src="http://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> |
| 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]]]}; |
