Coastal Views of the United Kingdom

View Live Map

About the map

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. The animation emphasises 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

  • Generalise the coastline of the country/landmass

    Use the Simplify Polygon tool to generalise the coastline. Use a coarse simplification to generate a reasonable set of segments from which to generate views.
    Learn about Simplify Polygon tool

  • Draw and perfect your line segments

    For line segments in coastline, find the centre point and draw a small line perpendicularly across the segment. Clip the lines intersecting with land to preserve those facing out to sea. Calculate bearings between the remaining lines and the simplified coastline.

  • Use Bearing Distance to Line tool to input bearings

    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 some flat 2D maps, these lines appear curved.
    Learn about bearing distance to line

  • Increase contrast of the basemap

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

  • Produce a finished map

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

    CSS3 Animations
Previous
Next

Requirements

  • Data and software

    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. Software used: ArcGIS Pro, ArcGIS Maps SDK for JavaScript.

    ArcGIS Living Atlas - World Countries
    NASA’s 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 is required.

  • 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.
Previous
Next

Tips and tricks

  • Make the lines stand out

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

  • Don’t overcomplicate the legend

    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?”

  • Limit the zoom level

    Avoid showing the overly simplified coastline in too much detail.
Previous
Next

Resources

Previous
Next

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.

Related maps

Previous
Next

Start making maps with a free trial of ArcGIS

Try ArcGIS