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

Question

I have one tourist map (ski resort) with buildings and roads in .jpg format. It's problem because north is down and south is up (it is that kind of drawn map with drawn mountain up on map where is actually south).

I need to put it on the website and also put some pins on it.

What tools and ways do you recommend me? It needs to be done fast so please give me some simple solutions if possible.

Gimp? Or do you have any other requirements that you didn't tell us? — underdark, Feb 18 '12 at 23:42
I need to add pins like I said, but with info windows. And later to have option to group those pins so I can select for example restaurants and show only those pins which will show restaurants. — againstflow, Feb 18 '12 at 23:46

score 11 · Accepted Answer · answered Feb 19 '12 at 03:21

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>

score 8 · Answer 2 · answered Feb 19 '12 at 10:47

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.

score 5 · Answer 3 · answered Feb 20 '12 at 16:40

5

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.

answered Feb 20 '12 at 16:40

Mr_Chimp

3,773
6
37
51

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

3 Answers3