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