Skip to content

Instantly share code, notes, and snippets.

@gtallen1187

gtallen1187/modis_map.html

Created November 12, 2019 14:43
Show Gist options
  • Save gtallen1187/5f268f44de6976e724c0ebfe9ab2d049 to your computer and use it in GitHub Desktop.
Save gtallen1187/5f268f44de6976e724c0ebfe9ab2d049 to your computer and use it in GitHub Desktop.
Download ZIP
leaflet map for modis imagery
Raw
modis_map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<style>
body { margin:0; padding:0; }
body, table, tr, td, th, div, h1, h2, input { font-family: "Calibri", "Trebuchet MS", "Ubuntu", Serif; font-size: 11pt; }
#map { position:absolute; top:100px; left:100px; width:500px; height: 500px;} /* full size */
.ctl {
padding: 2px 10px 2px 10px;
background: white;
background: rgba(255,255,255,0.9);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
text-align: right;
}
.title {
font-size: 18pt;
font-weight: bold;
}
.src {
font-size: 10pt;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
var lyr = L.tileLayer('http://s3.amazonaws.com/tiles.telluslabs.com/composite/ndvi_monthly/20190101/{z}/{x}/{y}.png', {tms: true, opacity: 0.95, attribution: ""});
var map = L.map('map', {
center: [38.328963748, -98.3364022596],
zoom: 4,
minZoom: 1,
maxZoom: 15,
layers: [osm, lyr]
});
var basemaps = {"OpenStreetMap": osm}
var overlaymaps = {"Layer": lyr}
L.control.layers(basemaps, overlaymaps, {collapsed: false}).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment