Indiana Jones and the Lost SVG Map Editor

Maps are great devices for telling stories.

Game of Thrones famously uses a 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 in ‘Raiders of the Lost Ark’, Steven Spielberg was using a similar trick to help us track Indiana Jones’ Boeing seaplane on a map below.

Maps can be powerful on the web too, letting us tie important ideas and numbers to specific geographical areas. This could be anything including:

• Sales
• Subscribers/viewers
• Paid Members
• Regional Offices

But where do you start with creating maps? Screen capturing Google Earth isn’t going to cut it. You could draw a map from scratch, but coastlines are finicky, time-consuming things to create.

Using AMCharts to Make for SVG Maps

AMCharts offers a bunch of really cool JavaScript charting tools, including pie charts, line graphs and bar graphs. But they also have a rather nifty map creation tool in beta called Pixel Map Generator.

The tool is easy to get started with. Controls at the bottom of the app let you zoom, position and frame the map to your liking, so if you only need a small area, that’s fine. A dropdown lets you select individual countries.

A toolbar on the left lets you add routes, re-color elements, annotate and label your map. Pulling together the basic components of a useful map takes minutes.

I think the really cool part are the export options. PNG, HTML (JS) or SVG. That last option is the one I like. Typically SVG written by graphics editors can be very messy and unwieldy. AMChart seems to write clean, well-structured SVG files. You can save that file 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, but I wouldn’t advise it – the file will get rewritten and you’d lose a lot of its elegance.

[author_more]

[/author_more]

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.

Here’s one I prepared earlier.

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.

Continue reading %Indiana Jones and the Lost SVG Map Editor%

by Alex Walker via SitePoint