]> git.openstreetmap.org Git - rails.git/blob - public/javascripts/map.js
Add a stylesheet targeted at print media to get nice printouts.
[rails.git] / public / javascripts / map.js
1 var map;
2 var markers;
3 var popup;
4
5 function createMap(divName) {
6    OpenLayers.Util.onImageLoadError = function() {
7       this.src = OpenLayers.Util.getImagesLocation() + "404.png";
8    }
9
10    map = new OpenLayers.Map(divName,
11                             { maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
12                               numZoomLevels: 19,
13                               maxResolution: 156543,
14                               units: 'm',
15                               projection: "EPSG:41001" });
16
17    var mapnik = new OpenLayers.Layer.TMS("Mapnik",
18                                          ["http://a.tile.openstreetmap.org/","http://b.tile.openstreetmap.org/","http://c.tile.openstreetmap.org/"],
19                                          { type: 'png', getURL: getTileURL, displayOutsideMaxExtent: true });
20    map.addLayer(mapnik);
21
22    var osmarender = new OpenLayers.Layer.TMS("Osmarender",
23                                              "http://tah.openstreetmap.org/Tiles/tile.php/",
24                                              { type: 'png', getURL: getTileURL, displayOutsideMaxExtent: true });
25    map.addLayer(osmarender);
26
27    markers = new OpenLayers.Layer.Markers("markers", { visibility: false });
28    map.addLayer(markers);
29
30    map.addControl(new OpenLayers.Control.LayerSwitcher());
31
32    return map;
33 }
34
35 function getTileURL(bounds) {
36    var res = this.map.getResolution();
37    var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
38    var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
39    var z = this.map.getZoom();
40    var limit = Math.pow(2, z);
41
42    if (y < 0 || y >= limit)
43    {
44      return OpenLayers.Util.getImagesLocation() + "404.png";
45    }
46    else
47    {
48      x = ((x % limit) + limit) % limit;
49
50      var url = this.url;
51      var path = z + "/" + x + "/" + y + "." + this.type;
52
53      if (url instanceof Array)
54      {
55         url = this.selectUrl(path, url);
56      }
57
58      return url + path;
59    }
60 }
61
62 function getArrowIcon() {
63    var size = new OpenLayers.Size(25, 22);
64    var offset = new OpenLayers.Pixel(-30, -27);
65    var icon = new OpenLayers.Icon("/images/arrow.png", size, offset);
66
67    return icon;
68 }
69
70 function addMarkerToMap(position, icon, description) {
71    var marker = new OpenLayers.Marker(position, icon);
72
73    markers.addMarker(marker);
74    markers.setVisibility(true);
75
76    if (description) {
77       marker.events.register("click", marker, function() { openMapPopup(marker, description) });
78    }
79
80    return marker;
81 }
82
83 function openMapPopup(marker, description) {
84    closeMapPopup();
85
86    popup = new OpenLayers.Popup.AnchoredBubble("popup", marker.lonlat,
87                                                sizeMapPopup(description),
88                                                "<p style='padding-right: 28px'>" + description + "</p>",
89                                                marker.icon, true);
90    popup.setBackgroundColor("#E3FFC5");
91    map.addPopup(popup);
92
93    return popup;
94 }
95
96 function closeMapPopup() {
97    if (popup) {
98       map.removePopup(popup);
99       delete popup;
100    }
101 }
102
103 function sizeMapPopup(text) {
104    var box = document.createElement("div");
105
106    box.innerHTML = text;
107    box.style.visibility = "hidden";
108    box.style.position = "absolute";
109    box.style.top = "0px";
110    box.style.left = "0px";
111    box.style.width = "200px";
112    box.style.height = "auto";
113
114    document.body.appendChild(box);
115
116    var width = box.offsetWidth;
117    var height = box.offsetHeight;
118
119    document.body.removeChild(box);
120
121    return new OpenLayers.Size(width + 30, height + 24);
122 }
123
124 function removeMarkerFromMap(marker){
125    markers.removeMarker(marker);
126 }
127
128 function getMapLayers() {
129    var layers = "";
130
131    for (var i=0; i< this.map.layers.length; i++) {
132       var layer = this.map.layers[i];
133
134       if (layer.isBaseLayer) {
135          layers += (layer == this.map.baseLayer) ? "B" : "0";
136       } else {
137          layers += (layer.getVisibility()) ? "T" : "F";
138       }
139    }
140
141    return layers;
142 }
143
144 function setMapLayers(layers) {
145    for (var i=0; i < layers.length; i++) {
146       var layer = map.layers[i];
147       var c = layers.charAt(i);
148
149       if (c == "B") {
150          map.setBaseLayer(layer);
151       } else if ( (c == "T") || (c == "F") ) {
152          layer.setVisibility(c == "T");
153       }
154    }
155 }
156
157 function mercatorToLonLat(merc) {
158    var lon = (merc.lon / 20037508.34) * 180;
159    var lat = (merc.lat / 20037508.34) * 180;
160
161    lat = 180/Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180)) - Math.PI / 2);
162
163    return new OpenLayers.LonLat(lon, lat);
164 }
165
166 function lonLatToMercator(ll) {
167    var lon = ll.lon * 20037508.34 / 180;
168    var lat = Math.log(Math.tan((90 + ll.lat) * Math.PI / 360)) / (Math.PI / 180);
169
170    lat = lat * 20037508.34 / 180;
171
172    return new OpenLayers.LonLat(lon, lat);
173 }
174
175 function scaleToZoom(scale) {
176    return Math.log(360.0/(scale * 512.0)) / Math.log(2.0);
177 }