]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index/layers/data.js
Merge remote-tracking branch 'upstream/pull/5568'
[rails.git] / app / assets / javascripts / index / layers / data.js
1 OSM.initializeDataLayer = function (map) {
2   var loadedBounds;
3   var dataLayer = map.dataLayer;
4
5   dataLayer.setStyle({
6     way: {
7       weight: 3,
8       color: "#000000",
9       opacity: 0.4
10     },
11     area: {
12       weight: 3,
13       color: "#ff0000"
14     },
15     node: {
16       color: "#00ff00"
17     }
18   });
19
20   dataLayer.isWayArea = function () {
21     return false;
22   };
23
24   dataLayer.on("click", function (e) {
25     onSelect(e.layer);
26   });
27
28   dataLayer.on("add", function () {
29     map.fire("overlayadd", { layer: this });
30     map.on("moveend", updateData);
31     updateData();
32   });
33
34   dataLayer.on("remove", function () {
35     map.off("moveend", updateData);
36     $("#browse_status").empty();
37     map.fire("overlayremove", { layer: this });
38   });
39
40   function updateData() {
41     var bounds = map.getBounds();
42     if (!loadedBounds || !loadedBounds.contains(bounds)) {
43       getData();
44     }
45   }
46
47   function displayFeatureWarning(num_features, add, cancel) {
48     $("#browse_status").html(
49       $("<div class='p-3'>").append(
50         $("<div class='d-flex'>").append(
51           $("<h2 class='flex-grow-1 text-break'>")
52             .text(I18n.t("browse.start_rjs.load_data")),
53           $("<div>").append(
54             $("<button type='button' class='btn-close'>")
55               .attr("aria-label", I18n.t("javascripts.close"))
56               .click(cancel))),
57         $("<p class='alert alert-warning'>")
58           .text(I18n.t("browse.start_rjs.feature_warning", { num_features })),
59         $("<input type='submit' class='btn btn-primary d-block mx-auto'>")
60           .val(I18n.t("browse.start_rjs.load_data"))
61           .click(add)));
62   }
63
64   function displayLoadError(message, close) {
65     $("#browse_status").html(
66       $("<div class='p-3'>").append(
67         $("<div class='d-flex'>").append(
68           $("<h2 class='flex-grow-1 text-break'>")
69             .text(I18n.t("browse.start_rjs.load_data")),
70           $("<div>").append(
71             $("<button type='button' class='btn-close'>")
72               .attr("aria-label", I18n.t("javascripts.close"))
73               .click(close))),
74         $("<div>").append(
75           $("<div class='d-flex'>").append(
76             $("<p class='alert alert-warning'>")
77               .text(I18n.t("browse.start_rjs.feature_error", { message: message }))))));
78   }
79
80   var dataLoader;
81
82   function getData() {
83     var bounds = map.getBounds();
84     var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
85
86     /*
87      * Modern browsers are quite happy showing far more than 100 features in
88      * the data browser, so increase the limit to 4000 by default.
89      */
90     const maxFeatures = 4000;
91
92     if (dataLoader) dataLoader.abort();
93
94     dataLoader = $.ajax({
95       url: url,
96       success: function (xml) {
97         dataLayer.clearLayers();
98
99         var features = dataLayer.buildFeatures(xml);
100
101         function addFeatures() {
102           $("#browse_status").empty();
103           dataLayer.addData(features);
104           loadedBounds = bounds;
105         }
106
107         function cancelAddFeatures() {
108           $("#browse_status").empty();
109         }
110
111         if (features.length < maxFeatures) {
112           addFeatures();
113         } else {
114           displayFeatureWarning(features.length, addFeatures, cancelAddFeatures);
115         }
116
117         if (map._objectLayer) {
118           map._objectLayer.bringToFront();
119         }
120
121         dataLoader = null;
122       },
123       error: function (XMLHttpRequest, textStatus) {
124         dataLoader = null;
125         if (textStatus === "abort") { return; }
126
127         function closeError() {
128           $("#browse_status").empty();
129         }
130
131         if (XMLHttpRequest.status === 400 && XMLHttpRequest.responseText) {
132           displayLoadError(XMLHttpRequest.responseText, closeError);
133         } else if (XMLHttpRequest.statusText) {
134           displayLoadError(XMLHttpRequest.statusText, closeError);
135         } else {
136           displayLoadError(String(XMLHttpRequest.status), closeError);
137         }
138       }
139     });
140   }
141
142   function onSelect(layer) {
143     OSM.router.route("/" + layer.feature.type + "/" + layer.feature.id);
144   }
145 };