What tools do you recommend for this kind of web map?

Using OpenLayers, you can place a map anywhere on your website that shows your jpg map alone (no base layers). The image will have to be as large a resolution as you can possibly get! If not, you will have trouble with zooming in without getting a terribly pixelated image.

Here is the example code that you can build your map with. You will also need to look at the OpenLayers Markers examples to see how you can integrate pins onto your map ;) Documentation on that here.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ski Map</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
    map {
        width: 800px;
        height: 500px;
    }
</style>
<script src="../OpenLayers.js"></script>
<script type="text/javascript">
        var map;
        function init(){
            map = new OpenLayers.Map('map');

            var graphic = new OpenLayers.Layer.Image(
                'Ski Map',  //layer alias
                'http://link.to.ski.map.jpg',  //link to your ski map image
                new OpenLayers.Bounds(-180, -88.759, 180, 88.759),  // global bounds, dont change this
                new OpenLayers.Size(resolutionX,resolutionY)  //resolution of your image in X,Y pixel size
            );
            map.addLayer(graphic);  //add image layer to map
            map.addControl(new OpenLayers.Control.LayerSwitcher());  //add some map controls
            map.zoomToMaxExtent();  //zoom out to ski maps extent
        }
</script> 
</head>
<body onload="init()">
    <div id="map"></div>
</body>
</html>

You could also use a simple imagemap. It requires less coding (actually it's zero code, just markup), the downside is that imagemaps are not zoomable.

There are also web-based tools (search Google for others) to edit the image map, thus relieving you from the pain of hand typing the areas.


If it is possible to convert the JPG to vectors you could use a clickable SVG image.

Using OpenLayers or similar might be overkill, unless you need to be able to scroll around, zoom or add points dynamically.

Tags:

Web Mapping

Recent Posts