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