Design & UX
Article

Indiana Jones and the Lost SVG Map Editor

By Alex Walker

Maps are great devices for telling stories.

Game of Thrones titles

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.

Raiders of the Lost Ark ride line on the map.

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.

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.

Map tools

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.

More:
  • http://careersreport.com Gabriella Wilson

    This is how it is possible to earn sixty-five bucks /hour… After being without work for half a year , I started making cash over this site and today I am very$ satisfied. 3 months have passed since being on my new job and my income is around five thousand bucks/monthly -Check internet website i mentioned by following link on MY(PROFILE)PAGE

  • simon codrington

    Thanks for the article, it was an interesting read :)

    • http://sitepoint.com Alex Walker

      Thanks @simoncodrington:disqus. That Amcharts site has some pretty useful resources.

  • http://sitepoint.com Alex Walker

    Thanks Antanas,

    I’m quite impressed with Amcharts. There are so many tools generating bad SVG out there, but Amchart SVG is very neat and sensible. Keep up the good work.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.