What Is Transit Future?
Transit Future is a campaign by the Center for Neighborhood Technology to build a dozen transit lines in Cook County.
How do we pay for it? Cook County can create a dedicate revenue stream to build the projects.
This project is an explanatory web graphic that introduces people to the projects and how we'll pay for them.
The site is live at vision.transitfuture.org.
This project is a collaboration between
To get in touch, email us at email@example.com
Here's a breakdown of the project.
posts: the big page is actually composed of a bunch of jekyll posts. those live here. the posts are markdown files with dates in the title. they appear on the page in reverse chronological order. the posts are mostly text that hold the content of the site - rest of the HTML/CSS css lives in
_layouts. read the Jekyll docs for more info on how this works.
js: this is where the magic happens.
main.jsmakes the background images and map transitions work. we use Modest Maps for mapping. the map zooming, technically called map easing, uses the easey extension of modest maps through an older version of mapbox.js. our basemap is hosted by Mapbox.
map.jsspecifies how the additional layers should look. our transit layers for existing L lines and proposed transit future lines are hosted by CartoDB, and rendered dynamically by CartoDB's API using CartoCSS every time a user loads the map. The key idea driving the map is a map
view- a set of bounding box locations + one or more CartoCSS layers. These data structures tell the map where to zoom to next, and what layers to show on the map when it gets there. they're basically map states. the order of these map views mirror the order of project posts. some posts have divs with class mapstage (i.e.
<div id="southlake" class="mapstage"></div>). when
main.jstrips over these divs, it makes the map to transition to the next view. (the id in those divs allow us to link to particular parts of the page.) @mapmeld wrote much of this code, get in touch with him for a walkthrough of how it works.
transit-cache: to keep the map fast and our bank accounts in the black, our tiles are cached by transit-cache, a little node.js app that caches tiles in heroku memcached. transit-caches lives in a different repo.
data: the geospatial datasets shown on the map.
cta_lines.geojsonoriginally comes from City of Chicago Data Portal and have been improved by Adam Jentleson of Cartografika.
transit_future_lines.geojsonoriginally comes from CMAP - the lines are subset of that agency's GO TO 2040 regional plan transportation projects.
transit_future_connections.geojsondata was created by Adam Jentleson.
highlighted_places.geojsonwas created by Adam Jentleson from open datasets of building footprints, community areas and Cook County municipalities.
css: the site uses twitter bootstrap, and additional styles on top. those styles live in
img: all site images live here, including background images and organization logos.
img/mobile: to make the site mobile friendly, we remove the interactive map and use special static background images instead. those live in
img/mobile, and they have dimensions of 320x568 to work with long mobile phones like the iPhone5. the logic that tells the site to display these images on mobile devices lives in
Thanks for the inspiration, and the code!
Jekyll is written in Ruby, so you'll need to install Ruby and download the jekyll gem in order to run the report locally.
sudo gem install jekyll
The following command will let you view the site on your local machine:
jekyll serve --watch
Just point your browser to localhost:4000 to see the page!
Want to generate all the static files that make up the site, for upload to a web server? Just type:
- Nick Doiron - front-end development
- Adam Jentleson - GIS
- Taylor McKinley - GIS
- Edward Oser - writing, concept
- Catalina Velez - graphic design
- Juan-Pablo Velez - front-end development, writing, concept
Want to get in touch with us? Email firstname.lastname@example.org.
Several images were used with Creative Commons licensing. We would like to thank and acknowledge the use of following images:
- Catalina Velez, Transit Future System map
- Dave Sizer, Around Chicago
- Yonah Freemark, The Transport Politic
- Joel Carranza, Los Angeles Night Horizon
- Siqbal, Chicago Downtown Aerial View