]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index.js
Move leaflet.locatecontrol to be a yarn managed asset
[rails.git] / app / assets / javascripts / index.js
1 //= require_self
2 //= require leaflet.sidebar
3 //= require leaflet.locatecontrol/src/L.Control.Locate
4 //= require leaflet.layers
5 //= require leaflet.key
6 //= require leaflet.note
7 //= require leaflet.share
8 //= require leaflet.polyline
9 //= require leaflet.query
10 //= require leaflet.contextmenu
11 //= require index/contextmenu
12 //= require index/search
13 //= require index/browse
14 //= require index/export
15 //= require index/notes
16 //= require index/history
17 //= require index/note
18 //= require index/new_note
19 //= require index/directions
20 //= require index/changeset
21 //= require index/query
22 //= require router
23 //= require querystring
24
25 $(document).ready(function () {
26   var querystring = require("querystring-component");
27
28   var loaderTimeout;
29
30   var map = new L.OSM.Map("map", {
31     zoomControl: false,
32     layerControl: false,
33     contextmenu: true,
34     worldCopyJump: true
35   });
36
37   OSM.loadSidebarContent = function (path, callback) {
38     var content_path = path;
39
40     map.setSidebarOverlaid(false);
41
42     clearTimeout(loaderTimeout);
43
44     loaderTimeout = setTimeout(function () {
45       $("#sidebar_loader").show();
46     }, 200);
47
48     // IE<10 doesn't respect Vary: X-Requested-With header, so
49     // prevent caching the XHR response as a full-page URL.
50     if (content_path.indexOf("?") >= 0) {
51       content_path += "&xhr=1";
52     } else {
53       content_path += "?xhr=1";
54     }
55
56     $("#sidebar_content")
57       .empty();
58
59     $.ajax({
60       url: content_path,
61       dataType: "html",
62       complete: function (xhr) {
63         clearTimeout(loaderTimeout);
64         $("#flash").empty();
65         $("#sidebar_loader").hide();
66
67         var content = $(xhr.responseText);
68
69         if (xhr.getResponseHeader("X-Page-Title")) {
70           var title = xhr.getResponseHeader("X-Page-Title");
71           document.title = decodeURIComponent(title);
72         }
73
74         $("head")
75           .find("link[type=\"application/atom+xml\"]")
76           .remove();
77
78         $("head")
79           .append(content.filter("link[type=\"application/atom+xml\"]"));
80
81         $("#sidebar_content").html(content.not("link[type=\"application/atom+xml\"]"));
82
83         if (callback) {
84           callback();
85         }
86       }
87     });
88   };
89
90   var params = OSM.mapParams();
91
92   map.attributionControl.setPrefix("");
93
94   map.updateLayers(params.layers);
95
96   map.on("baselayerchange", function (e) {
97     if (map.getZoom() > e.layer.options.maxZoom) {
98       map.setView(map.getCenter(), e.layer.options.maxZoom, { reset: true });
99     }
100   });
101
102   var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
103
104   L.OSM.zoom({ position: position })
105     .addTo(map);
106
107   var locate = L.control.locate({
108     position: position,
109     icon: "icon geolocate",
110     iconLoading: "icon geolocate",
111     strings: {
112       title: I18n.t("javascripts.map.locate.title"),
113       metersUnit: I18n.t("javascripts.map.locate.metersUnit"),
114       feetUnit: I18n.t("javascripts.map.locate.feetUnit"),
115       popup: I18n.t("javascripts.map.locate.popup")
116     }
117   }).addTo(map);
118
119   var locateContainer = locate.getContainer();
120
121   $(locateContainer)
122     .removeClass("leaflet-control-locate leaflet-bar")
123     .addClass("control-locate")
124     .children("a")
125     .attr("href", "#")
126     .removeClass("leaflet-bar-part leaflet-bar-part-single")
127     .addClass("control-button");
128
129   var sidebar = L.OSM.sidebar("#map-ui")
130     .addTo(map);
131
132   L.OSM.layers({
133     position: position,
134     layers: map.baseLayers,
135     sidebar: sidebar
136   }).addTo(map);
137
138   L.OSM.key({
139     position: position,
140     sidebar: sidebar
141   }).addTo(map);
142
143   L.OSM.share({
144     "position": position,
145     "sidebar": sidebar,
146     "short": true
147   }).addTo(map);
148
149   L.OSM.note({
150     position: position,
151     sidebar: sidebar
152   }).addTo(map);
153
154   L.OSM.query({
155     position: position,
156     sidebar: sidebar
157   }).addTo(map);
158
159   L.control.scale()
160     .addTo(map);
161
162   OSM.initializeContextMenu(map);
163
164   if (OSM.STATUS !== "api_offline" && OSM.STATUS !== "database_offline") {
165     OSM.initializeNotes(map);
166     if (params.layers.indexOf(map.noteLayer.options.code) >= 0) {
167       map.addLayer(map.noteLayer);
168     }
169
170     OSM.initializeBrowse(map);
171     if (params.layers.indexOf(map.dataLayer.options.code) >= 0) {
172       map.addLayer(map.dataLayer);
173     }
174
175     if (params.layers.indexOf(map.gpsLayer.options.code) >= 0) {
176       map.addLayer(map.gpsLayer);
177     }
178   }
179
180   var placement = $("html").attr("dir") === "rtl" ? "right" : "left";
181   $(".leaflet-control .control-button").tooltip({ placement: placement, container: "body" });
182
183   var expiry = new Date();
184   expiry.setYear(expiry.getFullYear() + 10);
185
186   map.on("moveend layeradd layerremove", function () {
187     updateLinks(
188       map.getCenter().wrap(),
189       map.getZoom(),
190       map.getLayersCode(),
191       map._object);
192
193     $.removeCookie("_osm_location");
194     $.cookie("_osm_location", OSM.locationCookie(map), { expires: expiry, path: "/" });
195   });
196
197   if ($.cookie("_osm_welcome") !== "hide") {
198     $(".welcome").addClass("visible");
199   }
200
201   $(".welcome .close-wrap").on("click", function () {
202     $(".welcome").removeClass("visible");
203     $.cookie("_osm_welcome", "hide", { expires: expiry, path: "/" });
204   });
205
206   var bannerExpiry = new Date();
207   bannerExpiry.setYear(bannerExpiry.getFullYear() + 1);
208
209   $("#banner .close-wrap").on("click", function (e) {
210     var cookieId = e.target.id;
211     $("#banner").hide();
212     e.preventDefault();
213     if (cookieId) {
214       $.cookie(cookieId, "hide", { expires: bannerExpiry, path: "/" });
215     }
216   });
217
218   if (OSM.PIWIK) {
219     map.on("layeradd", function (e) {
220       if (e.layer.options) {
221         var goal = OSM.PIWIK.goals[e.layer.options.keyid];
222
223         if (goal) {
224           $("body").trigger("piwikgoal", goal);
225         }
226       }
227     });
228   }
229
230   if (params.bounds) {
231     map.fitBounds(params.bounds);
232   } else {
233     map.setView([params.lat, params.lon], params.zoom);
234   }
235
236   if (params.marker) {
237     L.marker([params.mlat, params.mlon]).addTo(map);
238   }
239
240   $("#homeanchor").on("click", function (e) {
241     e.preventDefault();
242
243     var data = $(this).data(),
244         center = L.latLng(data.lat, data.lon);
245
246     map.setView(center, data.zoom);
247     L.marker(center, { icon: OSM.getUserIcon() }).addTo(map);
248   });
249
250   function remoteEditHandler(bbox, object) {
251     var loaded = false,
252         url,
253         query = {
254           left: bbox.getWest() - 0.0001,
255           top: bbox.getNorth() + 0.0001,
256           right: bbox.getEast() + 0.0001,
257           bottom: bbox.getSouth() - 0.0001
258         };
259
260     url = "http://127.0.0.1:8111/load_and_zoom?";
261
262     if (object) query.select = object.type + object.id;
263
264     var iframe = $("<iframe>")
265       .hide()
266       .appendTo("body")
267       .attr("src", url + querystring.stringify(query))
268       .on("load", function () {
269         $(this).remove();
270         loaded = true;
271       });
272
273     setTimeout(function () {
274       if (!loaded) {
275         alert(I18n.t("site.index.remote_failed"));
276         iframe.remove();
277       }
278     }, 1000);
279
280     return false;
281   }
282
283   $("a[data-editor=remote]").click(function (e) {
284     var params = OSM.mapParams(this.search);
285     remoteEditHandler(map.getBounds(), params.object);
286     e.preventDefault();
287   });
288
289   if (OSM.params().edit_help) {
290     $("#editanchor")
291       .removeAttr("title")
292       .tooltip({
293         placement: "bottom",
294         title: I18n.t("javascripts.edit_help")
295       })
296       .tooltip("show");
297
298     $("body").one("click", function () {
299       $("#editanchor").tooltip("hide");
300     });
301   }
302
303   OSM.Index = function (map) {
304     var page = {};
305
306     page.pushstate = page.popstate = function () {
307       map.setSidebarOverlaid(true);
308       document.title = I18n.t("layouts.project_name.title");
309     };
310
311     page.load = function () {
312       var params = querystring.parse(location.search.substring(1));
313       if (params.query) {
314         $("#sidebar .search_form input[name=query]").value(params.query);
315       }
316       if (!("autofocus" in document.createElement("input"))) {
317         $("#sidebar .search_form input[name=query]").focus();
318       }
319       return map.getState();
320     };
321
322     return page;
323   };
324
325   OSM.Browse = function (map, type) {
326     var page = {};
327
328     page.pushstate = page.popstate = function (path, id) {
329       OSM.loadSidebarContent(path, function () {
330         addObject(type, id);
331       });
332     };
333
334     page.load = function (path, id) {
335       addObject(type, id, true);
336     };
337
338     function addObject(type, id, center) {
339       map.addObject({ type: type, id: parseInt(id, 10) }, function (bounds) {
340         if (!window.location.hash && bounds.isValid() &&
341             (center || !map.getBounds().contains(bounds))) {
342           OSM.router.withoutMoveListener(function () {
343             map.fitBounds(bounds);
344           });
345         }
346       });
347
348       $(".colour-preview-box").each(function () {
349         $(this).css("background-color", $(this).data("colour"));
350       });
351     }
352
353     page.unload = function () {
354       map.removeObject();
355     };
356
357     return page;
358   };
359
360   var history = OSM.History(map);
361
362   OSM.router = OSM.Router(map, {
363     "/": OSM.Index(map),
364     "/search": OSM.Search(map),
365     "/directions": OSM.Directions(map),
366     "/export": OSM.Export(map),
367     "/note/new": OSM.NewNote(map),
368     "/history/friends": history,
369     "/history/nearby": history,
370     "/history": history,
371     "/user/:display_name/history": history,
372     "/note/:id": OSM.Note(map),
373     "/node/:id(/history)": OSM.Browse(map, "node"),
374     "/way/:id(/history)": OSM.Browse(map, "way"),
375     "/relation/:id(/history)": OSM.Browse(map, "relation"),
376     "/changeset/:id": OSM.Changeset(map),
377     "/query": OSM.Query(map)
378   });
379
380   if (OSM.preferred_editor === "remote" && document.location.pathname === "/edit") {
381     remoteEditHandler(map.getBounds(), params.object);
382     OSM.router.setCurrentPath("/");
383   }
384
385   OSM.router.load();
386
387   $(document).on("click", "a", function (e) {
388     if (e.isDefaultPrevented() || e.isPropagationStopped()) {
389       return;
390     }
391
392     // Open links in a new tab as normal.
393     if (e.which > 1 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
394       return;
395     }
396
397     // Ignore cross-protocol and cross-origin links.
398     if (location.protocol !== this.protocol || location.host !== this.host) {
399       return;
400     }
401
402     if (OSM.router.route(this.pathname + this.search + this.hash)) {
403       e.preventDefault();
404     }
405   });
406 });