HTML5 Mapping and Interactive NOL


A few months ago, I posted about HTML5 video and Randy Abramson (Director of Product and Operations) posted about News On Location (NOL).  In this post, however, we want to take a look at how HTML5 mapping is evolving and how BBG’s NOL may make use of the technology in the near future.

Knowing the location of users (with their permission of course) can be a good thing both for them and for one’s service.  Not only do users often feel that they’re receiving personalized results, but there is potential for them to contribute to live maps and live feeds—making their entire interaction with your site more relevant.  This is great news for you because with an improved UX, your web metrics have the potential to flourish.

Here’s a few examples of some really cool HTML5 mapping uses and how similar techniques could be applied to NOL:


Austin Music Map

Description:  “…Austin is full of amazing musical moments. Lots of them where you least expect them. That’s where you come in. The Austin Music Map is a collaboration between KUT Austin and YOU. Take us into your corner of the city. Show us a musical venue we’ve never heard of before. Surprise us with your favorite undiscovered musician.”

Why it’s cool: Austin Music Map instructs users to snap a pic with their phones, make a video, or record a story about one of their favorite musical moments in the city—then post it to the website.  By tagging the media with the venue and neighborhood where it was captured, plus hashtagged words that describe the event, users are able to add to a growing public playlist so you can “play the city”.

Applied to NOL: NOL wants to bring local news and culture to life through the sites and sounds of the people on the ground.  What better a way to provide users with a way to participate in ‘remixing the news’ by adding photos, videos and sounds? Users could tag items to create interactive, region-specific media playlists.



SoundCloud API

Description: “If you build an app or web service that generates any type of sound, it’s easy to connect it to SoundCloud and enable your users to share their creations across the web. Allowing users to share what they create to their existing social networks and the SoundCloud community brings great value in a variety of use cases. … Letting users share tracks is also a great way of virally-promoting your app. Uploaded tracks will automatically be tagged as uploaded with [your app], so when a user shares a track on Facebook, his friends will see what app the track was created with.”

Why it’s cool: You can share sounds and recordings from your specific location, then share or embed them.

Applied to NOL: Ever wanted to hear an unedited clip from a revolution to see if you can understand what people are really saying on the street?  You could.  Ever want to pump up your speakers for a dance party in your own living room listening to a live stream of your favorite band performing at a music festival in your home country?  You could. News On Location could use the API to allow users to share audio commentary from the ground.  New users that come to that spot could then react to that clip and create their own contributions to the conversation.




Description: “Remake the Internet—Zeega is a community of makers passionate about creating immersive experiences that combine original content with media from across the web.”

Why it’s cool: Zeega was demonstrated at the London Mozilla Festival in 2012 and exposed developers to how it’s more than an interactive storytelling tool.  Zeega’s developers liken the technology to Tumblr or WordPress.  In a nutshell, a blog can be transformed into a rich interactive site—full of audio, video, images and a means of easily sharing everything.

Applied to NOL: Again, users could collect sounds and photos on mobile devices and geo-tag them.  Once uploaded, the photo and audio could be remixed into Zeega presentations that could be consumed on desktop or mobile devices.  The playback of these presentations could allow for users ‘off-location’ to feel like they are ‘there’ with the contributors.  Social integration between the presentation and users on location can further dialogue between the ‘on-and-off-location’ participants.




Description:  “Design maps in the cloud, publish in minutes.”

Why it’s cool: Custom maps can be designed and published in minutes (all powered by OpenStreetMap data).

Applied to NOL: Journalists can create custom, detailed maps of specific events.  Colors and styles can be changed, terrain layers can be integrated to show elevation, and maps can be annotated with pins, symbols, icons and interactive tooltips.  Maps can then be shared or embedded and represented with the NOL application for ‘on-and-off-location’ users.



Additional Examples and Resources:

- KartographKartograph is a simple and lightweight framework for building interactive map applications without Google Maps or any other mapping service. It was created with the needs of designers and data journalists in mind.

- Georelated: A blog full of articles that relate to the art of web mapping. Includes a lot of technical reviews detailing what’s possible now and may be possible in the future.

- GeoCAT [Video]: Perform rapid geospatial analysis of species in a simple and powerful way.

- SVG Open Conference (2011), “Even Faster Web Mapping”, by Michael Neutze.  [Neutze’s video presentation and slideshow can be found here.]

- HTML5 and Esri-based Web Mapping [Video]

- HTML5 Canvas Visualization of Flickr & Picasa API [Credit: Eric Fischer of The Geotaggers’ World Atlas]

- PBS FRONTLINE’s Interactive: David Coleman Headley’s Web of Betrayal
[Read more about the process here]


- – - – -

(Thank you to Randy Abramson, Eric Pugh and Rob Bole for their link suggestions, quotes and additional contributions to this article.)

(The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.)

The following two tabs change content below.
April Deibert

April Deibert

April Deibert is the Multimedia Blogger/Producer for the Office of Digital & Design Innovation. Follow her on Twitter: @BBGinnovate and @AprilDeibert.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *