Use asset_path to find the arrow icon
[rails.git] / app / assets / javascripts / map.js.erb
1 var epsg4326 = new OpenLayers.Projection("EPSG:4326");
2 var map;
3 var markers;
4 var vectors;
5 var popup;
6
7 var nonamekeys = {
8    'openstreetmap.org': '2f59745a6b525b4ebdb100891d5b6711',
9    'www.openstreetmap.org': 'fd093e52f0965d46bb1c6c6281022199',
10    'openstreetmap.com': '4c60e7f5f31c576a9bb8da71c8d61152',
11    'www.openstreetmap.com': '142f25a0770a51a9a400b3513834a199',
12    'openstreetmap.net': '687c58fd1d715596bfc94abe653d8ac0',
13    'www.openstreetmap.net': '0bd1654141c85d30b9c2ccdb5302f2e4'
14 };
15
16 function createMap(divName, options) {
17    options = options || {};
18
19    map = new OpenLayers.Map(divName, {
20       controls: options.controls || [
21          new OpenLayers.Control.ArgParser(),
22          new OpenLayers.Control.Attribution(),
23          new OpenLayers.Control.LayerSwitcher(),
24          new OpenLayers.Control.Navigation(),
25          new OpenLayers.Control.PanZoom(),
26          new OpenLayers.Control.PanZoomBar(),
27          new OpenLayers.Control.ScaleLine({geodesic: true})
28       ],
29       units: "m",
30       maxResolution: 156543.0339,
31       numZoomLevels: 20,
32       displayProjection: new OpenLayers.Projection("EPSG:4326")
33    });
34
35    var mapnik = new OpenLayers.Layer.OSM.Mapnik(i18n("javascripts.map.base.mapnik"), {
36       keyid: "mapnik",
37       displayOutsideMaxExtent: true,
38       wrapDateLine: true,
39       layerCode: "M"
40    });
41    map.addLayer(mapnik);
42
43    var osmarender = new OpenLayers.Layer.OSM.Osmarender(i18n("javascripts.map.base.osmarender"), {
44       keyid: "osmarender",
45       displayOutsideMaxExtent: true,
46       wrapDateLine: true,
47       layerCode: "O"
48    });
49    map.addLayer(osmarender);
50
51    var cyclemap = new OpenLayers.Layer.OSM.CycleMap(i18n("javascripts.map.base.cycle_map"), {
52       keyid: "cyclemap",
53       displayOutsideMaxExtent: true,
54       wrapDateLine: true,
55       layerCode: "C"
56    });
57    map.addLayer(cyclemap);
58
59    var nonamekey = nonamekeys[document.domain];
60    var noname = new OpenLayers.Layer.OSM(i18n("javascripts.map.base.noname"), [
61       "http://a.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png",
62       "http://b.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png",
63       "http://c.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png"
64    ], {
65       displayOutsideMaxExtent: true,
66       wrapDateLine: true,
67       numZoomLevels: 19,
68       layerCode: "N"
69    });
70    map.addLayer(noname);
71
72    var numZoomLevels = Math.max(mapnik.numZoomLevels, osmarender.numZoomLevels);
73
74    markers = new OpenLayers.Layer.Markers("Markers", {
75       displayInLayerSwitcher: false,
76       numZoomLevels: numZoomLevels,
77       maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
78       maxResolution: 156543,
79       units: "m",
80       projection: "EPSG:900913"
81    });
82    map.addLayer(markers);
83
84    return map;
85 }
86
87 function getArrowIcon() {
88    var size = new OpenLayers.Size(25, 22);
89    var offset = new OpenLayers.Pixel(-30, -27);
90    var icon = new OpenLayers.Icon("<%= asset_path 'arrow.png' %>", size, offset);
91
92    return icon;
93 }
94
95 function addMarkerToMap(position, icon, description) {
96    var marker = new OpenLayers.Marker(position.clone().transform(epsg4326, map.getProjectionObject()), icon);
97
98    markers.addMarker(marker);
99
100    if (description) {
101       marker.events.register("mouseover", marker, function() { openMapPopup(marker, description) });
102    }
103
104    return marker;
105 }
106
107 function addObjectToMap(url, zoom, callback) {
108    var layer = new OpenLayers.Layer.GML("Objects", url, {
109       format: OpenLayers.Format.OSM,
110       style: {
111           strokeColor: "blue",
112           strokeWidth: 3,
113           strokeOpacity: 0.5,
114           fillOpacity: 0.2,
115           fillColor: "lightblue",
116           pointRadius: 6
117       },
118       projection: new OpenLayers.Projection("EPSG:4326"),
119       displayInLayerSwitcher: false
120    });
121
122    layer.events.register("loadend", layer, function() {
123       var extent;
124
125       if (this.features.length) {
126          extent = this.features[0].geometry.getBounds();
127
128          for (var i = 1; i < this.features.length; i++) {
129             extent.extend(this.features[i].geometry.getBounds());
130          }
131
132          if (zoom) {
133             if (extent) {
134                this.map.zoomToExtent(extent);
135             } else {
136                this.map.zoomToMaxExtent();
137             }
138          }
139       }
140
141       if (callback) {
142          callback(extent);
143       }
144    });
145
146    map.addLayer(layer);
147
148    layer.loadGML();
149 }
150
151 function addBoxToMap(boxbounds, id, outline) {
152    if (!vectors) {
153      // Be aware that IE requires Vector layers be initialised on page load, and not under deferred script conditions
154      vectors = new OpenLayers.Layer.Vector("Boxes", {
155         displayInLayerSwitcher: false
156      });
157      map.addLayer(vectors);
158    }
159    var geometry;
160    if (outline) {
161      vertices = boxbounds.toGeometry().getVertices();
162      vertices.push(new OpenLayers.Geometry.Point(vertices[0].x, vertices[0].y));
163      geometry = new OpenLayers.Geometry.LineString(vertices).transform(epsg4326, map.getProjectionObject());
164    } else {
165      geometry = boxbounds.toGeometry().transform(epsg4326, map.getProjectionObject());
166    }
167    var box = new OpenLayers.Feature.Vector(geometry, {}, {
168       strokeWidth: 2,
169       strokeColor: '#ee9900',
170       fillOpacity: 0
171    });
172    box.fid = id;
173
174    vectors.addFeatures(box);
175
176    return box;
177 }
178
179 function openMapPopup(marker, description) {
180    closeMapPopup();
181
182    popup = new OpenLayers.Popup.FramedCloud("popup", marker.lonlat, null,
183                                             description, marker.icon, true);
184    popup.setBackgroundColor("#E3FFC5");
185    map.addPopup(popup);
186
187    return popup;
188 }
189
190 function closeMapPopup() {
191    if (popup) {
192       map.removePopup(popup);
193       delete popup;
194    }
195 }
196
197 function removeMarkerFromMap(marker){
198    markers.removeMarker(marker);
199 }
200
201 function removeBoxFromMap(box){
202    vectors.removeFeature(box);
203 }
204
205 function getMapCenter() {
206    return map.getCenter().clone().transform(map.getProjectionObject(), epsg4326);
207 }
208
209 function setMapCenter(center, zoom) {
210    zoom = parseInt(zoom);
211    var numzoom = map.getNumZoomLevels();
212    if (zoom >= numzoom) zoom = numzoom - 1;
213    map.setCenter(center.clone().transform(epsg4326, map.getProjectionObject()), zoom);
214 }
215
216 function setMapExtent(extent) {
217    map.zoomToExtent(extent.clone().transform(epsg4326, map.getProjectionObject()));
218 }
219
220 function getMapExtent() {
221    return map.getExtent().clone().transform(map.getProjectionObject(), epsg4326);
222 }
223
224 function getMapZoom() {
225    return map.getZoom();
226 }
227
228 function getEventPosition(event) {
229    return map.getLonLatFromViewPortPx(event.xy).clone().transform(map.getProjectionObject(), epsg4326);
230 }
231
232 function getMapLayers() {
233    var layerConfig = "";
234
235    for (var i = 0; i < map.layers.length; i++) {
236       if (map.layers[i].layerCode && map.layers[i].getVisibility()) {
237          layerConfig += map.layers[i].layerCode;
238       }
239    }
240
241    return layerConfig;
242 }
243
244 function setMapLayers(layerConfig) {
245    if (layerConfig.charAt(0) == "B" || layerConfig.charAt(0) == "0") {
246       var l = 0;
247
248       for (var layers = map.getLayersBy("isBaseLayer", true), i = 0; i < layers.length; i++) {
249          var c = layerConfig.charAt(l++);
250
251          if (c == "B") {
252             map.setBaseLayer(layers[i]);
253          } else {
254             map.layers[i].setVisibility(false);
255          }
256       }
257    } else {
258       for (var i = 0; i < map.layers.length; i++) {
259          if (map.layers[i].layerCode) {
260             if (layerConfig.indexOf(map.layers[i].layerCode) >= 0) {
261                if (map.layers[i].isBaseLayer) {
262                   map.setBaseLayer(map.layers[i]);
263                } else {
264                   map.layers[i].setVisibility(true);
265                }
266             } else {
267                map.layers[i].setVisibility(false);
268             }
269          }
270       }
271    }
272 }
273
274 function scaleToZoom(scale) {
275    return Math.log(360.0/(scale * 512.0)) / Math.log(2.0);
276 }