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