-
Notifications
You must be signed in to change notification settings - Fork 39
/
index.html
executable file
·180 lines (152 loc) · 7.56 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Discover data about places in your community.">
<meta name="author" content="Tobin Bradley">
<title>GeoPortal - Mecklenburg County GIS</title>
<!-- Open Graph -->
<meta property="og:url" content="https://mcmap.org/geoportal">
<meta property="og:type" content="website">
<meta property="og:title" content="GeoPortal - Mecklenburg County GIS">
<meta property="og:description" content="Discover data about places in your community.">
<meta property="og:image" content="https://mcmap.org/geoportal/img/android-icon-512.png">
<meta property="og:image:width" content="512">
<meta property="og:image:height" content="512">
<!-- preconnect for performance -->
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://storage.googleapis.com">
<!-- icon and theme stuff -->
<link rel="icon" href="img/favicon.png" type="image/png"><!-- 32×32 -->
<link rel="icon" href="img/logo.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png"><!-- 180×180 -->
<meta name="theme-color" content="#2A4365"/>
<link rel="manifest" href="manifest.json">
<!-- preload logo for performance -->
<link rel="preload" href="./img/logo.svg" as="image">
</head>
<body class="flex flex-col h-screen bg-white dark:bg-slate-800 dark:text-white">
<!-- header -->
<nav class="bg-sky-900 dark:bg-slate-800 shadow-lg dark:shadow-none print:hidden dark:border-b dark:border-slate-300/10">
<div class="flex justify-between flex-wrap px-5 py-2 md:py-4 max-w-7xl mx-auto">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<a href="./">
<span class="font-semibold text-xl tracking-wide"><span class="hidden md:inline">Mecklenburg County
</span>GeoPortal</span>
</a>
</div>
<div>
<button
class="btn text-sm leading-none border text-white border-white hover:border-transparent hover:text-blue-900 hover:bg-white hidden transition-colors duration-200 ease-in-out"
id="print"
onclick="window.print()">PRINT</button>
</div>
</div>
</nav>
<!-- main content -->
<main class="w-full max-w-7xl mx-auto p-10 print:py-1 flex-grow">
<div class="text-center print:hidden">
<h1 class="text-xl md:text-3xl">
Discover data about <strong class="text-orange-600">places</strong> in your community.
</h1>
<h2 class="text-base md:text-2xl pt-2">
Search for an address or place to get started!
</h2>
</div>
<div id="search" class="print:hidden mt-10 mb-5 md:mx-24" style="min-height: 50px;"></div>
<div id="app"></div>
<div id="tutorial" class="max-w-4xl mx-auto mt-16 mb-8 flex justify-center items-center print:hidden relative w-full aspect-video" style="background: url(img/logo.svg) center center no-repeat; background-size: contain;"></div>
</main>
<!-- footer -->
<footer class="bg-sky-900 dark:bg-slate-800 w-full print:hidden">
<div class="grid grid-cols-1 md:grid-cols-3 text-slate-200 max-w-7xl mx-auto">
<!-- about GeoPortal -->
<div class="p-5 border-r border-sky-800 dark:border-slate-700">
<h3 class="mt-6 mb-3 ml-3 text-xl font-semibold">ABOUT GEOPORTAL</h3>
<p class="p-3">
GeoPortal was created by Mecklenburg County GIS and is <a class="underline" rel="noopener"
href="https://en.wikipedia.org/wiki/Open_source" target="_blank">free and open source software</a>. You can
find the <a class="underline" rel="noopener" target="_blank"
href="https://github.com/tobinbradley/Mecklenburg-County-GeoPortal">source code on Github</a>.
Pull requests are welcome!
</p>
<p class="p-3">
GeoPortal would not be possible without a number of amazing open source projects, including
<a class="underline" rel="noopener" href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>,
<a class="underline" rel="noopener" href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a>,
<a class="underline" rel="noopener" href="https://www.mapbox.com/mapbox-gl-js/api/" target="_blank">Mapbox GL
JS</a>,
and <a class="underline" rel="noopener" href="https://svelte.dev/" target="_blank">Svelte</a>.
</p>
</div>
<!-- about data -->
<div class="p-5 border-r border-sky-800 dark:border-slate-700">
<h3 class="mt-6 mb-3 ml-3 text-xl font-semibold">ABOUT THE DATA</h3>
<p class="p-3">
Whenever possible, Mecklenburg County GIS releases its data as <a class="underline" rel="noopener"
href="https://en.wikipedia.org/wiki/Open_data" target="_blank">open data</a>. Each section of GeoPortal
includes links to the data used. Check out our
<a class="underline" rel="noopener" href="https://en.wikipedia.org/wiki/Open_data" target="_blank">Open
Mapping</a> project to find
more data
and open source projects.
</p>
<p class="p-3">
If you don't already have software to read spatial data,
we recommend <a class="underline" rel="noopener" target="_blank" href="https://www.qgis.org/en/site/">QGIS</a>,
a free and open source desktop GIS.
</p>
</div>
<!-- about us -->
<div class="p-5">
<h3 class="mt-6 mb-3 ml-3 text-xl font-semibold">ABOUT US</h3>
<p class="p-3">
<a class="underline" rel="noopener" href="https://www.mecknc.gov/LUESA/GIS/Pages/Default.aspx"
target="_blank">Mecklenburg County GIS</a>'s
mission is to provide quality geospatial data and technology solutions, empowering customers of Mecklenburg
County to make
data-driven decisions.
</p>
<p class="p-3">
<a rel="noopener"
class="btn border border-white bg-transparent hover:bg-white hover:text-blue-900 transition-colors duration-200 ease-in-out text-white"
target="_blank"
href="https://twitter.com/MeckGIS">
@MeckGIS
</a>
</p>
</div>
</div>
</footer>
<div id="backtotop" class="print:hidden"></div>
<!-- service worker dialog -->
<dialog id="sw-dialog" class=" bg-orange-500 text-white px-3 py-2 rounded-r-md border-l-2 border-white shadow-lg">
<div class="flex place-items-center">
<div class="flex-1 pr-8 text-lg">
GeoPortal has been updated!
</div>
<div>
<button class="btn bg-white text-orange-800 hover:bg-orange-600 hover:text-white transition-colors duration-300" onclick="window.location.reload()">Refresh</button>
</div>
</div>
</dialog>
<!-- 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>
<script type="module" src="/src/main.js"></script>
</body>
</html>