Skip to content

Instantly share code, notes, and snippets.

@maptastik maptastik/README.md
Last active Aug 29, 2015

Embed
What would you like to do?
Oblique Leaflet map
<!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]]]};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.