Coastal Views from the United Kingdom

Why We Love It

Joy from this map comes in stages. For immediate appeal, click the “Reveal” button and watch as lines slowly radiate away from the UK coast and move across the globe. It’s not at all gimmicky. The animation emphasizes view lines. Each point on one coastline leads to a point on an opposite coastline that you could see - if not for long distances and the earth’s curvature. Upon closer inspection, you can interact with each view line. We love how this map entices you to venture along with view lines, see where they go and how far they travel.

Why It Works

The simplicity of this map makes it effective. A dark imagery basemap provides an ideal backdrop for striking bright green view lines. The thin view lines are partially transparent. En masse, the density of lines nearest the UK coastline appear as a bright glow. As longer view lines travel farther, they appear more subdued. Curving lines show the power of map projections. Although the information about this map is very much global in nature, it would have less appeal in 3D. Instead, swooping curves on a familiar Mercator projection work to reveal surprises.

Important Steps

Generalize the coastline of the country or landmass with the Simplify Polygon tool. Use a coarse simplification to generate a reasonable set of segments from which to generate views.

For each line segment in the simplified coastline, find the center point and draw a small line perpendicularly across the segment. Clip the portion of the lines that intersect with the land to preserve only those facing out to sea.

Calculate bearings between the remaining lines and the simplified coastline.

Input these bearings to the Bearing Distance To Line tool to generate geodesic view lines from each coastal segment. Geodesic lines are the shortest distance between two points on the surface of the globe. On a flat 2D map these lines appear curved depending on the map projection.

Desaturate and darken the basemap to increase contrast with the view lines.

Use the ArcGIS API for JavaScript and CSS3 Animations to produce the finished map, including the distance box and the animation of the lines.

Requirements

Data

The landmass data came from Esri’s Living Atlas World Countries feature layer. The basemap is derived from a NASA Visible Earth Blue Marble image.

Analysis

The critical step for analysis is deciding how many arching line segments to show, which is driven by the amount of line simplification applied to the coastline: Each line segment of the UK coast creates an arc across the water so some trial and error was required to get a visually pleasing density.

Time

Building a geoprocessing model to calculate the coastal view lines took several days. The basemap and custom JavaScript application took a little longer. The final piece took several weeks to complete.

Tips

Use transparent lines above a subdued basemap to ensure the lines take center stage, but do not completely obscure the map in dense areas.

Tips

Keep the legend simple and dynamic—format it to show exactly what interests the viewer. In this case, it answers the questions, “How far?” and “Where?”

Tips

Limit the zoom level to avoid showing the overly simplified coastline in too much detail.

Map Author

Ben Flanagan

As a cartographer at Esri, I design and develop interactive maps and stories for the British media. These pieces have been featured on websites including The Guardian, The Times, BBC News, Mashable and Huffington Post.