Maps are great devices for telling stories.
Game of Thrones famously uses that animated map in the title sequence to help set the epic tone of their universe. Casablanca sets up its opening scenes with a map centered on Paris that traces a thick black line south to Morocco.
Forty year later Steven Spielberg was using a similar trick in ‘Raiders of the Lost Ark’, to help us track Indiana Jones’ Boeing seaplane from San Fransisco to Nepal. The red line became a trope of all the Indiana Jones movies.
More recently The Muppets played with the idea by having a ‘traveling by map’ button in their car.
Maps on the Web
Maps can be powerful on the web too, letting us tie important ideas and statistic to specific geographical areas. This could be anything including:
- Sales numbers
- Paid-up Members
- Regional Offices
But where do you start when creating a new map? Screen capturing Google Earth or Open Street Maps isn’t going to cut it. You could draw a map from scratch, but coastlines are notoriously finicky, time-consuming things to create.
Using AMCharts to Make for SVG Maps
This tool is easy to get started with. Controls in the bottom panel of the web app allow you to zoom, position and frame the map to your liking. A separate dropdown lets you select individual countries. This panel also lets you set default land and ocean colors
A toolbar on the left lets you re-color map components, draw routes, and annotate and label your map. Pulling together the basic components of a useful map literally takes minutes.
I think the really cool part is the export options. PNG, HTML (& JS) or SVG. The PNG is a good fallback and the HTML/JS is nice to embed, but that last option is the one I like.
Typically SVG generated by graphics editors is very messy and unwieldy, but AMCharts seems to write very clean, well-structured SVG files. You can copy this SVG code, paste it into a new text file, save it as SVG and embed it straight into your next site/web app.
But you can also do more.
You could open this SVG map directly in Adobe Illustrator or Inkscape, but I would advise against it – the file will get instantly rewritten and you’d lose a lot of that natural elegance.
A more interesting idea is to copy the SVG code and paste it straight into a Codepen HTML panel. Even if you know zero about SVG markup, you’ll recognise it as a ‘HTML-like file’ that you can start manipulating and styling with CSS. Start hacking it!
Here’s one I prepared earlier: http://codepen.io/SitePoint/pen/dYGxPE
Like HTML, you can add classes and IDs to elements and then target those elements with CSS – even transforms, animations and transitions.
That’s a lot of design freedom to play with and AMCharts does all the hard map-drawing bits.
Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 40+ of SitePoint's book covers.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns