-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (115 loc) · 13.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="d3-tip/d3-tip.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link href="d3-tip/d3-tip.css" media="all" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="landat.css" />
<title>LanDAT Mapviewer</title>
<meta name="description" content="The LanDAT viewer provides a way to spatially explore data created by the LanDAT project.">
<meta property="og:url" content="https://landat.org/maps">
<meta property="og:title" content="LanDAT map viewer">
<meta property="og:description" content="The LanDAT viewer provides a way to spatially explore data created by the LanDAT project.">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="LanDAT map viewer">
<meta name="twitter:description" content="The LanDAT viewer provides a way to spatially explore data created by the LanDAT project.">
<meta name="twitter:image" content="https://landat.org/maps/imgs/landat-logo-apple-touch-144x144.png">
<meta name="twitter:image:alt" content="Logo of the LanDAT project">
<link rel="shortcut icon" href="imgs/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="apple-touch-icon-precomposed" href="imgs/landat-logo-apple-touch-144x144.png" sizes="144x144">
<link rel="apple-touch-icon-precomposed" href="imgs/landat-logo-apple-touch-114x114.png" sizes="114x114">
<link rel="apple-touch-icon-precomposed" href="imgs/landat-logo-apple-touch.png">
<link rel="apple-touch-icon-precomposed" href="imgs/landat-logo-apple-touch-72x72.png" sizes="72x72">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="/maps">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-97594712-2', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="wrapper" class="mobile-menu-hidden panel-active">
<div id="map-wrapper" class="layers-active">
<div class="mobile-header"><div class="logo-mobile"><a href="https://landat.org" target="_blank"><img src="imgs/landat_logo_blue_mobile.png" alt="Logo for the LanDAT project" title="Logo for the LanDAT project"></a></div><div class="mobile-map-menu-wrapper"><div class="mobile-map-menu-btn-wrapper"><button id="mobile-clear-map-button" class="mobile-map-menu-button"><img src="imgs/trash-can-icon.png" alt="Clear the map" title="Clear Map"></button></div><div class="mobile-map-menu-btn-wrapper"><button id="mobile-toggle-panel-button" class="mobile-map-menu-button"><img src="imgs/mobile-menu.png" alt="Open/close the menu" title="Open/close the menu"></button></div></div></div>
<div id="map"><div class="map-menu-wrapper hidden-mobile-portrait hidden-mobile-landscape"><div class="map-menu-btn-wrapper"><button id="clear-map-button"><span>Clear Map</span></button></div><div class="map-menu-btn-wrapper"><button id="toggle-panel-button" class=""><span class="panel-active-text">Hide Menu</span><span class="panel-inactive-text">Show Menu</span></button></div></div></div>
</div>
<div id="right-panel" class="layers-active">
<div id="right-panel-drag-overlay"></div>
<div id="right-panel-header" class="panel-header-wrapper">
<div class="active btn panel-btn panel-top-btn" data-active="layers-active"><div class="btn-middle-align-ghost"><div><span class="hidden-mobile-portrait hidden-mobile-landscape">Map</span> Layers</div></div></div><div id="graphs-tab-btn" class="btn panel-btn panel-top-btn" data-active="graphs-active"><div class="btn-middle-align-ghost"><div><span class="hidden-mobile-portrait hidden-mobile-landscape">Vegetation Index</span> Graphs</div></div></div><div id="about-tab-btn" class="btn panel-btn panel-top-btn" data-active="about-active"><div class="btn-middle-align-ghost"><div>About</div></div></div>
</div>
<div id="layer-list-wrapper" class="panel-section-wrapper active" data-active="layers-active">
<div id="layer-list"></div>
</div>
<div id="graphs-wrapper" class="panel-section-wrapper" data-active="graphs-active">
<div id="graphs-header-wrapper">
<div id="graph-type-header" class="panel-header-wrapper">
<div class="active btn panel-btn graph-type-btn" data-type="timeseries">All<span class="hidden-mobile-landscape"> Years</span></div><div class="btn panel-btn graph-type-btn" data-type="overlapping">Overlapping<span class="hidden-mobile-landscape"> Years</span></div><div class="btn panel-btn graph-type-btn" data-type="polar">Polar graphs</div>
</div>
</div>
<div id="graph-list" class="graph-list graph-timeseries">
<div id="timeseries-graph-info" class="active graph-type-info">Click locations on the map to view complete time series of vegetation greenness (NDVI) change for those locations. These annual and multi-year patterns are the basis for the various phenology map layers.</div>
<div id="overlapping-graph-info" class="graph-type-info">Click locations on the map to view vegetation greenness (NDVI) change across a calendar year. Select years in the legend to compare. These annual and multi-year patterns are the basis for the various phenology map layers.</div>
<div id="polar-graph-info" class="graph-type-info">Click locations on the map to view vegetation greenness (NDVI) change across a phenological year. Select years in the legend to compare. The start of the phenological year is based on the annual phenology pattern, across all years, and it can vary with location. Growing season start and end are 15% and 80% of the annual NDVI accumulation, respectively. Seasonality is a measure of how ‘off-center’ the mean NDVI location is during the growing season. This mean location also marks the date of the middle of the growing season. These annual and multi-year patterns are the basis for the various phenology map layers.</div>
</div>
</div>
<div id="about-wrapper" class="panel-section-wrapper" data-active="about-active">
<div id="about-text">
<h3 class="about-header">Overview</h3>
<p>LanDAT is a vegetation monitoring tool for assessing whether landscape change is leading to desirable outcomes, and for understanding landscape resilience in a quantitative and integrative way.</p>
<p>The map viewer lets users explore regularly updated data and graphical information describing landscape dynamics over short and long terms.</p>
<p>LanDAT works from the premise that measuring and interpreting these dynamics improves informed decision-making in natural resource management and ecosystem service conservation.</p>
<h3 class="about-header">Map Layers</h3>
<p>This section lets users view landscape information on the map — both LanDAT datasets and ancillary layers from other providers (in addition to reference maps; ancillary landscape data are located in the ‘Landscape and Climate Characteristics’ group).</p>
<ul class="about-list">
<li>To put a layer on the map click the checkbox next to its label.</li>
<li>To expand or collapse a group of related layers click the group's bar.</li>
<li>To view a layer's description click <img src="imgs/more-info-icon-64x64.png" class="about-icon" alt="Representative descriptive icon" title="Representative descriptive icon">.</li>
<li>To adjust a layer's transparency move the slider marked by <img src="imgs/opacity-icon-closed-64x64.png" class="about-icon" alt="Representative transparency icon" title="Representative transparency icon">.</li>
</ul>
<h3 class="about-header">Vegetation Index Graphs</h3>
<p>This section visualizes the change over time in vegetation greenness — the Normalized Difference Vegetation Index (NDVI) — at locations you specify.</p>
<p>NDVI data are gathered daily by two satellite-based moderate resolution sensors (MODIS). These daily data are filtered and smoothed to generate an 8-day composite time series that spans the period of MODIS record from 2000 until present*.</p>
<p>The LanDAT map layers quantify annual and multi-annual phenological patterns present in these data**. (See our detailed <a href="https://unca.maps.arcgis.com/apps/MapJournal/index.html?appid=ed63f137bb474972a4acb0df32f46e6d" target="_blank">Overview</a> for more information).</p>
<ul class="about-list">
<li>To create a graph for a location, click the location on the map.</li>
<li>To center the map on a graph's location, click the "Show On Map" button.</li>
<li>To scroll the list of graphs to an existing location's marker — <img src="imgs/blue_icon.png" class="about-icon" alt="Representative map marker" title="Representative map marker"> — click that marker on the map.</li>
<li>To remove a graph and its marker, click <img src="imgs/close-icon.png" class="about-icon" alt="Representative close button" title="Representative close button">.</li>
</ul>
<h3 class="citation-header">How to cite LanDAT</h3>
<p>General information from LanDAT website:<br>Landscape Dynamics Assessment Tool. USDA Forest Service. Available online: <a target="_blank" href="https://landat.org">https://landat.org</a>. [Date accessed].</p>
<p>LanDAT geospatial data access:<br>LanDAT Geospatial Data. 2019. USDA Forest Service. Available online: <a target="_blank" href="https://landat.org/maps">https://landat.org/maps</a>. [Date accessed].</p>
<h3 class="about-header">Credits</h3>
<p>The LanDAT project was developed by the U.S. Forest Service's <a target="_blank" href="https://forestthreats.org/">Eastern Forest Environmental Threat Assessment Center (EFETAC)</a> in partnership with UNC Asheville's <a target="_blank" href="https://nemac.unca.edu/">National Environmental Modeling and Analysis Center (NEMAC)</a>, the <a target="_blank" href="http://applcc.org/">Appalachian Landscape Conservation Cooperative</a>, the National Aeronautics and Space Administration's (NASA) <a target="_blank" href="https://www.nasa.gov/centers/stennis/home/index.html">Stennis Space Center</a>, and the Department of Energy's <a target="_blank" href="https://www.ornl.gov/">Oak Ridge National Laboratory</a>.</p>
<p>For more information about the LanDAT project please return to its <a target="_blank" href="https://landat.org">main page</a>.</p>
<p>* Spruce, J.P., G.E. Gasser, and W.W. Hargrove. 2016. MODIS NDVI Data, Smoothed and Gap-filled, for the Conterminous US: 2000-2015. ORNL DAAC, Oak Ridge, Tennessee, USA. <a href="http://dx.doi.org/10.3334/ORNLDAAC/1299" target="_blank">http://dx.doi.org/10.3334/ORNLDAAC/1299</a></p>
<p>** Brooks, B.-G. J., D. C. Lee, L. Y. Pomara, and W. W. Hargrove. 2020. Monitoring Broadscale Vegetational Diversity and Change across North American Landscapes Using Land Surface Phenology. Forests 11:606.<br><a href="https://landat.org/sites/default/files/Brooks_et_al_2020_Forests.pdf" target="_blank">Download the PDF</a><br><a href="https://www.mdpi.com/1999-4907/11/6/606" target="_blank">Access the journal</a></p>
<br><p class="about-list-logos">
</p>
</div>
</div>
<div class="shareurl-panel">
<span class="shareurl-label">Share your map</span><span class="shareurl-button shareurl-link"><a><img src="imgs/link-symbol.png" alt="Copy Link which shares the map to Clipboard" title="Copy Link which shares the map to Clipboard"><span class="hidden-mobile-portrait hidden-mobile-landscape">Copy Link</span></a><div class="shareurl-link-popup"><p class="shareurl-link-description">Use this link to share your map</p><button class="shareurl-link-popup-remover remove-graph">✕</button><input type="text" readonly="readonly" class="shareurl-link-url" id="shareurl-link-url"></input></div></span><span class="shareurl-button shareurl-facebook"><a class="resp-sharing-button__link shareurl-social" target="_blank" aria-label="Facebook" data-baseurl="https://facebook.com/sharer/sharer.php?u="><div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--medium"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg></div><span class="hidden-mobile-portrait hidden-mobile-landscape">Share</span></div></a></span><span class="shareurl-button shareurl-twitter"><a class="resp-sharing-button__link shareurl-social" target="_blank" aria-label="Twitter" data-baseurl="https://twitter.com/intent/tweet/?text=Check%20out%20this%20landscape%20map%20I%20made%20with%20the%20U%2ES%2E%20Forest%20Service%27s%20LanDat%20interactive%20mapviewer%21&url="><div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--medium"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg></div><span class="hidden-mobile-portrait hidden-mobile-landscape">Tweet</span></div></a></span></div>
</div>
</div>
<script src="index_bundle.js"></script>
<script>
document.addEventListener('readystatechange', event => {
if (event.target.readyState === 'complete') {
Base("config/config.json");
}
});
</script>
</body>
</html>