]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index.js
Work on layers UI
[rails.git] / app / assets / javascripts / index.js
1 //= require_self
2 //= require leaflet.layers
3 //= require leaflet.share
4 //= require leaflet.note
5 //= require leaflet.locate
6 //= require leaflet.customzoom
7 //= require index/browse
8 //= require index/export
9 //= require index/key
10 //= require index/notes
11
12 var map, layers; // TODO: remove globals
13
14 $(document).ready(function () {
15   var marker;
16   var params = OSM.mapParams();
17
18   map = L.map("map", {
19     zoomControl: false,
20     layerControl: false
21   });
22
23   map.attributionControl.setPrefix('');
24
25   layers = [{
26     layer: new L.OSM.Mapnik({
27       attribution: '',
28       code: "M"
29     }),
30     keyid: "mapnik",
31     name: I18n.t("javascripts.map.base.standard")
32   }, {
33     layer: new L.OSM.CycleMap({
34       attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
35       code: "C"
36     }),
37     keyid: "cyclemap",
38     name: I18n.t("javascripts.map.base.cycle_map")
39   }, {
40     layer: new L.OSM.TransportMap({
41       attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
42       code: "T"
43     }),
44     keyid: "transportmap",
45     name: I18n.t("javascripts.map.base.transport_map")
46   }, {
47     layer: new L.OSM.MapQuestOpen({
48       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'>",
49       code: "Q"
50     }),
51     keyid: "mapquest",
52     name: I18n.t("javascripts.map.base.mapquest")
53   }];
54
55   layers[0].layer.addTo(map);
56
57   $("#map").on("resized", function () {
58     map.invalidateSize();
59   });
60
61   L.control.customZoom({position: 'topright'})
62     .addTo(map);
63
64   var uiPane = $('#map-ui')[0];
65
66   L.OSM.layers({
67     position: 'topright',
68     layers: layers,
69     uiPane: uiPane
70   }).addTo(map);
71
72   L.control.share({
73     getUrl: getShortUrl,
74     uiPane: uiPane
75   }).addTo(map);
76
77   L.control.note({
78     position: 'topright'
79   }).addTo(map);
80
81   L.control.locate({
82     position: 'topright'
83   }).addTo(map);
84
85   L.control.scale().addTo(map);
86
87   map.on("moveend layeradd layerremove", updateLocation);
88
89   if (!params.object_zoom) {
90     if (params.bbox) {
91       var bbox = L.latLngBounds([params.minlat, params.minlon],
92                                 [params.maxlat, params.maxlon]);
93
94       map.fitBounds(bbox);
95
96       if (params.box) {
97         L.rectangle(bbox, {
98           weight: 2,
99           color: '#e90',
100           fillOpacity: 0
101         }).addTo(map);
102       }
103     } else {
104       map.setView([params.lat, params.lon], params.zoom);
105     }
106   }
107
108   if (params.layers) {
109     var foundLayer = false;
110     for (var i = 0; i < layers.length; i++) {
111       if (params.layers.indexOf(layers[i].layer.options.code) >= 0) {
112         map.addLayer(layers[i].layer);
113         foundLayer = true;
114       } else {
115         map.removeLayer(layers[i].layer);
116       }
117     }
118     if (!foundLayer) {
119       map.addLayer(layers[0].layer);
120     }
121   }
122
123   if (params.marker) {
124     marker = L.marker([params.mlat, params.mlon], {icon: getUserIcon()}).addTo(map);
125   }
126
127   if (params.object) {
128     addObjectToMap(params.object, map, { zoom: params.object_zoom });
129   }
130
131   handleResize();
132
133   $("body").on("click", "a.set_position", function (e) {
134     e.preventDefault();
135
136     var data = $(this).data();
137     var centre = L.latLng(data.lat, data.lon);
138
139     if (data.minLon && data.minLat && data.maxLon && data.maxLat) {
140       map.fitBounds([[data.minLat, data.minLon],
141                      [data.maxLat, data.maxLon]]);
142     } else {
143       map.setView(centre, data.zoom);
144     }
145
146     if (data.type && data.id) {
147       addObjectToMap(data, map, { zoom: true, style: { opacity: 0.2, fill: false } });
148     }
149
150     if (marker) {
151       map.removeLayer(marker);
152     }
153
154     marker = L.marker(centre, {icon: getUserIcon()}).addTo(map);
155   });
156
157   function updateLocation() {
158     var center = map.getCenter().wrap();
159     var zoom = map.getZoom();
160     var layers = getMapLayers();
161     var extents = map.getBounds().wrap();
162
163     updatelinks(center, zoom, layers, extents, params.object);
164
165     var expiry = new Date();
166     expiry.setYear(expiry.getFullYear() + 10);
167     $.cookie("_osm_location", [center.lng, center.lat, zoom, layers].join("|"), {expires: expiry});
168   }
169
170   function remoteEditHandler() {
171     var extent = map.getBounds();
172     var loaded = false;
173
174     $("#linkloader").load(function () { loaded = true; });
175     $("#linkloader").attr("src", "http://127.0.0.1:8111/load_and_zoom?" +
176          querystring.stringify({
177             left: extent.getWest(),
178             bottom: extent.getSouth(),
179             right: extent.getEast(),
180             top: extent.getNorth()
181          }));
182
183     setTimeout(function () {
184       if (!loaded) alert(I18n.t('site.index.remote_failed'));
185     }, 1000);
186
187     return false;
188   }
189
190   $("a[data-editor=remote]").click(remoteEditHandler);
191
192   if (OSM.preferred_editor == "remote" && $('body').hasClass("site-edit")) {
193     remoteEditHandler();
194   }
195
196   $(window).resize(handleResize);
197
198   $("#search_form").submit(function () {
199     var bounds = map.getBounds();
200
201     $("#sidebar_title").html(I18n.t('site.sidebar.search_results'));
202     $("#sidebar_content").load($(this).attr("action"), {
203       query: $("#query").val(),
204       minlon: bounds.getWest(),
205       minlat: bounds.getSouth(),
206       maxlon: bounds.getEast(),
207       maxlat: bounds.getNorth()
208     }, openSidebar);
209
210     return false;
211   });
212
213   if ($("#query").val()) {
214     $("#search_form").submit();
215   }
216
217   // Focus the search field for browsers that don't support
218   // the HTML5 'autofocus' attribute
219   if (!("autofocus" in document.createElement("input"))) {
220     $("#query").focus();
221   }
222 });
223
224 function getMapBaseLayer() {
225   for (var i = 0; i < layers.length; i++) {
226     if (map.hasLayer(layers[i].layer)) {
227       return layers[i];
228     }
229   }
230 }
231
232 function getMapLayers() {
233   var layerConfig = "";
234   for (var i in map._layers) { // TODO: map.eachLayer
235     var layer = map._layers[i];
236     if (layer.options && layer.options.code) {
237       layerConfig += layer.options.code;
238     }
239   }
240   return layerConfig;
241 }