Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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.

Thank you.

share|improve this question
3  
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
add comment

3 Answers 3

up vote 11 down vote accepted

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>
share|improve this answer
    
+1 for choosing openlayers –  CaptDragon Feb 19 '12 at 4:11
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.