-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathembed.html
108 lines (96 loc) · 5.27 KB
/
embed.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
<!doctype html>
<!--[if lt IE 10]> <html class="no-js ie-lte9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset=utf-8 />
<title>Oceanplanning.org</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic,300italic,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="css/embed.min-a3a31719.css">
<!--[if lte IE 9]>
<style>
.modal-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
</style>
<![endif]-->
</head>
<body id="embedded" class="loading">
<!--[if lt IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container block-group">
<header class="nav block">
<div>
<h1 class="heading"><a href="http://oceanplanning.org/" target="_top">Ocean Planning</a></h1>
</div>
</header>
<section class="main block">
<div id='map'></div>
<!-- layer controls -->
<div id="overlaySelectr" class="dropdown expanded">
<button id="overlaySelectr-close" class="link">»</button>
<div class="scroll-wrap">
<div class="inner"></div>
</div>
</div>
<!-- end layer controls -->
<div class="panel details">
<div class="tabs">
<button id="resetButton" class="link"><span class="icon-close">✕</span></button>
<div class="filter-row">
<ul class="clearfix">
<li><button class="link selected" data-target="details">Details</button></li>
<li><button class="link" data-target="description">Description</button></li>
</ul>
</div>
<div class="tabs-inner">
<div class="tab" data-tab="details">
<ul>
<li data-key="location"><span class="key">Plan Name:</span><span class="value"></span></li>
<li data-key="website"><span class="key">Website:</span><span class="value"><a href=""></a></span></li>
<li data-key="status"><span class="key">Status:</span><span class="value"></span></li>
<li data-key="date_planning_initiated"><span class="key">Date Planning Initiated:</span><span class="value"></span></li>
<li data-key="date_plan_completed"><span class="key">Date Completed:</span><span class="value"></span></li>
<li data-key="ocean_uses_covered"><span class="key">Ocean Uses Covered:</span><span class="value"></span></li>
<li data-key="lead_institution"><span class="key">Lead Institution(s):</span><span class="value"></span></li>
</ul>
</div>
<div class="tab hide" data-tab="description">
<p class="txt-copy">Select a planning area.</p>
</div>
</div>
</div>
</div>
</section>
<div id="about-map-modal" class="panel modal hide">
<div class="modal-background modal-close"></div>
<div class="modal-inner">
<button class="link modal-close">×</button>
<div class="modal-content txt-copy">
<h3>About the basemap</h3>
<p>This map was was created by <a href="http://stamen.com">Stamen Design</a>, a data visualization and cartography studio based in San Francisco.</p>
<p>The map uses a custom <a href="http://en.wikipedia.org/wiki/Map_projection">map projection</a> to show the true sizes of the coastal areas of the United States and Canada. Most web-based maps use the <a href="http://en.wikipedia.org/wiki/Mercator_projection">Mercator projection</a>, which distorts the sizes of regions near the poles, making Northern Canada and the Arctic Ocean appear much larger than they really are.</p>
<p>Our map uses a <a href="http://en.wikipedia.org/wiki/Lambert_azimuthal_equal-area_projection">Lambert Azimuthal Equal-area projection</a> which has been modified so that the center of the projection is at 105°W, 40°N. This projection shows accurate sizes everywhere on the map. However, as a side effect, north is not always "up" on this map. As you look at places that are further away from the center of the map, the curvature of the earth becomes apparent. Keep your eye on the <em>graticule lines</em> (the grid of thin blue lines out in the ocean) to help you figure out which direction is north.</p>
</div>
</div>
</div>
</div> <!-- end container -->
<script src="scripts/embed.min-203b2077.js"></script>
<script type="text/javascript">
STA.Embed.Widget(window.location.search);
</script>
</body>
</html>