Working Smarter : Maps

CERN’S Large Hadron Collider Portrayed via Google Maps Overlay in SmartDraw 2009

Aaron Stannard — Tue, 09 Sep 2008 11:30:00 GMT

This is a guest article by a fellow SmartDraw employee, Ben Torrence.

There’s been a lot of talk about the Large Hadron Collider at CERN’s new Nuclear Research facility.

This Large Hadron Collider, or LHC, is supposed to be big. Really big. The circumference of the tunnel through which these light speed protons will traverse is roughly 17 miles. By the time I’d heard about it, my curiosity was piqued.

I hopped on Google, assuming I’d be able to find a map of the new CERN facilities, something that would put its scale in perspective. However, I found nothing. We live in the age of Google Maps, an age where any kid with 10 dollars and access to an Internet café can find take capture satellite images of everything ranging from the Pentagon to the Pyramids. Despite all this information that Google puts into our hands I couldn’t find a single scaled image of the perimeter of the LHC on a satellite overlay… but I work at SmartDraw.

Searching official CERN sites, I was able to pull all the images together I needed. Such as CERN facilities on a road map and PDF maps of specific CERN sites.

Once I had these, it was a simple matter of importing a Google satellite map, and editing it in SmartDraw. SmartDraw has a great new feature called Live Maps. SmartDraw itself interfaces with Google Maps and allows you to import images directly. Once imported, you can place markers, set transparent overlays, and add notes and hyperlinks to any object on the map.

On my map are 16 particular sites; named, and linked to their respective PDF detailed maps on CERN’s official site – just click on the red thumbnails to view those more detailed maps. Everything is to scale. I was able to take my Live Map in SmartDraw and export it as HTML, which means that the links are still preserved.

If you’d like to play around with our Google Maps integration and our HTML export capabilities then you can download a free trial of SmartDraw 2009.

If you liked this post, make sure you subscribe to our RSS feed or follow us on Twitter.

How To Build An Interactive Electoral Map

Laurence — Mon, 28 Jan 2008 23:08:00 GMT

The Primary Elections Map I refer to throughout this article is located here. You should be able to make something like this (or better) by the end of this article.

Traditionally, making interactive graphics for the web is a complex process that goes something like this: A designer takes an image and creates an image map using Dreamweaver or a specific image map tool. The image map, which is simply a set of tagged coordinates, allows a specific section of the original image to act as a hyperlink. This allows a piece of the whole (a state within the country image, for example) to be independently clickable. Using some coding magic, the independent sections can be made to change color on mouseover, take you to a new page when clicked, and a whole host of other things. This is a lot of work for someone trying to put up a quick interactive flowchart, map, or floorplan.

I was able to use SmartDraw and MapsAlive to automate the process somewhat. It wasn't painless, but it was a lot easier than doing it all by hand. Both products have free trials so you can test this out yourself. Chances are, you can find your way to SmartDraw's website (hint: there's a link in the right sidebar). MapsAlive is located here.

How To

First, I imported an image of the US (below) into MapsAlive followed by uploading the corresponding image map of the 50 states. I have attached the 50 states image map to this post since that is not automated by either product. If anyone knows of a product that exports both a complex image and its image map, let me know.

Once that was done, I updated the layout and appearance of the map and the corresponding "markers" - the individual clickable areas (in this case, the states). I differentiated the states that had already held their primary elections by making them different color. On mouseover, each state is represented by a "slide" that shows up below the map. This was the basic slide image for a race that hadn't finished:

Finally, I supplemented each state slide with some basic textual information about the date of the primary and the winners' names. Here's a screenshot of the MapsAlive interface once most of the information was filled in:

MapsAlive also hosts the map (or "tour", as they call each project) on their own servers. You can either embed the tour on your own website or visit the direct link. For example, the direct link to my Primary Map is here.

Conclusion

It's still not point-and-click simple to create a high-quality electoral map from scratch. Using smaller markers, like stars or circles, would eliminate the need for image maps, greatly decreasing the difficulty level, but would eliminate the elegance of pointing the mouse anywhere on the state to get a result. That being said, using this method still beats anything else out there. And of course, there are applications for this method beyond simple maps.

If you have a better way of creating interactive graphics, or even a spiffy example, leave a comment.

2008 US Primary Elections

Laurence — Mon, 21 Jan 2008 19:55:00 GMT

I was able to make this primary map in a few hours (a how-to is coming soon) and I wanted to share it. Sure it's not quite as pretty as the Time or Newsweek versions but I think it does a decent job of capturing the appropriate look and feel. I'm also sure it took them a LOOONG time to put their maps together whereas mine was a relatively quick solution using SmartDraw and MapsAlive.

~~You can use your mouse to drag the map around within the bordered area. Unfortunately, the map is wider than the column that I posted it in.~~ [Ed: fixed]

Be sure to check back here since I'll be updating this map as results come in. What other information would be useful besides the winner? How could I make this map better?

5 Cool And Unique Ways To Use Maps

Laurence — Wed, 28 Nov 2007 18:23:00 GMT

The explosion of mapping software, especially now with the convenient Google Maps API, have made it easier than ever to get detailed, accurate, and up-to-date visual data of geography and spatial relationships. For most, this development has gone unnoticed, besides the occasionally useful online driving directions. Embedded maps and satellite images provide clarity and context. Here are some uses you have probably never thought of for using maps and satellite images:

1) Satellite photos as a starting point.

Early-stage building plans benefit from geographical context. You could even use a satellite photo of your backyard as a starting point for landscape design.

2) Custom thematic maps.

These can range from complex sales territory maps to simply mapping the locations of new restaurants you want to try and posting it on your refrigerator.

3) Background images.

Charts about populations, birth/death rates, mortgages, and other geographically oriented statistics benefit from the extra visual impact.

4) Show Your Customers.

If you run a local business or a any group that operates on a smaller, community-by-community basis you can show your customers a tangible representation of your reach. This is useful whether you need to show where all the sites are for a soccer tournament, break down target locations for a contractor, tag secret surf spots, etc.

5) Where am I?

It's never a bad idea to brush up on your geography.

What other unique uses for maps can you think of? Leave a comment.