London

AMD

AMD wants to talk about HSA, Heterogeneous Systems Architecture (HSA), its vision for the future of system architectures. To that end, it held a press conference last week to discuss what it's calling "heterogeneous Uniform Memory Access" (hUMA). The company outlined what it was doing, and why, both confirming and reaffirming the things it has been saying for the last couple of years.

The central HSA concept is that systems will have multiple different kinds of processors, connected together and operating as peers. The two main kinds of processors are conventional: versatile CPUs and the more specialized GPUs.

Modern GPUs have enormous parallel arithmetic power, especially floating point arithmetic, but are poorly-suited to single-threaded code with lots of branches. Modern CPUs are well-suited to single-threaded code with lots of branches, but less well-suited to massively parallel number crunching. Splitting workloads between a CPU and a GPU, using each for the workloads it's good at, has driven the development of general purpose GPU (GPGPU) software and development.

Read 21 remaining paragraphs | Comments

In 1999, Iranian students took the streets of Tehran in the fiercest unrest the country had seen since the 1979 Islamic revolution. The protests started out in response to the closure of a reformist newspaper, but after authorities raided a dormitory, setting fire to rooms and forcing students to jump from balconies, the violence spiraled into a week of full scale street warfare. We print reporters covering the story did our best, but it was the photographs that commanded the world’s attention: powerful, searing images that captured all those Iranian students’ anguish and bravery. As I cowered in back alleys and shop doorsteps — riot police and hard-line vigilantes patrolled the streets — I couldn’t imagine who was managing to take those extraordinary photos.

Later, when the photographer Newsha Tavakolian became my friend, I learned she had spent a week scaling trees and perching above with a zoom lens, bearing unique witness to an event that is a watershed in Iran’s history. She was disarmingly young in those days, girlish and funny in a way that made you forget she had already become one of the most intrepid and influential photojournalists in the country, and of her generation.

We went on to cover many of the same stories in the years that followed, sometimes working together, and I remember being struck by the sheer emotional intelligence of her work. Her eye for gestures, scenes, and moments that captured aspects of the modern Iranian experience that were hard to even formulate in words: the conflicted identities of young women caught between tradition and dreams of independence, the unspeakable betrayal of mothers of war martyrs, the suffocation felt by a generation of bright, talented Iranians increasingly cut of from the world and any real opportunity. Having grown up in that Iran, none of this was foreign or exotic to her, and in her images were often stories, saturated in an intense sympathy and understanding.

“I used to think that photographers should travel to wars and earthquakes to capture suffering, but its much harder to portray the atmosphere of those suffering in their normal lives,” she says. “When my heart hurts for someone, even my sister or neighbor, I want to tell their story.”

As her profile and portfolio grew more distinguished, more and more young photographers in Iran sought her out. She was emblematic of what was possible, and made working with these young photographers a part of her life, incorporating them into her vision for a better Iran. She saw that they had drive but lacked the resources and guidance they needed — she likens Iran in this way to “an island cut off from the world” to train their outlook — to develop their own creative, visual language. Even today she remains in this role, encouraging young photographers to focus on angles or stories, and most importantly, to see working in Iran as an opportunity and not a restriction: “I tell them they can take their best pictures in Iran, because they live here and it’s their story and their concerns. Ultimately they’ll find more here that they have meaningful things to say about.”

The aftermath of Iran’s 2009 post-election uprising changed many things in Iran, not least among them the climate for photojournalism. The authorities used press photos to hunt down and arrest protesters, many of whom later suffered torture and rape at detention centers. Iranians, Tavakolian says, “developed a phobia toward having their picture taken, they were simply very scared.” That reluctance, together with her own fear about inadvertently endangering someone by taking their picture, propelled Tavakolian down a new path, toward a more artistic form of photography with a strong base in social documentary.

The shift marks a deepening and aesthetic maturing in her work, which has been shown by the British Museum and acquired by modern collections such as London’s Victoria and Albert Museum. She says this new approach reflects a turn away from demystifying Iran for the West, and toward a different audience as her interlocutor. She’s no longer moved to capture various forms of hijab or veiling, and sees young Iranians’ vibrant presence on social media as capable of presenting their own voice to the world.

“When we’re stuck on getting the West to understand Iran, our work remains on the surface,” she says. “I want to tell Iranians’ story to Iranians themselves, this is where I can challenge myself and go deeper into the more complicated layers.”

Her new exhibition, Look, which recently debuted in New York at the Thomas Erben Gallery, illustrates this change in tactics. The series of portraits of inhabitants of her own apartment building in Tehran, all taken at a twilight hour seemingly suspended between night and day, conveys all the deep anxieties and fears that middle-class young people in Iran have about the future. “They were all scared or anxious, and I saw that despite how much access they had to technology, despite not being at the edge of poverty, they were still lonely, perplexed,” she says. “I wanted to capture such a moment in their lives.”

Look is a devastating portrait of a middle-class in decline, squeezed by economic pressure at home, and dwindling access to the world, a generation of young people whose lives are not reduced to the twilight hour of melancholy that Tavakolian captures, but marred by it. In this mode, she is still the storyteller, but now in more command of the tale, relaying the truths that are closest to home.

Newsha Tavakolian is based in Tehran. Her work debuted at the Thomas Erben Gallery in New York on April 11. Tavakolian served as the secretary of the 2013 Sheed Awards, a prize awarded for Iranian Social Documentary photography.

Azadeh Moaveni is a TIME contributing writer on Iran and the Middle East. Moaveni recently reported on The Aftermath of an Acid Attack for LightBox. She is the author of Lipstick Jihad and co-author of Iran Awakening.

Features and Essays

Robin Hammond / Panos Pictures / National Geographic

Robin Hammond: Zimbabwe: Breaking the Silence (The National Geographic Magazine) Oppression, Fear, and Courage in Zimbabwe | From the National Geographic magazine May issue.

Pete Muller: Questioning Zimbabwe’s Underdogs (NYT)

Sebastião Salgado: Genesis (NYT)

Michael Yamashita: China’s Ancient Lifeline (NGM) The 1,400-year-old Grand Canal is a monumental project that bound north and south China together. It’s still in use today.

Franco Pagetti / VII

Franco Pagetti: The Veils of Aleppo (LightBox)

Stanley Greene: The Dead and The Alive (NOOR) Syria

Giles Duley: Syrian Refugees (Guardian)

Nish L. Nalbandian: Portraits of Syrian Rebels (LA Times Framework blog)

Yusuf Sayman: Rebel Fighters Inside Aleppo (The Daily Beast)

Louie Palu / Zuma Press / The Pulitzer Center on Crisis Reporting

Louie Palu: Documenting Murder in Mexico (Mother Jones) The brutality of the drug war, on both sides of the border.

Dominic Bracco II: A Salvation Army of One (NYT Magazine) The Rev. Robert Coogan working in Saltillo, Mexico.

Shiho Fukada / Panos Pictures / The Pulitzer Center on Crisis Reporting

Shiho Fukada: Japan’s Rootless and Restless Workers (NYT Lens)

Jenn Ackerman: Minnesota, Frozen in Place and Time (NYT Lens)

Aaron Vincent Elkaim: The Last Great Race on Earth (Photo Booth) Iditarod, a thousand-and-forty-nine-mile race across Alaska

Fritz Hoffmann: On Beyond 100 (NGM) Photographer Fritz Hoffmann introduces us to people who have mastered the secret of long life.

Ami Vitale: Back at the Ranch (Panos Pictures)

David Guttenfelder / AP

David Guttenfelder: North Korea (Denver Post) While threats of a missile launch have renewed tensions with North Korea, photojournalist David Guttenfelder has returned to continue documenting life there.

Yuri Kozyrev: Pull Out From Afghanistan (NOOR)

Phil Moore: Mogadishu Boosts Security (Al Jazeera) Safety improves in Somalia’s once war-torn capital despite recent attack and ongoing threats of violence.

Zed Nelson: The Family (Institute) Zed Nelson’s project started in the summer of 1991, just turned 21

Gabriele Galimberti: My Couch Is Your Couch (Institute) Couchsurfers around the world

Steeve Iuncker / Agence VU

Steeve Iuncker: Yakutsk (LightBox) The Coldest City on Earth

James Whitlow Delano: Buried in Japan (TIME) Japan’s Aomori Prefecture might be at the same latitude as New York, but its climate can seem a lot more harsh.

Maja Daniels: In the mists of Älvdalen, Sweden (Financial Times Magazine) A world away from cosmopolitan Stockholm lies a strange forested land with an ancient language and a singular sense of quiet desolation

Antonio Olmos: Murder Most Ordinary (Guardian) Photographer Antonio Olmos spent two years visiting the site of every murder that took place within the M25 in London.

Ben Roberts: Higher Lands (Document Scotland) Growing up in the Scottish Highlands

Marco Kessler: Belarus: An Uncertain Winter (Vimeo) Belarus, once an integral frontier of the USSR, remains steeped in the Communist legacy, which ruled the daily lives of the nation for over 70 years.

Alexis Lambrou: Teaching for Life (NYT Lens) Young Brooklyn high school teacher, whose life revolves around her students and colleagues at a Brooklyn public high school.

Arthur Nazaryan: Ballet Competitions (NYT Lens) 12-year-old Russian immigrant’s efforts to become a ballerina

Amanda Rivkin: Post-Racial America Road Trip (VII Mentor)

Tommaso Protti: The Youth of Amid (Reportage by Getty Images Emerging Talent) Turkey

Adam Patterson: Another Lost Child (CNN Photo blog)

Patrick van Dam: Dreams of new homes abandoned in Greece (CNN Photo blog)

Articles

Eugene Richards

The Hero in the Cowboy Hat: Carlos Arredondo’s Story by Eugene Richards (LightBox)

A Photographer’s View of the Carnage: “When I Look at the Photos, I Cry” (LightBox)

Herald photographer details night Boston will never forget (Boston Herald)

News Media Weigh Use of Photos of Carnage (NYT)

A Blurry Double Standard? A Photo from the Boston Marathon Bombing (PhotoShelter)

Tragedy and the Role of Professional Photojournalists (Chicago Tribune Assignment Chicago blog)

On That Iconic Photo from the Boston Marathon Bombings (BagNewsNotes)

Runner, spectator get photos of marathon suspects (AP Big Story blog)

Photo Essay Of Boston Bomber Was Shot By Former BU Student (NPPA)

Courtesy HBO

Peter van Agtmael: Revisiting Memory and Preserving Legacy: Tim Hetherington and Chris Hondros (LightBox)

Tim Hetherington, Indelible on Film (NYT Lens)

A War Photographer Who Was More Than Just an Adrenaline Junkie (Mother Jones)

Killed documentary maker Tim Hetherington remembered in film (BBC) video

Which Way is the Frontline?: a documentary tribute to Tim Hetherington (BJP)

Tim Hetherington’s Photograph’s at the Yossi Milo Gallery (Photo Booth)

Honoring Chris Hondros (Getty Images blog)

Manu Brabo / AP

The 2013 Pulitzer Prize Winners: Associated Press Coverage of Syria (LightBox)

The Pulitzer Prizes Winners (Pulitzer)

Photographs of Syria Sweep Pulitzer Prizes (NYT Lens)

Javier Manzano / AFP

A Pulitzer picture first day on the job (AFP Correspondent blog) Photograph taken by Javier Manzano in the embattled Syrian city of Aleppo on October 18, won the Pulitzer Prize for feature photography.

Witness to Newtown’s tragedy (Reuters TV) On December 14, 2012 a gunman opened fire on Sandy Hook Elementary School, leaving 26 dead, including 20 young children. Reuters photographers share their experience covering the story that devastated Newtown, Connecticut and the rest of the country.

David Guttenfelder / AP

Photographer chronicles life in North Korea (NBC)  In spite of the angry rhetoric, life in North Korea goes on as normal – or at least what passes as normal in this isolated state. AP photographer David Guttenfelder has been chronicling life in North Korea for years.

Those photos of young Kim Jong Un performing in ‘Grease’ are probably of his brother (The Washington Post)

I almost died in Syria (Salon)

Olivier Voisin’s last images (Paris Match L’instant)

Taking RISC: Program Trains Reporters How To Save Lives in War Zones (ABC News)

RISC: Training reporters how to save lives (BJP)

French photographer Pierre Borghi escapes four months after kidnapping in Afghanistan (New York Daily News)

John Simon Guggenheim Memorial Foundation awarded Fellowships 2013 (Guggenheim Foundation)

Feisal Omar: “Are you al-Shabaab or soldiers?” (Reuters Photographers blog) Covering Somalia

Featured photojournalist: Christopher Furlong (Guardian)

Anastasia Rudenko (Verve Photo)

Thomas Cristofoletti (Verve Photo)

Challenging an Old Narrative in Latin American Photojournalism (NYT Lens)

Donna De Cesare’s Photo of Violence in El Salvador (NYT Lens)

How the 1962 monsoons inspired Steve McCurry (Phaidon) Forthcoming book, Steve McCurry Untold: The Stories Behind The Photographs, tells how coverage of the Indian rainy season in Life magazine set the Magnum photographer off on a life of photography and far flung travel.

Sebastiao Salgado’s Genesis (BBC)

Sebastião Salgado documents world’s wildernesses in new Genesis exhibition (Guardian)

Sebastião Salgado: Genesis – review (Guardian)

André Kertész: Truth and Distortion, Atlas Gallery, London – review (FT)

Explore Nic Dunlop’s new book Brave New Burma (Panos Pictures blog)

Muhammed Muheisen / AP

Wire Photographer Spotlight: Daily Life by Muhammed Muheisen (LightBox)

A Year Later, Instagram Hasn’t Made a Dime. Was it Worth $1 Billion? (TIME)

Making Art With Tom Waits (NYT Magazine)

The National Geographic Trove (Photo Booth)

Genius in colour: Why William Eggleston is the world’s greatest photographer (The Independent)

Bert Stern’s Beautiful Photography and Less-Beautiful Personal Life, on Screen (The Atlantic) A new documentary shows two sides of the man who took some of the most iconic celebrity photographs of the 20th century: creative genius and womanizer.

“Arnold Newman: At Work” explores photographer through his archive (Harry Ransom Center Cultural Compass blog)

Native Americans: Portraits From a Century Ago (The Atlantic)

Meeting Florida’s Seminoles Through Rediscovered Photos (NPR)

Photographer David Moore’s dingy, deteriorating Derby is the real deal (Guardian) Chronicler of 80′s working-class England peers behind closed doors to capture a community indelibly marked by Margaret Thatcher.

Graham Nash’s best photograph (Guardian) Joni Mitchell listening to her new album

Unsung hero of photography Thurston Hopkins turns 100 (Guardian)

This was England: the photographs of Chris Killip (Guardian) Chris Killip’s study of the communities that bore the brunt of industrial decline in the North East have earned him a nomination for the Deutsche Börse Photography Prize.

Deutsche Börse Photography prize show: mashups and moon walkers (Guardian)

Deutsche Börse photography prize 2013 (Guardian) video | Sean O’Hagan meets the nominees for the annual Deutsche Börse photography prize. They’re all on show at the Photographers’ Gallery in London until June 30.

Estate of Jacques Lowe

When an Archive is Lost: Jacques Lowe’s Rare (And Recently Restored) Look at JFK’s Camelot (LightBox)

The Heart of a Beast: Charlotte Dumas’ Poignant Animal Photography (LightBox)

Teenage Precinct Shoppers by Nigel Shafran: A Look Back to 1990 (LightBox)

The World’s Oldest Photography Museum Goes Digital (Smithsonian)

Pecha Kucha: The art of speed-talking about photography (BJP)

Martin Parr ‘Life’s A Beach’ Exhibit And Book Capture Fun In The Sun From Brazil To Japan (The Huffington Post)

The unseen Lee Miller: Lost images of the supermodel-turned-war photographer go on show (The Independent)

The Surreal World of Nina Leen (Photo Booth)

Rescuing a Photo Prince Vita Luckus From Obscurity (NYT Lens)

How photographers joined the self-publishing revolution (Guardian)

Elaborate Drive-By Photo Studio Takes Pedestrians by Surprise (Wired)

Interviews and Talks

John Tlumacki / The Boston Globe / Getty Images

John Tlumacki (LightBox) Tragedy in Boston: One Photographer’s Eyewitness Account | LightBox spoke with Boston Globe photographer John Tlumacki, who photographed the explosions at the finish line of the Boston Marathon. Tlumacki, who has photographed more than 20 marathons in his 30 years at the Globe, describes the sheer chaos of the scene.

John Tlumacki (Poynter) Globe’s Tlumacki: ‘I am dealing with trauma & trying to keep busy’ following Boston tragedy

Sebastião Salgado (Natural History Museum YouTube) Genesis

Sebastião Salgado (Guardian) A God’s eye view of the planet – interview

Sebastião Salgado (NYT) In Love With My Planet

Sebastião Salgado (Taschen) Two men, one mission: Salgado talks with Benedikt Taschen about the photographic project that changed his life.

Sebastian Junger (Indiewire) On the Value and Cost of War Reporting and Making a Film About His Late ‘Restrepo’ Co-Director Tim Hetherington

Sebastian Junger (NPR) ‘Which Way’ To Turn After Hetherington’s Death

Sebastian Junger (WNYC) The Life and Times of Tim Hetherington

Michelle McNally (Le Journal de la Photographie) The New York Times Director of Photography

James Estrin (Le Journal de la Photographie) NYT photographer and Lens blog editor

Patrick Witty (Zorye Kolektiv)  International Picture Editor at TIME

David Campbell to reveal WPPh multimedia research (Canon Professional Network)

Robin Hammond (NGM) The Moment: Caught in Zimbabwe

Jeff Jacobson (PDN) On Beauty, Ambiguity and Mortality

Yuri Kozyrev (Zorye Kolektiv)

Emilio Morenatti (Zorye Kolektiv)

Anastasia Taylor-Lind (Repor Madrid TV)

Thurston Hopkins (Guardian) On his 100th birthday this week, one of the great photojournalists of the 20th century, Thurston Hopkins, talks about his career as a photographer at Picture Post

Pari Dukovic (Wonderland magazine)

Mike Brodie (LA Times Framework blog)

Danielle Levitt (Dazed Digital) Danielle Levitt’s Favourite Tribes

Mikko Takkunen is an associate photo editor at TIME.com.

A friend has just made his first short film – Beer Scooter by Nathan Cooper. A lighthearted take on how you get home when you’ve had one too many to remember. Beautifully shot Nathan, I’ve ridden that scooter home many at time :)

In today’s pictures, laborers move vegetables in a market in India, a woman in Brazil paints masks to look like Pope Francis, a police man stands guard at a baseball game in Atlanta, and more.

The Art of Walking: a field guide is the first extensive survey of walking in contemporary art. Combining short texts on the subject with a variety of artists work, The Art of Walking provides a new way of looking at this everyday subject continue

Everything I Can See From Here has a simple quality that is all too rare in animated filmmaking: mystery. As a viewer, I had no idea where the short was headed, but it was an engaging journey in which I was kept thoroughly engaged by the narrative skills of filmmakers Sam Taylor and Bjorn-Erik Aschim. They made the film as a personal project at the London-based collective The Line. It’s a timely piece, too, in that it serves as a reminder that hand-drawn animation is a vital art form that is evolving in exciting and fresh new directions.

CREDITS
Directed by Sam Taylor and Bjorn Aschim for The Line
Produced by Fritzi Nicolaus
Sound & Music by Box of Toys Audio

Animation:
Sam Taylor
Bjorn-Erik Aschim
Adam Hodgson
Alexander Petreski
Dante Zaballa
Geoff King
Hozen Britto
James Duveen
Jim Round
Kristian Antonelli
Tim McCourt
Wesley Louis

3D Modelling and Rigging
David Hunt

3D Modelling
Max Taylor

3D animation
Max James van der Merwe

Backgrounds
Bjorn-Erik Aschim

Compositing
Bjorn-Erik Aschim
Sam Taylor

Cleanup:
Adam Hodgson
Beth Witchalls
Caspar Rock
Clarice Elliott
Denise Dean
Freya Hotson
Hozen Britto
Hugh La Terriere
Isobel Stenhouse
Jessica Toth
Jose Saturno
Stewart Wagstaff
Tom Loughlin

Microsoft Accounts—the credentials used for Hotmail, Outlook.com, the Windows Store, and other Microsoft services—will soon offer two-factor authentication to ensure that accounts can't be compromised through disclosure of the password alone.

Revealed by LiveSide, the two factor authentication will use a phone app—which is already available for Windows Phone, even though the two-factor authentication isn't switched on yet—to generate a random code. This code must be entered alongside the password.

For systems that are used regularly, it's possible to disable the code requirement and allow logging in with the password alone. For systems that only accept passwords, such as e-mail clients, it appears that Microsoft will allow the creation of one-off application-specific passwords.

Read 2 remaining paragraphs | Comments

Web maps have come a long way. Improved data, cleaner design, better performance, and more intuitive controls have made web maps a ubiquitous and critical component of many apps. They’ve also become one of the mobile space’s most successful transplants as more and more apps are powered by location-aware devices. The core web map UI paradigm itself—a continuous, pannable, zoomable surface—has even spread beyond mapping to interfaces everywhere.

Despite all this, we’ve barely begun to work web maps into our design practice. We create icon fonts, responsive grids, CSS frameworks, progressive enhancement strategies, and even new design processes. We tear down old solutions and build new ones, and even take an extra second to share battle stories in prose and in person. Yet nearly five years since Paul Smith’s article, “Take Control of Your Maps,” web maps are still a blind spot for most designers.

Have you ever taken apart a map? Worked with a map as a critical part of your design? Developed tricks, hacks, workarounds, or progressive enhancements for maps?

This article is a long overdue companion to Paul’s piece. Where he goes on a whirlwind survey of the web mapping stack at 10,000 feet, we’re going to walk through a single design process and implement a modern-day web map. By walking this path, I hope to begin making maps part of the collective conversation we have as designers.

Opinionated about open

Paul makes a strong case for why you might want to use open mapping tools instead of the established incumbent. I won’t retread his reasons here, but I would like to expand on his last: Open tools are the ones we hack best.

There is nothing mysterious about web maps. Take any spatial plane, split it up into discrete tiles, position them in the DOM, and add event handlers for panning and zooming. The basic formula can be applied to Portland, Mars, or Super Mario Land. It works for displaying large street maps, but nothing stops us from tinkering with it to explore galleries of art, create fictional game worlds, learn human anatomy, or simply navigate a web page. Open tools bare the guts of this mechanism to us, allowing us to see a wider range of possibilities.

The mechanics of web maps are not limited to street maps.

We should know the conditions under which map images are loaded and destroyed; we should argue whether map tiles are best positioned with CSS transforms or not; and we should care whether vector elements are drawn with SVG or Canvas. Open tools let us know and experiment with these working details of our maps. If you wouldn’t have it any other way with your HTML5, CSS, or JavaScript libraries, then you shouldn’t settle for less when it comes to maps.

In short, we’ll be working with a fully open mapping stack. MapBox, where I work, has pulled together several open source libraries into a single API that we publish under mapbox.js. Other open mapping libraries that are worth your time include Leaflet and D3.js.

Starting out

I’m a big fan of Sherlock Holmes. Between the recent Hollywood movies starring Robert Downey Jr. and the BBC’s contemporary series, I’m hooked. But as someone who has never been to London, I know I’m missing the richness of place and setting that Sir Arthur Conan Doyle meant to be read into his short stories.

A typical approach would be to embed a web map with pins of various locations alongside one of the Sherlock stories. With this approach the map becomes an appendix—a dispensable element that plays little part in Doyle’s storytelling. Instead, we’re going to expand the role of our map, integrating it fully into the narrative. It will set the stage, provide pace, and affect the mood of our story.

A tale of places

To establish a baseline for our tale, I restructured The Adventure of the Bruce-Partington Plans to be told around places. I picked eight key locations from the original text, pulled out the essential details of the mystery, and framed them out with HTML, CSS, and JavaScript.

A Sherlock Holmes story in text only. View Demo 1.

• The story is broken up into section elements for each key location. A small amount of JavaScript implements a scrolling flow that highlights a single section at a time.
• Our page is not responsive yet, but it contains scaffolding to guard against bad choices that could thwart us. The main text column is fluid at 33.33% and pins to a min-width: 320px. If our content and design flow reasonably within these constraints, we’re in good shape.

Next, we’ll get started mapping. Initially we’ll work on our map separately from our story page to focus on learning key elements of a new technology.

Maps are data

The mapping equivalent of our abridged Sherlock story is a dataset of eight geographic points. GeoJSON, a format for describing geographic data in JSON, is the perfect starting point for capturing this data:

{
    "geometry": { "type": "Point", "coordinates": [-0.15591514, 51.51830379] },
    "properties": { "title": "Baker St." }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.07571203, 51.51424049] },
    "properties": { "title": "Aldgate Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.08533793, 51.50438536] },
    "properties": { "title": "London Bridge Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [0.05991101, 51.48752939] },
    "properties": { "title": "Woolwich Arsenal" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.18335806, 51.49439521] },
    "properties": { "title": "Gloucester Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.19684993, 51.5033856] },
    "properties": { "title": "Caulfield Gardens" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.10669358, 51.51433123] },
    "properties": { "title": "The Daily Telegraph" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.12416858, 51.50779757] },
    "properties": { "title": "Charing Cross Station" }
}

Each object in our JSON array has a geometry—data that describe where this object is in space—and properties—freeform data of our own choosing to describe what this object is. Now that we have this data, we can create a very basic map.

The basics of web mapping. View Demo 2.

• Note that the coordinates are a pair of latitude and longitude degrees. In the year 2013, it is still not possible to find a consistent order for these values across mapping APIs. Some use lat,lon to meet our expectations from grade-school geography. Others use lon,lat to match x,y coordinate order: horizontal, then vertical.
• We’re using mapbox.js as our core open source mapping library. Each map is best understood as the key parameters passed into mapbox.map():
  1. A DOM element container
  2. One or more Photoshop-like layers that position tiles or markers
  3. Event handlers that bind user input to actions, like dragging to panning
• Our map has two layers. Our tile layer is made up of 256x256 square images generated from a custom map on MapBox. Our spots layer is made up of pin markers generated from the GeoJSON data above.

This is a good start for our code, but nowhere near our initial goal of using a map to tell our Sherlock Holmes story.

Beyond location

According to our first map, the eight items in our GeoJSON dataset are just places, not settings in a story full of intrigue and mystery. From a visual standpoint, pins anonymize our places and express them as nothing more than locations.

To overcome this, we can use illustrations for each location—some showing settings, others showing key plot elements. Now our audience can see right away that there is more to each location than its position in space. As a canvas for these, I’ve created another map with a custom style that blends seamlessly with the images.

Illustrations and a custom style help our map become part of the storytelling. View Demo 3, and then read the diff.

• The main change here is that we define a custom factory function for our markers layer. The job of the factory function is to take each GeoJSON object and convert it to a DOM element—an a, div, img, or whatever—that the layer will then position on the map.
• Here we generate divs and switch from using a title attribute in our GeoJSON to an id. This provides us with useful CSS classes for displaying illustrations with our custom markers.

Bringing it all together

Now it’s time to combine our story with our map. By using the scroll events from before, we can coordinate sections of the story with places on the map, crafting a unified experience.

As the user reads each section, the map pans to a new location. View Demo 4, then read the diff.

• The bridge between the story and the map is a revamped setActive() function. Previously it only set an active class on a particular section based on scrolling position. Now it also finds the active marker, sets an active class, and eases the map to the marker’s location.
• Map animation uses the easey library in the mapbox.js API, which implements animations and tweening between geographic locations. The API is dead simple—we pass it the lon,lat of the marker we want to animate to, and it handles the rest.
• We disable all event handlers on our map by passing an empty array into mapbox.map(). Now the map can only be affected by the scrolling position. If users wanted to deviate from the storyline or explore London freeform, we could reintroduce event handlers—but in this case, less is more.

Displaying our fullscreen map together with text presents an interesting challenge: our map viewport should be offset to the right to account for our story on the left. The solution I’m using here is to expand our map viewport off canvas purely using CSS. You could use JavaScript, but as we’ll see later, a CSS-only approach gives us elegant ways to reapply and adjust this technique on mobile devices.

At this stage, our map and story complement each other nicely. Our map adds spatial context, visual intrigue, and an interesting temporal element as it eases between long and short distances.

Maps in responsive design

The tiled, continuous spatial plane represented by web maps is naturally well-suited to responsive design. Web maps handle different viewport sizes easily by showing a bit more or a bit less map. For our site, we adjust the layout of other elements slightly to fit smaller viewports.

Tweaking layout with web maps. View Demo 5, then read the diff.

• With less screen real estate, we hide non-active text sections and pin the active text to the top of the screen.
• We use the bottom half of the screen for our map and use media queries to adjust the map’s center point to be three-fourths the height of the screen, using another version of our trick from Demo 4.

With a modest amount of planning and minimal adjustments, our Sherlock story is ready to be read on the go.

Solve your own case

If you’ve been following the code between these steps, you’ve probably noticed at least one or two things I haven’t covered, like the parameters of ease.optimal(), or how tooltips picked up on the title attribute of our GeoJSON data. The devil’s in the details, so post to this GitHub repository, where you will find the code and the design.

You should also check out:

• The MapBox site, which includes an overview of tiling and basic web map concepts, and MapBox.js docs and code examples.
• Leaflet, another powerful open source mapping library.
• D3.js, a library for powering data-driven documents that has a broad range of applications, including mapping.

This example shows just one path to integrating web maps into your designs. Don’t stick to it. Break it apart. Make it your own. Do things that might be completely genius or utterly stupid. Even if they don’t work out, you’ll be taking ownership of maps as a designer—and owning something is the only way we’ll improve on it.

In today’s pictures, a farmer harvests wheat in India, the world mourns Margaret Thatcher, U.S. Marines prepare to eat a snake, and more.