]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/leaflet.map.js
Add subscribe/unsubscribe buttons to note pages
[rails.git] / app / assets / javascripts / leaflet.map.js
1 //= require qs/dist/qs
2
3 L.extend(L.LatLngBounds.prototype, {
4   getSize: function () {
5     return (this._northEast.lat - this._southWest.lat) *
6            (this._northEast.lng - this._southWest.lng);
7   },
8
9   wrap: function () {
10     return new L.LatLngBounds(this._southWest.wrap(), this._northEast.wrap());
11   }
12 });
13
14 L.OSM.Map = L.Map.extend({
15   initialize: function (id, options) {
16     L.Map.prototype.initialize.call(this, id, options);
17
18     const layerCredits = {
19       mapnik: {
20         id: "make_a_donation",
21         href: "https://supporting.openstreetmap.org",
22         donate: true
23       },
24       cyclosm: {
25         id: "cyclosm_credit",
26         children: {
27           cyclosm_link: {
28             id: "cyclosm_name",
29             href: "https://www.cyclosm.org"
30           },
31           osm_france_link: {
32             id: "osm_france",
33             href: "https://openstreetmap.fr/"
34           }
35         }
36       },
37       thunderforest: {
38         id: "thunderforest_credit",
39         children: {
40           thunderforest_link: {
41             id: "andy_allan",
42             href: "https://www.thunderforest.com/"
43           }
44         }
45       },
46       tracestrack: {
47         id: "tracestrack_credit",
48         children: {
49           tracestrack_link: {
50             id: "tracestrack",
51             href: "https://www.tracestrack.com/"
52           }
53         }
54       },
55       hotosm: {
56         id: "hotosm_credit",
57         children: {
58           hotosm_link: {
59             id: "hotosm_name",
60             href: "https://www.hotosm.org/"
61           },
62           osm_france_link: {
63             id: "osm_france",
64             href: "https://openstreetmap.fr/"
65           }
66         }
67       }
68     };
69
70     this.baseLayers = [];
71
72     this.baseLayers.push(new L.OSM.Mapnik({
73       attribution: makeAttribution("mapnik"),
74       code: "M",
75       keyid: "mapnik",
76       name: I18n.t("javascripts.map.base.standard")
77     }));
78
79     this.baseLayers.push(new L.OSM.CyclOSM({
80       attribution: makeAttribution("cyclosm"),
81       code: "Y",
82       keyid: "cyclosm",
83       name: I18n.t("javascripts.map.base.cyclosm")
84     }));
85
86     if (OSM.THUNDERFOREST_KEY) {
87       this.baseLayers.push(new L.OSM.CycleMap({
88         attribution: makeAttribution("thunderforest"),
89         apikey: OSM.THUNDERFOREST_KEY,
90         code: "C",
91         keyid: "cyclemap",
92         name: I18n.t("javascripts.map.base.cycle_map")
93       }));
94
95       this.baseLayers.push(new L.OSM.TransportMap({
96         attribution: makeAttribution("thunderforest"),
97         apikey: OSM.THUNDERFOREST_KEY,
98         code: "T",
99         keyid: "transportmap",
100         name: I18n.t("javascripts.map.base.transport_map")
101       }));
102     }
103
104     if (OSM.TRACESTRACK_KEY) {
105       this.baseLayers.push(new L.OSM.TracestrackTopo({
106         attribution: makeAttribution("tracestrack"),
107         apikey: OSM.TRACESTRACK_KEY,
108         code: "P",
109         keyid: "tracestracktopo",
110         name: I18n.t("javascripts.map.base.tracestracktop_topo")
111       }));
112     }
113
114     this.baseLayers.push(new L.OSM.HOT({
115       attribution: makeAttribution("hotosm"),
116       code: "H",
117       keyid: "hot",
118       name: I18n.t("javascripts.map.base.hot")
119     }));
120
121     this.noteLayer = new L.FeatureGroup();
122     this.noteLayer.options = { code: "N" };
123
124     this.dataLayer = new L.OSM.DataLayer(null);
125     this.dataLayer.options.code = "D";
126
127     this.gpsLayer = new L.OSM.GPS({
128       pane: "overlayPane",
129       code: "G"
130     });
131
132     this.on("layeradd", function (event) {
133       if (this.baseLayers.indexOf(event.layer) >= 0) {
134         this.setMaxZoom(event.layer.options.maxZoom);
135       }
136     });
137
138     function makeAttribution(id) {
139       const layerCredit = layerCredits[id];
140       let attribution = "";
141
142       attribution += I18n.t("javascripts.map.copyright_text", {
143         copyright_link: $("<a>", {
144           href: "/copyright",
145           text: I18n.t("javascripts.map.openstreetmap_contributors")
146         }).prop("outerHTML")
147       });
148
149       attribution += layerCredit.donate ? " &hearts; " : ". ";
150       attribution += makeCredit(layerCredit);
151       attribution += ". ";
152
153       attribution += $("<a>", {
154         href: "https://wiki.osmfoundation.org/wiki/Terms_of_Use",
155         text: I18n.t("javascripts.map.website_and_api_terms")
156       }).prop("outerHTML");
157
158       return attribution;
159     }
160
161     function makeCredit(credit) {
162       const children = {};
163       for (const childId in credit.children) {
164         children[childId] = makeCredit(credit.children[childId]);
165       }
166       const text = I18n.t(`javascripts.map.${credit.id}`, children);
167       if (credit.href) {
168         const link = $("<a>", {
169           href: credit.href,
170           text: text
171         });
172         if (credit.donate) {
173           link.addClass("donate-attr");
174         } else {
175           link.attr("target", "_blank");
176         }
177         return link.prop("outerHTML");
178       } else {
179         return text;
180       }
181     }
182   },
183
184   updateLayers: function (layerParam) {
185     var layers = layerParam || "M",
186         layersAdded = "";
187
188     for (var i = this.baseLayers.length - 1; i >= 0; i--) {
189       if (layers.indexOf(this.baseLayers[i].options.code) >= 0) {
190         this.addLayer(this.baseLayers[i]);
191         layersAdded = layersAdded + this.baseLayers[i].options.code;
192       } else if (i === 0 && layersAdded === "") {
193         this.addLayer(this.baseLayers[i]);
194       } else {
195         this.removeLayer(this.baseLayers[i]);
196       }
197     }
198   },
199
200   getLayersCode: function () {
201     var layerConfig = "";
202     this.eachLayer(function (layer) {
203       if (layer.options && layer.options.code) {
204         layerConfig += layer.options.code;
205       }
206     });
207     return layerConfig;
208   },
209
210   getMapBaseLayerId: function () {
211     var baseLayerId;
212     this.eachLayer(function (layer) {
213       if (layer.options && layer.options.keyid) baseLayerId = layer.options.keyid;
214     });
215     return baseLayerId;
216   },
217
218   getUrl: function (marker) {
219     var precision = OSM.zoomPrecision(this.getZoom()),
220         params = {};
221
222     if (marker && this.hasLayer(marker)) {
223       var latLng = marker.getLatLng().wrap();
224       params.mlat = latLng.lat.toFixed(precision);
225       params.mlon = latLng.lng.toFixed(precision);
226     }
227
228     var url = window.location.protocol + "//" + OSM.SERVER_URL + "/",
229         query = Qs.stringify(params),
230         hash = OSM.formatHash(this);
231
232     if (query) url += "?" + query;
233     if (hash) url += hash;
234
235     return url;
236   },
237
238   getShortUrl: function (marker) {
239     var zoom = this.getZoom(),
240         latLng = marker && this.hasLayer(marker) ? marker.getLatLng().wrap() : this.getCenter().wrap(),
241         str = window.location.hostname.match(/^www\.openstreetmap\.org/i) ?
242           window.location.protocol + "//osm.org/go/" :
243           window.location.protocol + "//" + window.location.hostname + "/go/",
244         char_array = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_~",
245         x = Math.round((latLng.lng + 180.0) * ((1 << 30) / 90.0)),
246         y = Math.round((latLng.lat + 90.0) * ((1 << 30) / 45.0)),
247         // JavaScript only has to keep 32 bits of bitwise operators, so this has to be
248         // done in two parts. each of the parts c1/c2 has 30 bits of the total in it
249         // and drops the last 4 bits of the full 64 bit Morton code.
250         c1 = interlace(x >>> 17, y >>> 17), c2 = interlace((x >>> 2) & 0x7fff, (y >>> 2) & 0x7fff),
251         digit,
252         i;
253
254     for (i = 0; i < Math.ceil((zoom + 8) / 3.0) && i < 5; ++i) {
255       digit = (c1 >> (24 - (6 * i))) & 0x3f;
256       str += char_array.charAt(digit);
257     }
258     for (i = 5; i < Math.ceil((zoom + 8) / 3.0); ++i) {
259       digit = (c2 >> (24 - (6 * (i - 5)))) & 0x3f;
260       str += char_array.charAt(digit);
261     }
262     for (i = 0; i < ((zoom + 8) % 3); ++i) str += "-";
263
264     // Called to interlace the bits in x and y, making a Morton code.
265     function interlace(x, y) {
266       var interlaced_x = x,
267           interlaced_y = y;
268       interlaced_x = (interlaced_x | (interlaced_x << 8)) & 0x00ff00ff;
269       interlaced_x = (interlaced_x | (interlaced_x << 4)) & 0x0f0f0f0f;
270       interlaced_x = (interlaced_x | (interlaced_x << 2)) & 0x33333333;
271       interlaced_x = (interlaced_x | (interlaced_x << 1)) & 0x55555555;
272       interlaced_y = (interlaced_y | (interlaced_y << 8)) & 0x00ff00ff;
273       interlaced_y = (interlaced_y | (interlaced_y << 4)) & 0x0f0f0f0f;
274       interlaced_y = (interlaced_y | (interlaced_y << 2)) & 0x33333333;
275       interlaced_y = (interlaced_y | (interlaced_y << 1)) & 0x55555555;
276       return (interlaced_x << 1) | interlaced_y;
277     }
278
279     var params = {};
280     var layers = this.getLayersCode().replace("M", "");
281
282     if (layers) {
283       params.layers = layers;
284     }
285
286     if (marker && this.hasLayer(marker)) {
287       params.m = "";
288     }
289
290     if (this._object) {
291       params[this._object.type] = this._object.id;
292     }
293
294     var query = Qs.stringify(params);
295     if (query) {
296       str += "?" + query;
297     }
298
299     return str;
300   },
301
302   getGeoUri: function (marker) {
303     var precision = OSM.zoomPrecision(this.getZoom()),
304         latLng,
305         params = {};
306
307     if (marker && this.hasLayer(marker)) {
308       latLng = marker.getLatLng().wrap();
309     } else {
310       latLng = this.getCenter();
311     }
312
313     params.lat = latLng.lat.toFixed(precision);
314     params.lon = latLng.lng.toFixed(precision);
315     params.zoom = this.getZoom();
316
317     return "geo:" + params.lat + "," + params.lon + "?z=" + params.zoom;
318   },
319
320   addObject: function (object, callback) {
321     var objectStyle = {
322       color: "#FF6200",
323       weight: 4,
324       opacity: 1,
325       fillOpacity: 0.5
326     };
327
328     var changesetStyle = {
329       weight: 4,
330       color: "#FF9500",
331       opacity: 1,
332       fillOpacity: 0,
333       interactive: false
334     };
335
336     var haloStyle = {
337       weight: 2.5,
338       radius: 20,
339       fillOpacity: 0.5,
340       color: "#FF6200"
341     };
342
343     this.removeObject();
344
345     if (object.type === "note") {
346       this._objectLoader = {
347         abort: function () {}
348       };
349
350       this._object = object;
351       this._objectLayer = L.featureGroup().addTo(this);
352
353       L.circleMarker(object.latLng, haloStyle).addTo(this._objectLayer);
354
355       if (object.icon) {
356         L.marker(object.latLng, {
357           icon: object.icon,
358           opacity: 1,
359           interactive: true
360         }).addTo(this._objectLayer);
361       }
362
363       if (callback) callback(this._objectLayer.getBounds());
364     } else { // element or changeset handled by L.OSM.DataLayer
365       var map = this;
366       this._objectLoader = $.ajax({
367         url: OSM.apiUrl(object),
368         dataType: "xml",
369         success: function (xml) {
370           map._object = object;
371
372           map._objectLayer = new L.OSM.DataLayer(null, {
373             styles: {
374               node: objectStyle,
375               way: objectStyle,
376               area: objectStyle,
377               changeset: changesetStyle
378             }
379           });
380
381           map._objectLayer.interestingNode = function (node, ways, relations) {
382             if (object.type === "node") {
383               return true;
384             } else if (object.type === "relation") {
385               for (var i = 0; i < relations.length; i++) {
386                 if (relations[i].members.indexOf(node) !== -1) return true;
387               }
388             } else {
389               return false;
390             }
391           };
392
393           map._objectLayer.addData(xml);
394           map._objectLayer.addTo(map);
395
396           if (callback) callback(map._objectLayer.getBounds());
397         }
398       });
399     }
400   },
401
402   removeObject: function () {
403     this._object = null;
404     if (this._objectLoader) this._objectLoader.abort();
405     if (this._objectLayer) this.removeLayer(this._objectLayer);
406   },
407
408   getState: function () {
409     return {
410       center: this.getCenter().wrap(),
411       zoom: this.getZoom(),
412       layers: this.getLayersCode()
413     };
414   },
415
416   setState: function (state, options) {
417     if (state.center) this.setView(state.center, state.zoom, options);
418     if (state.layers) this.updateLayers(state.layers);
419   },
420
421   setSidebarOverlaid: function (overlaid) {
422     var sidebarWidth = 350;
423     if (overlaid && !$("#content").hasClass("overlay-sidebar")) {
424       $("#content").addClass("overlay-sidebar");
425       this.invalidateSize({ pan: false });
426       if ($("html").attr("dir") !== "rtl") {
427         this.panBy([-sidebarWidth, 0], { animate: false });
428       }
429     } else if (!overlaid && $("#content").hasClass("overlay-sidebar")) {
430       if ($("html").attr("dir") !== "rtl") {
431         this.panBy([sidebarWidth, 0], { animate: false });
432       }
433       $("#content").removeClass("overlay-sidebar");
434       this.invalidateSize({ pan: false });
435     }
436     return this;
437   }
438 });
439
440 L.Icon.Default.imagePath = "/images/";
441
442 L.Icon.Default.imageUrls = {
443   "/images/marker-icon.png": OSM.MARKER_ICON,
444   "/images/marker-icon-2x.png": OSM.MARKER_ICON_2X,
445   "/images/marker-shadow.png": OSM.MARKER_SHADOW
446 };
447
448 L.extend(L.Icon.Default.prototype, {
449   _oldGetIconUrl: L.Icon.Default.prototype._getIconUrl,
450
451   _getIconUrl: function (name) {
452     var url = this._oldGetIconUrl(name);
453     return L.Icon.Default.imageUrls[url];
454   }
455 });
456
457 OSM.getUserIcon = function (url) {
458   return L.icon({
459     iconUrl: url || OSM.MARKER_RED,
460     iconSize: [25, 41],
461     iconAnchor: [12, 41],
462     popupAnchor: [1, -34],
463     shadowUrl: OSM.MARKER_SHADOW,
464     shadowSize: [41, 41]
465   });
466 };