Skip to content

Commit

Permalink
Merge pull request #61 from postcode/map
Browse files Browse the repository at this point in the history 
Map
  • Loading branch information
@andyhull
andyhull committed Feb 21, 2014
2 parents bef1665 + 4998578 commit 0a4e61c
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 46 deletions.
64 changes: 45 additions & 19 deletions _posts/2013-01-23-network.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,7 @@
section: network
---



<div class="fellowship">

<div id="mapcontainer">
<div id="map"></div>
<div class="yeartitle">
Expand All @@ -21,22 +18,51 @@
<div class="map2013">2013</div>
</div>

<div id='map-story'>
<ul>
<li><a id='filter-standards' data-toggle="collapse" data-target="#standards">Data Standards</a></li>
<li><a id='filter-flu' data-toggle="collapse" data-target="#flue">Flu Shot Finder</a></li>
<li><a id='filter-codeacross'data-toggle="collapse" data-target="#codeacross">Code Across America</a></li>
</ul>
<div class="panel-group span3" id="map-story">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a class="flu" data-toggle="collapse" data-parent="#map-story" href="#flu">
Flu Shot Finder
</a>
</div>
</div>
<div id="flu" class="panel-collapse collapse">
<div class="panel-body">
<p>A Chicago brigade member built an app to find flu shot providers that 3 other cities in the CfA network have re-deployed, using a standard data specification to enable the common app. <a href="http://www.huffingtonpost.com/mark-headd/how-technology-can-fight-the-flu_b_4495730.html">Read more</a></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a class="codeacross" data-toggle="collapse" data-parent="#map-story" href="#codeacross">
Code Across 2013
</a>
</div>
</div>
<div id="codeacross" class="panel-collapse collapse" >
<div class="panel-body">
<p>We activated the Code for America network through a national weekend of civic innovation where we built beta apps, liberated datasets and held write-a-thons to foster community and get citizens to engage with their local governments.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a class="summit" data-toggle="collapse" data-parent="#map-story" href="#standards">
Summit
</a>
</div>
</div>
<div id="standards" class="panel-collapse collapse">
<div class="panel-body">
<p>We brought together civic hackers and city staff, mayors and mentors, designers and developers from around the globe to discuss what happened in the civic tech movement in 2013 -- to share insights and learnings. For three days, 500 passionate citizens from around the world talked, listened, and learned about how to work together and make our communities better.</p>
</div>
</div>
</div>
</div>
<div id="standards" class="storyContainer span3 collapse out">
<p>We created data standards that put information directly in the hands of citizens by integrating restaurant inspections and residential code enforcements with consumer platforms such as Yelp and Trulia.</p>
</div>
<div id="flu" class="storyContainer span3 collapse out">
<p>A Chicago brigade member built an app to find flu shot providers that 3 other cities in the CfA network have re-deployed, using a standard data specification to enable the common app. <a href="http://www.huffingtonpost.com/mark-headd/how-technology-can-fight-the-flu_b_4495730.html">Read more</a></p>
</div>
<div id="codeacross" class="storyContainer span3 collapse out">
<p>We activated the Code for America network through a national weekend of civic innovation where we built beta apps, liberated datasets and held write-a-thons to foster community and get citizens to engage with their local governments.</p>
</div>


<div class="downarrow">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
Expand All @@ -53,7 +79,7 @@
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<circle cx="25" cy="25" r="9" style="stroke-width: 1.5; stroke: #fff; fill:#e87d2b" filter="url(#f1)" />
<circle cx="25" cy="25" r="9" style="stroke-width: 1.5; stroke: #e5e5e5; fill:#e87d2b" filter="url(#f1)" />
</svg>
</div>
<div class="mapscroll"></div>
Expand Down
6 changes: 6 additions & 0 deletions css/screen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ li {
top: 50px;
right: 10px;
z-index: 100;
background: #fff;
}

#map-story ul {
Expand Down Expand Up @@ -149,6 +150,11 @@ li {
max-width: 85px;
}

.panel-collapse {
background: #e87d2b;
padding: 0px 5px;
}

.stats2013{
border-left: 2px solid white;
padding: 20px 0px 25px 30px;
Expand Down
63 changes: 36 additions & 27 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ var cityLocations = [{
"properties": { "city": "philadelphia", "year": "2011", "type": "fellowship", "story": "codeacross"}
}, {
"geometry": { "type": "Point", "coordinates": [-71.053, 42.352]},
"properties": { "city": "boston", "year": "2011", "type": "fellowship", "story": "flu" }
"properties": { "city": "boston", "year": "2011", "type": "fellowship", "story": "flu", "marker-color": "#ffffff" }
}, {
"geometry": { "type": "Point", "coordinates": [-122.326, 47.604]},
"properties": { "city": "seattle", "year": "2011", "type": "fellowship", "story":"codeacross" }
Expand Down Expand Up @@ -460,10 +460,11 @@ $(function(){
});

markerLayer.addCallback("markeradded", function(l, m){
if($(m.element).attr("class").indexOf("simplestyle-marker") === -1)
return;
displayedMarkers.push(m);
// $(m.element).css("top", "-1000px");
// console.log(displayedMarkers);
if($(m.element).attr("class").indexOf("marker") === -1)
return;
$(m.element).css("top", "-1000px");

setTimeout(function(){
$(m.element).animate({"top":"0px"}, 400);
Expand All @@ -474,6 +475,8 @@ $(function(){


var markerFactory = function() {


var m = document.getElementById('marker').cloneNode(true);
m.style.display = 'block';
return m;
Expand Down Expand Up @@ -585,42 +588,48 @@ $(function(){
Map story events
*/

$('#filter-standards').click(function(e) {
$('.flu').click(function(e) {
clearTimeout(timer);
$('#standards').collapse('show');
$('#flu').collapse('hide');
$('#codeacross').collapse('hide');
$('#map-story ul li a').removeClass('active');
$(this).addClass('active');
// $('#flu').collapse('show');
// $('#standards').collapse('hide');
// $('#codeacross').collapse('hide');

// $('#map-story ul li a').removeClass('active');
// $(this).addClass('active');
markerLayer.filter(function(f) {
return f.properties['story'] === 'standards';
f.properties['story'] === 'flu';
f.properties['marker-color'] = '#00000'
console.log(f);
return
});
return false;
});

$('#filter-flu').click(function(e) {
$('.codeacross').click(function(e) {
clearTimeout(timer);
$('#flu').collapse('show');
$('#standards').collapse('hide');
$('#codeacross').collapse('hide');

$('#map-story ul li a').removeClass('active');
$(this).addClass('active');
markerLayer.filter(function(f) {
return f.properties['story'] === 'flu';
// $('#codeacross').collapse('show');
// $('#flu').collapse('hide');
// $('#standards').collapse('hide');
// $('#map-story ul li a').removeClass('active');
// $(this).addClass('active');
b = markerLayer.filter(function(f) {
f.properties['story'] === 'codeacross';
f.properties['marker-color'] == '#00000'
return
});
return false;
});

$('#filter-codeacross').click(function(e) {

$('.summit').click(function(e) {
clearTimeout(timer);
$('#codeacross').collapse('show');
$('#flu').collapse('hide');
$('#standards').collapse('hide');
$('#map-story ul li a').removeClass('active');
$(this).addClass('active');
// $('#standards').collapse('show');
// $('#flu').collapse('hide');
// $('#codeacross').collapse('hide');
// $('#map-story ul li a').removeClass('active');
// $(this).addClass('active');
markerLayer.filter(function(f) {
return f.properties['story'] === 'codeacross';
return f.properties['story'] === 'standards';
});
return false;
});
Expand Down

0 comments on commit 0a4e61c

Please sign in to comment.