Skip to content

Commit 51f7791

Browse files
gasscgassc
committed
project port
moved the Fish Fry Map project out of codeforpittsburgh.github.io to this repo
1 parent 4ff96de commit 51f7791

30 files changed

+62823
-2
lines changed

‎README.md‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,19 @@
1-
# fishfrymap
2-
Fish Fry Map project repository
1+
# [2016 Pittsburgh Lenten Fish Fry Map](http://openpgh.github.io/fishfrymap)
2+
3+
Facebook: https://www.facebook.com/PittsburghLentenFishFryMap/
4+
5+
## Dependencies
6+
7+
* Mapbox JS (an extension of Leaflet)
8+
* CSS from Leaflet
9+
* Mapbox's leaflet-ominvore for ingesting kml and returning geojson
10+
* Leaflet Sidebar for a Leaflet-friendly sidebar.
11+
* JQuery, for dealing with the features filters
12+
13+
## Data source
14+
15+
Data for this was collected in Google Maps. See the `_src` folder for steps used to convert geocoded-but-not-explicitly-geo-attributed `kml` exported from a Google Maps Fusion Table to useful `kml` with actual xy attributes. This standardized `kml` is converted to `geojson` in the map via Mapbox Omnivore.
16+
17+
## Cartographic inspiration
18+
19+
http://gassc.github.io/pcbwmap

‎css/L.Control.Sidebar.css‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
.leaflet-sidebar {
2+
position: absolute;
3+
height: 100%;
4+
-webkit-box-sizing: border-box;
5+
-moz-box-sizing: border-box;
6+
box-sizing: border-box;
7+
padding: 10px;
8+
z-index: 2000; }
9+
10+
.leaflet-sidebar.left {
11+
left: -500px;
12+
transition: left 0.5s, width 0.5s;
13+
padding-right: 0; }
14+
15+
.leaflet-sidebar.left.visible {
16+
left: 0; }
17+
18+
.leaflet-sidebar.right {
19+
right: -500px;
20+
transition: right 0.5s, width 0.5s;
21+
padding-left: 0; }
22+
23+
.leaflet-sidebar.right.visible {
24+
right: 0; }
25+
26+
.leaflet-sidebar > .leaflet-control {
27+
height: 100%;
28+
width: 100%;
29+
overflow: auto;
30+
-webkit-overflow-scrolling: touch;
31+
-webkit-box-sizing: border-box;
32+
-moz-box-sizing: border-box;
33+
box-sizing: border-box;
34+
padding: 8px 24px;
35+
font-family: Helveltica;
36+
font-size: 12pt;
37+
color: #fff;
38+
a.one:link color:#ff0000;
39+
text-align: left;
40+
background: rgba(35,31,32,0.9);
41+
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
42+
-webkit-border-radius: 4px;
43+
border-radius: 4px; }
44+
45+
.leaflet-touch .leaflet-sidebar > .leaflet-control {
46+
box-shadow: none;
47+
border: 2px solid rgba(0, 0, 0, 0.2);
48+
background-clip: padding-box; }
49+
50+
@media (max-width: 767px) {
51+
.leaflet-sidebar {
52+
width: 25%;
53+
height: 100%;
54+
padding: 0; }
55+
.leaflet-sidebar.left.visible ~ .leaflet-left {
56+
left: 100%; }
57+
.leaflet-sidebar.right.visible ~ .leaflet-right {
58+
right: 100%; }
59+
.leaflet-sidebar.left {
60+
left: -100%; }
61+
.leaflet-sidebar.left.visible {
62+
left: 0; }
63+
.leaflet-sidebar.right {
64+
right: -100%; }
65+
.leaflet-sidebar.right.visible {
66+
right: 0; }
67+
.leaflet-sidebar > .leaflet-control {
68+
box-shadow: none;
69+
-webkit-border-radius: 0;
70+
border-radius: 0; }
71+
.leaflet-touch .leaflet-sidebar > .leaflet-control {
72+
border: 0; } }
73+
@media (min-width: 768px) and (max-width: 991px) {
74+
.leaflet-sidebar {
75+
width: 305px; }
76+
.leaflet-sidebar.left.visible ~ .leaflet-left {
77+
left: 305px; }
78+
.leaflet-sidebar.right.visible ~ .leaflet-right {
79+
right: 305px; } }
80+
@media (min-width: 992px) and (max-width: 1199px) {
81+
.leaflet-sidebar {
82+
width: 390px; }
83+
.leaflet-sidebar.left.visible ~ .leaflet-left {
84+
left: 390px; }
85+
.leaflet-sidebar.right.visible ~ .leaflet-right {
86+
right: 390px; } }
87+
@media (min-width: 1200px) {
88+
.leaflet-sidebar {
89+
width: 500px; }
90+
.leaflet-sidebar.left.visible ~ .leaflet-left {
91+
left: 500px; }
92+
.leaflet-sidebar.right.visible ~ .leaflet-right {
93+
right: 500px; } }
94+
.leaflet-sidebar .close {
95+
position: absolute;
96+
right: 20px;
97+
top: 20px;
98+
width: 31px;
99+
height: 31px;
100+
color: #97DBB6;
101+
font-size: 25pt;
102+
line-height: 1em;
103+
text-align: center;
104+
background: white;
105+
-webkit-border-radius: 16px;
106+
border-radius: 16px;
107+
cursor: pointer;
108+
z-index: 8; }
109+
110+
.leaflet-left {
111+
transition: left 0.5s; }
112+
113+
.leaflet-right {
114+
transition: right 0.5s; }

‎css/Thumbs.db‎

7 KB
Binary file not shown.

‎css/app.css‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
#map {
2+
height: 100%
3+
}
4+
5+
/*font styles*/
6+
7+
body {
8+
background: #fff;
9+
color: #222;
10+
padding: 0;
11+
margin: 0;
12+
font-family: 'Oswald', sans-serif;
13+
font-weight: normal;
14+
font-style: normal;
15+
line-height: 1.5;
16+
position: relative;
17+
cursor: auto;
18+
}
19+
20+
p,
21+
pa,
22+
hr {
23+
font-family: 'Oswald', sans-serif;
24+
font-weight: lighter;
25+
font-size: 1rem;
26+
line-height: 1.2rem;
27+
margin-bottom: 1.5rem;
28+
text-align: left;
29+
text-rendering: optimizeLegibility;
30+
}
31+
32+
a {
33+
font-family: 'Oswald', sans-serif;
34+
color: #8ad3f4;
35+
}
36+
37+
strong {
38+
font-style: normal;
39+
color: #fdb930;
40+
}
41+
42+
li,
43+
ul {
44+
text-align: left;
45+
}
46+
47+
h1,
48+
h2,
49+
h3 {
50+
font-family: 'Oswald', sans-serif;
51+
font-weight: normal;
52+
font-style: normal;
53+
color: #fdb930;
54+
text-rendering: optimizeLegibility;
55+
margin-top: 0.2rem;
56+
margin-bottom: 0.5rem;
57+
line-height: 1.4;
58+
text-shadow: 4px 4px 4px #000;
59+
}
60+
61+
h1 {
62+
font-size: 2.125rem;
63+
}
64+
65+
h2 {
66+
font-size: 1.6875rem;
67+
}
68+
69+
h3 {
70+
font-size: 1.375rem;
71+
}
72+
73+
table,
74+
tr,
75+
th {
76+
vertical-align: top;
77+
break-word: word-wrap;
78+
}
79+
80+
/* Pop-Up */
81+
82+
.custom-popup .leaflet-popup-content-wrapper {
83+
background: rgba(35, 31, 32, 0.9);
84+
color: white;
85+
font-size: 0.9em;
86+
line-height: 1.2em;
87+
}
88+
89+
.leaflet-container a {
90+
color: #8ad3f4;
91+
}
92+
93+
.custom-popup .leaflet-popup-tip-container {
94+
margin: 0 auto;
95+
width: 40px;
96+
height: 20px;
97+
position: relative;
98+
overflow: hidden;
99+
}
100+
101+
.custom-popup .leaflet-popup-tip {
102+
width: 15px;
103+
height: 15px;
104+
padding: 1px;
105+
margin: -8px auto 0;
106+
-moz-transform: rotate(45deg);
107+
-webkit-transform: rotate(45deg);
108+
-ms-transform: rotate(45deg);
109+
-o-transform: rotate(45deg);
110+
transform: rotate(45deg);
111+
background: rgba(35, 31, 32, 0.7);
112+
}
113+
114+
/*leaflet sidebar styles*/
115+
116+
.leaflet-sidebar > .leaflet-control h1,
117+
h2,
118+
h3 {
119+
color: #fdb930;
120+
}
121+
122+
.leaflet-sidebar > .leaflet-control strong {
123+
color: #fdb930;
124+
}
125+
126+
.leaflet-sidebar > .leaflet-control em {
127+
color: #fdb930;
128+
}
129+
130+
.leaflet-sidebar > .leaflet-control a {
131+
color: #8ad3f4;
132+
}
133+
134+
.leaflet-sidebar > .leaflet-control hr {
135+
display: block;
136+
height: 1px;
137+
border: 0;
138+
border-top: 1px solid rgba(138, 211, 244, 0.5);
139+
margin: 1em 0;
140+
padding: 0;
141+
}
142+
143+
#marker-list {
144+
background: #fdb930;
145+
font-size: 0.9rem;
146+
overflow-x: auto;
147+
margin: 0;
148+
padding: 10px;
149+
border-radius: 3px;
150+
width: 100%;
151+
border: 1px solid rgba(0, 0, 0, 0.4);
152+
}
153+
154+
#marker-list li {
155+
padding: 5px;
156+
margin: 0;
157+
list-style-type: none;
158+
}
159+
160+
#marker-list li:hover {
161+
background: #ffd580;
162+
}
163+
164+
input[type="checkbox"] {
165+
display: none;
166+
}
167+
label {
168+
cursor: pointer;
169+
}
170+
input[type="checkbox"] + label:before {
171+
border: 1px solid #ffffff;
172+
content: "\00a0";
173+
display: inline-block;
174+
height: 1.375rem;
175+
width: 1.375rem;
176+
margin: 0.2em 0.25em 0 0;
177+
padding:0;
178+
vertical-align: top;
179+
}
180+
input[type="checkbox"]:checked + label:before {
181+
background: #fff;
182+
color: #666;
183+
content: "\2713";
184+
line-height: 0.75em;
185+
text-align: center;
186+
}
187+
input[type="checkbox"]:checked + label:after {
188+
color: #8ad3f4
189+
}
190+
191+
#inputs,
192+
#errors,
193+
#directions {
194+
position: relative;
195+
/*
196+
width: 33.3333%;
197+
max-width: 300px;
198+
min-width: 200px;
199+
*/
200+
}
201+
202+
#inputs {
203+
z-index: 10;
204+
top: 10px;
205+
left: 10px;
206+
}
207+
208+
#directions {
209+
z-index: 99;
210+
/*background: rgba(0,0,0,.8);*/
211+
top: 0;
212+
right: 0;
213+
bottom: 0;
214+
overflow: auto;
215+
}
216+
217+
#errors {
218+
z-index: 8;
219+
opacity: 0;
220+
padding: 10px;
221+
border-radius: 0 0 3px 3px;
222+
background: rgba(0,0,0,.25);
223+
top: 90px;
224+
left: 10px;
225+
}

‎css/check_radio_sheet.png‎

18.4 KB
Loading

0 commit comments

Comments
 (0)