Recently, I’ve been working on a project called Line In The Sand, together with Tomas Borsa and Jean-Philippe Marquis. Line In The Sand is a documentary about the proposed Northern Gateway pipeline, that aims to give a voice to the people living alongside the pipeline route, who would be directly impacted if the pipeline gets built.
To present the editing-work-in-progress on the project’s website, I built a map displaying all the interviews that are finished so far. To emphasise that this project is about people, I used a still image from each interview as map markers. Also, to make it clear that a video would be displayed when clicking a marker, I figured I would try to show a video loop when hovering over each marker - which turned out to work really well!
Some technical details
- The map is created with Mapbox. If you don’t know or haven’t tried Mapbox yet, you really should, it rocks.
- For this map, I’m using the divicon marker type, which allows you to use HTML as a marker.
- I started out using animated gifs inside the markers, but those turned out to be way too heavy for this use case. Instead of using gifs, we cut a video loop for every interview (thanks JP!), which is shown in a MediaElement player inside its marker. The players are initialized when the page loads, and start playing when you hover over a marker.
- Each video loop is served in both MPEG H.264 (MP4) andb WebM format, which should cover most modern browsers. We did our best to keep the filesize of the video loops as small a possible, to create a smooth user experience.
- When you click a marker, the full interview (hosted on Vimeo) is displayed in a popup, using Magnifik Popup.
- Use Chrome for optimal viewing experience. Firefox has a weird bug when using border-radius and overlaying the play button on top of the video player, so the markers are squares instead of circles. IE does surprisingly well.
You can see the map embedded on the Line In The Sand website. A full page version is available on GitHub Pages, at http://brunodbo.github.io/lits-map. The code for the map is available on GitHub as well, at https://github.com/brunodbo/lits-map.