Azavea Atlas

Maps, geography and the web

Free Cicero API credits for Apps for Philly 2015!

In honor of Apps for Philly Democracy 2015, Cicero is granting twice the free API credits to all who sign freeup this weekend. Apps for Philly is a weekend-long hackathon that brings Philadelphians together to discuss how technology can improve democracy in our city, an awesome event for which Azavea is a flagship sponsor. Cool, right?

As a proud supporter of this event, we want to encourage everyone to test out Cicero’s API with 2,000 free credits! The API matches addresses to legislative districts, both in the US and abroad. It also returns comprehensive elected official information, including district offices and social media identifiers: just the tools you need to engage in democracy your way. cicero

To sign up, simply visit our free trial page. You will instantly get 1,000 credits, which is good for 90 days. As a tribute to Apps for Philly, we’ll add 1,000 more. Happy geocoding!

GeoPhilly’s Balloon Mapping Launch: A Philly Tech Week Event

GeoPhilly, Philadelphia’s meetup group that unites developers, geographers, data geeks, open source enthusiasts, civic hackers, and map addicts in our shared love of maps and the facts they visualize and stories they tell has expanded to over 600 members in just one and a half years.  For the 2nd year in a row, we are pleased to host an event during Philly Tech Week 2015, Philadelphia’s annual festival celebrating technology and engagement organized by Technically Philly.

Flyer for balloon launch

Join us for a Balloon Mapping Launch Wednesday, April 22nd at Penns Landing ($5)! Balloon mapping is a low-cost, easy, and safe way to capture aerial images and stitch them together to make high resolution maps. This grassroots technique has been used by journalists and community groups all over the world. One of the most interesting balloon mapping projects involved capturing images of the damage caused by the 2010 oil spill in the Gulf of Mexico.

First, we will be meeting on the Delaware River Waterfront (in front of the Independence Seaport Museum facing the water) to launch our balloon and camera kits and collect our aerial imagery. This workshop will be outdoors in the city, so please dress accordingly with the weather.  (If severe rain or wind occur, we will have a rain date on Thursday April 23rd).

This meetup has a second evening part on the day of the launch where you can help to stitch together the photos taken from the morning or build your own camera rig. You don’t need to attend both events, but if you’d like to, you will need RSVP for both. RSVP for the second event here. Browse stitched photos at the Public Labs archive.

You might remember the last balloon mapping workshop organized by Hacks/Hackers meetup group during Philly Tech Week 2 years ago. Read more about balloon mapping and example uses on The Public Laboratory’s website. To get a feel for what comes out of a balloon launch, take a look at what Sean McGinnis (posts and events) and Dana Bauer (images/video) have done in past years.

Photos below by Dana Bauer from 2013 PTW Balloon Launch

Prep for Balloon Launch
Aerial Image of Delaware River
Waterfront Image

Apply to be a 2015 Summer of Maps Fellow!

Applications are now open for students for 2015 Azavea Summer of Maps. Summer of Maps offers $5000 paid fellowships to student spatial analysts to perform geographic data analysis for non-profit organizations. Students will pick from hand selected, engaging projects submitted by non-profits. We are looking for enthusiastic students with GIS analysis experience to apply. We also invite you to learn about what our Summer of Maps alums have gone on to accomplish.

The schedule for the selection process is below:

  • Feb 27 – Sun, Mar 15, 11pm – Students submit proposals and applications
  • Late-March – Early April – Top candidates are evaluated through interviews and analysis tasks
  • Mon, Apr 13 – Successful Summer of Maps fellows will be announced
  • Mon, June 1 – Fri, Aug 21 – Summer of Maps fellows work on spatial analysis projects

What will non-profit organizations receive?

  • Pro bono services from a talented student spatial analyst to geographically analyze data
  • Visualizations of data in new and innovative ways
  • Synthesis of other demographic and geographic data to draw new observations
  • High quality maps that can be used to make a case to funders or support new initiatives

What will students learn?

  • How to design and manage a spatial analysis project that supports the social mission of non-profit organizations
  • New and innovative skills from Azavea mentors
  • Professional work experience implementing a real-world GIS project

Eligibility

This is a paid fellowship program opened to full-time or part-time students. Azavea defines a student as an individual accepted into or enrolled in an accredited post-secondary institution located in the United States, including community colleges, universities, masters, PhD and undergraduate programs. Alternatively, you may be enrolled in an accredited non-U.S. university, but you must have a valid work visa that enables you to work in the United States (we are not able to sponsor you for a visa or provide travel expenses for travel to the U.S.).  If you are accepted into or enrolled in a college or university program as of April 2015, you are eligible to participate in the program, even if you will graduate during the program. You must be available to work at the Azavea office in Philadelphia starting on June 1, 2015.

Azavea may ask you to provide transcripts or other documentation from your accredited institution as proof of enrollment or admission status. You do not need to be in a Geography or GIS program in order to apply, but you should have experience performing analysis using desktop GIS software.

Submit your  application now through Sunday, March 15, 11pm ET.

Making Easy Story Maps Using the Odyssey.js Sandbox

Storytelling with Odyssey.js

There were a lot of geospatial developments in 2014 (read about some of them right here). One of the more interesting additions to the web mapping scene was Odyssey.js, an open-source library created by CartoDB to enhance storytelling with maps.

I wanted to tell a short story about what our Summer of Maps fellows have been up to since they completed the program, as well as show where they made an impact by mapping the organizations they performed pro-bono work for during their tenure. The open-source Odyssey.js library and its super-simple Sandbox Editor made the work a snap. Let’s see how to make a simple but functional story map in Odyssey in just a few steps.

Choosing a Sandbox Template

There are three Odyssey.js templates available.

There are three Odyssey.js templates available.

First, head to http://cartodb.github.io/odyssey.js/ and choose the “Create Story” button, which will take you to the Sandbox Editor. Once in the Sandbox select one of three templates. “Slides” (left in the image above) provides a very large map window with a small box to put small amounts of descriptive text. This template is appropriate for stories where sequential events aren’t very important. “Scroll” seems best suited to more in-depth stories, like full blogs or articles where the text at least as important as the map. Finally, the “Torque” template is similar to “Slides”, but includes CartoDB’s very cool Torque capability to visualize changes over time in point-based data.

Adding New Slides With Markdown

Once you’ve chosen a template, the Sandbox Editor comes pre-filled with boilerplate text and directions on how to format everything correctly. The editor itself uses Markdown formatting, and each new “slide” can be created with a simple “#” which is the highest heading level. New slides denoted by a “#” will have a small “add” icon that appears to the left of the text. Clicking will display options to drop a marker, tell the map to pan and zoom to a certain location, or “sleep”, which is used for Torque visualizations.

 

The very handy Odyssey.js editor.

The very handy Odyssey.js editor.

 

The Sandbox allows you to see how the changes you make affect the final product in real-time, so now is the time to add new slides, markers, and pans and zooms. It’s also entirely possible to save your progress in the editor by copying and pasting the Markdown text from the Sandbox into a text editor, saving it, and then pasting it in later over the boilerplate text when you’re ready to start up again (in fact, I would highly recommend doing this so you don’t lose progress). The rest of the important Sandbox functions are located on the bottom of the box. From left to right the buttons allow you to change the basemap, collapse the editor, download an HTML file, and share the results.

For our Summer of Maps Alumni story map, I added all the slides, markers, and movement through the Sandbox Editor. After creating the boilerplate storymap, I used the “Download Story” button to get the pre-filled HTML file. Downloading the HTML file allowed me to dig in and begin to customize beyond what the editor allows.

Out of the Box Customizations

One of the first things I did was to change the basemap from the choices available in the Sandbox to the beautiful Stamen Toner Lite basemap. Next, I set about adding custom colors and icons to the markers using the Leaflet.Awesome-Markers plugin, which allows you to add custom vector icons from the free and beautiful FontAwesome and IonIcon libraries. For a more detailed tutorial on how to get custom Leaflet marker icons working check out ZevRoss.com’s excellent tutorial. Check out the custom markers in the screenshot below:

Finished Odyssey.js map

Finished Odyssey.js map

 

After customizing the markers, I wanted to tweak the text container a bit and the size of the photos. To do that I needed to change the CSS styling code. There are a few ways to go about this. One way is to clone the whole Odyssey.js repository to your computer using GitHub. I went another route and just downloaded Odyssey’s CSS file from the link that was referenced by the pre-made Sandbox Editor HTML file and copied the sections I wanted to change and pasted it into my code (forgive my sloppiness, I’m not a web developer). By tweaking the #slides_container CSS section I was able to adjust the opacity, width, and color of the slide text box, and by toying around with #slides_container.slide.scrolled img I was able to resize the headshots of the alumni.

 

Odyssey.js with Markdown content inserted.

Odyssey.js with Markdown content inserted.

 

Now that I’d gotten into the guts of the file and had taken it out of the Sandbox Editor, I could no longer use the built-in Odyssey.js Sandbox share function. Instead, I decided to use GitHub pages to host the file. Creating a free, dedicated website for websites on GitHub is dead simple, and they have an excellent starter page for setting up personal pages or pages to host projects (I made a project page). To check out the Summer of Maps Alumni story map using Odyssey.js, head to http://tdahlberg.github.io/summerofmaps or scroll down.

 

Configuring Your Timestamp Field for CartoDB’s Torque Heatmaps

Earlier this month, our friends at CartoDB announced that heatmaps are now available as a visualization option in the Editor and as part of the Torque library. By heatmap, I mean the traditional GIS definition of a heatmap as representation of the density of point locations.

Since CartoDB’s heatmaps can leverage the time-series mapping capabilities of the Torque visualization library, I thought I’d take a dataset the Data Analytics team has been working with recently and provide an example of how heatmaps work with a tip about formatting your timestamp field to work with Torque.

Following up on the work I did last year, I’m helping to analyze pedestrian crash data in Philadelphia from 2008-2013 for PlanPhilly. These are only the crashes reported to PennDOT by the Philadelphia Police or Pennsylvania State Police, so the vast majority of these involve cars hitting pedestrians. Here’s what Philadelphia’s pedestrian crashes look like over time using CartoDB’s Torque heatmap:

Configuring The Timestamp Field

It’s important to have a dataset that has a compatible timestamp field to work with CartoDB’s Torque. This can be challenging when you’re working with datasets coming from a multitude of database sources that all store dates in a different format. However, converting a date or time field in your dataset to make it work with Torque is quite simple using the to_timestamp formatting function in PostgreSQL.

In the case of the crash data from PennDOT, they provide an integer field with year, month and day of the crash. I concatenated this into one field, which created a rather ugly date YYYYMMDD.cartodb_change_data_type

To convert to a date field in CartoDB, your data must first be of type String, which is easy enough to change using the Change data type… option in the dropdown accessible next to the field name in the Data view. Next, create a new field with the Date type using the add column button or SQL. I created a new column called “crashdate”.

Finally, in CartoDB’s SQL editor, a date with this format (YYYYMMDD) can be converted into a timestamp field with the following SQL:

UPDATE tablename SET newdatefield = to_timestamp(olddatefield, ‘YYYYMMDD’)

finished_crashdate

The first argument in the to_timestamp function is the date field you want to convert and the second argument is the format that defines the input. So if your date field is in a different format, simply enter it into the function. With the new date field in your dataset, you’re ready to start a time-series visualization using Torque! If you’re interested in doing your own analysis with this data, head over to the new OpenDataPhilly and pick up the crash data.