Geo Map Data to act with

Question

I´m searching some providers or frameworks or something that can deliver a map like here: http://www.skiresort.de/skigebiete/europa/oesterreich/

I can see that on this page there are different images, so when you hover over one country, the whole image changes. Futher they are using the "map" htmltag to specify the hover regions.

I wonder if they draw the polygons by hand or if there is some tool, as i said, some framework or something.

I´m searching for data only for austria. Thanks for any help and sorry, I never did something like this

I was searching some posts here on SO, like ArcGIS, I think thats to complicated for what i need, i realy just need the same like the example above, so exactly what i need is a map of austria, and their countries and some kind of mapdata.

Answer 1

It sounds like the main question is where you can get free boundary data for Austria. Two good sources for public-domain map data:

• http://www.naturalearthdata.com (great dataset, but mostly SHP files - not so useful if you don't have a GIS application)
• http://commons.wikimedia.org/wiki/Atlas_of_the_world (Wikimedia Commons Atlas of the World - lots of maps in a variety of formats)

In fact, it looks like all the images you need can be found here: http://commons.wikimedia.org/wiki/Atlas_of_Austria - the different states are already highlighted for you. These are SVG files, so you can open them in Illustrator or Inkscape and change the colors as needed.

After that, I agree with Brian: There probably isn't an application that can easily create the image map for you, so you'll need to do it by hand. Fireworks or ImageReady are standard tools for this, and should both provide a UI for doing the rollover the way you want. You might want to put all the highlights in one image and use a CSS Sprite approach - this is a good way to make the map fast and responsive.

Answer 2

The <map> element refers to an ImageMap, not a geographical map. The idea behind an imagemap is that you have an image, and you want different areas of the image to be clickable. So, you use coordinates to define the clickable areas (each in its own <area> tag), and then provide a URI for the areas you've defined.

When you specify your image with the <img> tag, you set the usemap attribute to specify the map definition that applies to the image.

There are tools online as well as in may popular web design and graphics programs that you can use to create image maps. Off the top of my head Adobe Fireworks provides a relatively intuitive interface for creating image maps; I'm not sure about any other programs but I'm sure you can find something that works for you.