-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
215 lines (215 loc) · 8.92 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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="en">
<head>
<title>CHQ Food System Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
/>
<link
href="https://api.mapbox.com/mapbox-assembly/v0.24.0/assembly.min.css"
rel="stylesheet"
/>
<script
async
defer
src="https://api.mapbox.com/mapbox-assembly/v0.24.0/assembly.js"
></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<link
rel="shortcut icon"
href="img\Food System Diagram.svg"
type="image/x-icon"
/>
</head>
<body>
<div class="flex-parent viewport-full relative scroll-hidden">
<div
id="sidebar"
class="sidebar shadow-darken25 z5 flex-child w-full w360-ml absolute static-ml left bottom"
>
<div
class="flex-parent flex-parent--column h-full-ml viewport-third bg-white"
>
<div class="flex-child grid px12 py12 color-gray-light border-b">
<div class="col col--6 txt-bold color-gray-dark">
CHQ Food System Map
</div>
<div class="col col--auto color-gray-dark"></div>
<div
id="home"
class="navIcons col col--1 color-gray-dark active-navIcon"
>
<svg class="icon w24 h24"><use xlink:href="#icon-home" /></svg>
</div>
<div id="filter" class="navIcons col col--1 color-gray-dark">
<svg class="icon w24 h24"><use xlink:href="#icon-filter" /></svg>
</div>
<div id="inspect" class="navIcons col col--1 color-gray-dark">
<svg class="icon w24 h24"><use xlink:href="#icon-inspect" /></svg>
</div>
</div>
<div class="flex-child px12 py12 h-full scroll-auto">
<div id="homeContent" class="tabContent active-tabContent">
<div class="txt-em">
Welcome to the CHQ Food System Map! The purpose of this project
is to identify, connect, and promote sectors within Chautauqua
County's Food System. Use the filters tools to
explore the map.
<strong class="none-mxl none-ml block"
>Scroll to read more.</strong
>
</div>
<br />
<img
class="block-mxl block-ml none"
src="img\Food System Diagram.svg"
alt=""
/>
<br />
<div class="txt-bold">Agriculture & Food Production</div>
<div class="txt-light">
Food begins with agriculture and farming. The food we consume
must first be grown, cultivated, and harvested. Agriculture &
Food Production describes any organization or business that
produces raw food products.
</div>
<br />
<div class="txt-bold">Processing & Value-Added Products</div>
<div class="txt-light">
Food processing can provide benefits such as giving foods a
longer shelf life, reducing food safety risks, and creating
value-added products. Processing & Value-Added Products
describes any organization or business that transforms raw foods
and ingredients into new products.
</div>
<br />
<div class="txt-bold">Aggregation, Distribution & Storage</div>
<div class="txt-light">
Once food has been produced or processed, it needs to make its
way to food outlets where it can be sold to consumers. Products
may be aggregated together from multiple sources to create a
larger and more reliable supply to meet market demands.
Aggregation, Distribution, & Storage describes any organization
or business that collects, transports, or preserves raw or
processed food products prior to purchasing by consumers.
</div>
<br />
<div class="txt-bold">Food Retail / Direct Sales</div>
<div class="txt-light">
Food makes its way to the consumer and our plates in a variety
of ways. Food Retail/Direct Sales describes any organization or
business that sells food directly to consumers. This includes
supermarkets, restaurants, dining halls, and other locations an
individual can purchase food.
</div>
<br />
<div class="txt-bold">Food Loss Management</div>
<div class="txt-light">
In the United States, over one-third of all available food goes
uneaten through loss or waste. Food Loss Management describes
any organization or business that manages waste produced at any
stage of the food system.
</div>
<br />
<div class="txt-bold">Food Assistance, Education, & Support</div>
<div class="txt-light">
There are a variety of resources for people and organizations
within the food system. Education & Support describes any
organization or business that provides assistance to the
community at any stage of the food system.
</div>
<br />
<div class="txt-bold">Author</div>
<div class="txt-light">
Produced by the Chautauqua County Department of Planning &
Development in partnership with the Food Policy Council of
Chautauqua County
</div>
<br>
<img
class="footerImg"
src="img\Chautauqua_County_ny_seal.png"
alt="County Seal"
/>
<img
class="footerImg"
id="fpcLogo"
src="img\2---Food-policy-council-logo.gif"
alt="Food Policy Council Logo"
/>
</div>
<div id="filterContent" class="tabContent">
<!-- <div class="txt-em">
Use the tools below to filter the markers on the map. Click the CLEAR button to refresh the query.
</div>
<br> -->
<div class="select-container">
<select
id="PrimarySector"
name="Primary Sector"
class="select select--border-green"
onchange="primarySectorChange()"
>
<option value="All">All Sectors</option>
<option value="Production">
Agriculture & Food Production
</option>
<option value="Processing">
Processing & Value-Added Products
</option>
<option value="Aggregation">
Aggregation, Distribution & Storage
</option>
<option value="Distribution">
Food Retail / Direct Sales
</option>
<option value="Waste">Food Waste Management</option>
<option value="Eduction">
Food Assistance, Education & Support
</option>
</select>
<div class="select-arrow"></div>
</div>
<br />
<div id="subSectorsDiv"></div>
<br />
<button class="btn btn--stroke btn--green" onclick="refreshSelection()">
<svg class="icon w24 h24">
<use xlink:href="#icon-refresh" />
</svg>
</button>
</div>
<div id="inspectContent" class="tabContent">
<div id="listings" class="listings"></div>
</div>
</div>
<footer class="px12 py6 txt-xs color-gray-light border-t">
<div class="color-gray-dark">
CCDPD -
<a class="link" href="https://planningchautauqua.com"
>planningchautauqua.com</a
>
| 2021
</div>
</footer>
</div>
</div>
<div
id="map"
class="map flex-child flex-child--grow viewport-twothirds viewport-full-ml"
></div>
</div>
</body>
<script src="data/current_assets.json"></script>
<script src="data/Sectors.js"></script>
<script src="page.js"></script>
<script src="map.js"></script>
</html>