Web-map with mouse-over effect

Question

under photoshop, I have different layers, each representing a region and a background which the country. I would like to make an animated map for the web, that is when the mousse is over a region, it is highlighted and when a region is clicked, the user is redirected to another web page (concerning the region). I gess the way to do this is to use flash, however I am opened to other suggestions.

So how would you deal with this problem?

ps: I have no knowledge of flash yet

Answer 1

Here is a hacky approach that I used to create a similar map. I used MapServer to pre-generate all of the images, but the actual app runs completely on the client (browser) side using javascript/jquery and a html imagemap.

Note that this may not scale very well due to the number of images that have to load to the client.

http://www.flatlandmaps.com/lab/watersheds/watershedmap.html

Here is an example of the same app, only I am using html-sprites for the watershed images. The upload image is large, but there is only one image. The code is even more kludgy than in the original example, but it works...

http://www.flatlandmaps.com/lab/watersheds/sprite-hack.html

Answer 2

You may be starting out down a difficult path if you ever decide to expand your maps beyond a simple "click on image to open relevant document" page. If that is all you need then go with the image map approach outlined by Julien/DavidF.

Otherwise I would recommend using GIS software to create your spatial features / layers rather than Photoshop. There are plenty of opensource choices out there in which you can create new data, and digitise over freely available country datasets.

Once you have your data in a GIS format you can use the OpenLayers library to display and query data.

You can get what you need built fairly quickly using the starting examples. You will also have a huge library of functions available as your system develops.

Once your data is in a format that can be added to OpenLayers you can add hover and select functionality. It is then your choice what happens when a user selects a feature - open a new page, show data about the feature etc.

http://openlayers.org/dev/examples/highlight-feature.html

You do not need to create or gather your own background mapping as you can use data from several online providers:

http://openlayers.org/dev/examples/baseLayers.html

Answer 3

Take a look at Raphael JS library and its Australia map example: http://raphaeljs.com/australia.html

It uses SVG rendering, so no Flash is needed. Works on all popular browsers.

I've started working on a map-oriented JS library which relies on Raphael to do its magic. I haven't implemented mouse events yet, but this will be done soon: http://beta1234.com.sunflower.arvixe.com/geosomnia/

Answer 4

I recommend that you use something called image map in HTML combined with some easy javascript for the mouseover effect.

This solution is quite simple technically, but requires that you make one image per highlighted region in addition to the non-highlighted map. You also have to do a bit work to define the coordinates correct in the HTML image map. I recommend that you use Photoshop to find out what the relevant coordinates should be.

The clickable map regions are defined by by an HTML image map as a polygon defined by pixel coordinates (pairs of x,y) relative to the top-left of the image, and in right order in a clock-wise direction. Each polygon _{^{(<area ...>)}} can contain as many coordinates as you like.

The highlight effect would have to be copies for each region of the main map image with the hovered region highlighted. Technically, each region image will replace the main image when hovering the image using javascript.

In this example I have an image file named map.png which is the map that defines the non-highlighted map, and 2 map regions defined by highlighted version of region1 (with image file name map_region1.png) and region2 (with image file name map_region2.png), which each file is a copy of map.png but with the respective region highlighted _{^{(Based on what you said in the question, I assume you know how to do this in Photoshop)}}.

_{In my example, the polygons in the HTML image map is just random polygons that define two areas that don't overlap....}

<script type="text/javascript">
function showRegion(regionName){
  var mapContent = document.getElementById('mapContent');
  if(regionName!=null){
    mapContent.src = 'map_' + regionName + '.png';
  }else{
    mapContent.src = 'map.png';
  }  

}
</script>
<img src="map.png" id="mapContent" usemap="#regions" border="0">
<map name="regions">
  <area onmouseover="showRegion('region1');" 
      onmouseout="showRegion(null);" 
      shape="polygon" 
      coords="0,1, 15,5, 27,17, 12,26, 10,38" 
      href="http://www.regions.com/region1.html" />
  <area onmouseover="showRegion('region2');" 
      onmouseout="showRegion(null);" 
      shape="polygon" 
      coords="40,51, 45,51, 87,57, 82,76, 49,98" 
      href="http://www.regions.com/region2.html" />
</map>

Answer 5

Flash approach to the problem might be through StatPlanet.

Answer 6

Another solution is to combine the HTML image map approach with a product called http://www.mapsalive.com that I developed. That way you can use area tags to define your shapes (see code sample in answer from awe) and then import them into MapsAlive and let it do the work of highlighting the shapes, displaying information, and adding clickable links that let you redirect to other pages.

There are tools that make it easy to create image maps. One I like is called MapEdit ($15) but just Google "HTML Image Map" to find others and learn more about image maps.

Whichever solution you choose, consider how you will maintain the map if you need to update it. If this is a one-off thing where you'll implement it and never touch it again, any solution you can get to work might be okay. But if it will be updated frequently, pick a solution that is easy to maintain.