Indiana Jones and the Lost SVG Map Editor
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
- Subscribers/viewers
- 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
AMCharts.com offers a bunch of really cool JavaScript charting tools, including pie charts, line graphs and bar graphs. But they also have a less well known, but very nifty map creation tool in beta called Pixel Map Generator.
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
See the Pen dYGxPE by SitePoint (@SitePoint) on CodePen.
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.
