/
index.html
147 lines (129 loc) · 7.47 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GeoPortal</title>
<!-- favicon -->
<link rel="icon" type="image/png" href="img/favicon.png">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="img/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS 152x152 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="GeoPortal">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<!-- CSS -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="css/main.css?foo={{cachebuster}}">
<!--[if IE]>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
</head>
<body>
<!--[if IE]>
<div class="oldie">
<p>You are using an outdated browser. <a href="http://whatbrowser.org/">Upgrade your browser today</a> to better experience this site.</p>
<p>You can view the old version of the site <a href="http://mcmap.org/ie9geoportal/">here</>.</p>
</div>
<![endif]-->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--blue-grey-800 mdl-color-text--blue-grey-50">
<div class="mdl-layout__drawer-button">
<i class="mdl-layout__drawer-button icon-menu"></i>
</div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">GeoPortal</span>
<div class="mdl-layout-spacer"></div>
</div>
</header>
<div class="mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<header class="drawer-header">
<a href="./">GeoPortal</a><br />
<span>Mecklenburg County GIS</span>
</header>
<nav class="navigation mdl-navigation mdl-color--blue-grey-800">
<a class="mdl-navigation__link active" data-type="property" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-home" role="presentation"></i>Property</a>
<a class="mdl-navigation__link" data-type="schools" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-school" role="presentation"></i>Schools</a>
<a class="mdl-navigation__link" data-type="trash" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-trash" role="presentation"></i>Trash and Recycling</a>
<a class="mdl-navigation__link" data-type="environment" data-layers="postgis:view_regulated_floodplains,postgis:water_quality_buffers" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-droplet" role="presentation"></i>Environment</a>
<a class="mdl-navigation__link" data-type="impervious" data-layers="impervious_surface" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-rain-1" role="presentation"></i>Impervious Surface</a>
<a class="mdl-navigation__link" data-type="voting" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-check" role="presentation"></i>Voting</a>
<a class="mdl-navigation__link" data-type="parks" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-tree-2" role="presentation"></i>Parks</a>
<a class="mdl-navigation__link" data-type="libraries" href="javascript:void(0)"><i class="mdl-color-text--blue-grey-400 icon icon-library" role="presentation"></i>Libraries</a>
<div class="mdl-layout-spacer"></div>
<a class="mdl-typography--text-center mdl-color-text--blue-grey-400 nav-link" href="https://github.com/tobinbradley/Mecklenburg-County-GeoPortal"><i class="icon icon-github"></i> Source Code on Github</a>
</nav>
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<div class="mdl-grid">
<div class="mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="search-container mdl-typography--text-center">
<h1 class="mdl-color-text--blue-grey-600 search-header">Tell me about</h1>
<div class="search-input-container">
<input type="text" aria-label="search" name="search-input" class="search-input" autocomplete="off" />
<span class="bar"></span>
<p class="mdl-typography--text-left muted">Try typing part of an address, like <em>700 N</em>. Or we can <a href="javascript:void(0)" onclick="map.locate()">take a guess</a>.</p>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col">
<div id="search-results"></div>
</div>
</div>
<div class="mdl-color-text--blue-grey-500 mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col mdl-typography--text-center report report-container">
<div class="introduction">
<!-- <h3>Welcome to GeoPortal</h3> -->
<h4>
Discover data about <strong>places</strong> in your community.
</h4>
<h5>
Search for an address or place to get started!
</h5>
<div class="videoWrapper">
<iframe title="GeoPortal Tutorial" width="1280" height="720" src="https://www.youtube.com/embed/DtEIu-h2FQo?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<p class="credit">
Developed by <a href="http://emaps.charmeck.org" target="_blank">Mecklenburg County GIS</a>.
</p>
<p>
It's Open Source! <a href="https://github.com/tobinbradley/Mecklenburg-County-GeoPortal">Fork it on GitHub</a>.
</p>
</div>
</div>
<div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--12-col-tablet">
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop mdl-card-map">
<div class="mdl-card__title mdl-color--teal-300 mdl-color-text--grey-800" style="height: 300px;">
<div id="map" class="map-transparent"></div>
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="#" class="mdl-button mdl-js-button map-fullscreen" onclick="map.toggleFullscreen()">Full Screen</a>
</div>
</div>
<div class="demo-separator mdl-cell--1-col"></div>
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop mdl-color-text--blue-grey-50 photos"></div>
</div>
</div>
</main>
</div>
<script src="js/app.js?foo={{cachebuster}}"></script>
<!-- Google Analytics -->
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42311520-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>