]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index/browse.js
Work towards integrating data overlay and browse pages
[rails.git] / app / assets / javascripts / index / browse.js
1 function initializeBrowse(map) {
2   var browseBounds;
3   var selectedLayer;
4   var dataLayer = map.dataLayer;
5
6   dataLayer.setStyle({
7     way: {
8       weight: 3,
9       color: "#000000",
10       opacity: 0.4
11     },
12     area: {
13       weight: 3,
14       color: "#ff0000"
15     },
16     node: {
17       color: "#00ff00"
18     }
19   });
20
21   dataLayer.isWayArea = function () {
22     return false;
23   };
24
25   dataLayer.on("click", function (e) {
26     onSelect(e.layer);
27   });
28
29   map.on('layeradd', function (e) {
30     if (e.layer === dataLayer) {
31       map.on("moveend", updateData);
32       updateData();
33     }
34   });
35
36   map.on('layerremove', function (e) {
37     if (e.layer === dataLayer) {
38       map.off("moveend", updateData);
39     }
40   });
41
42   function updateData() {
43     if (map.getZoom() >= 15) {
44       var bounds = map.getBounds();
45       if (!browseBounds || !browseBounds.contains(bounds)) {
46         browseBounds = bounds;
47         getData();
48       }
49     } else {
50       setStatus(I18n.t('browse.start_rjs.zoom_or_select'));
51     }
52   }
53
54   function displayFeatureWarning(count, limit, callback) {
55     clearStatus();
56
57     var div = document.createElement("div");
58
59     var p = document.createElement("p");
60     p.appendChild(document.createTextNode(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit })));
61     div.appendChild(p);
62
63     var input = document.createElement("input");
64     input.type = "submit";
65     input.value = I18n.t('browse.start_rjs.load_data');
66     input.onclick = callback;
67     div.appendChild(input);
68
69     $("#browse_content").html("");
70     $("#browse_content").append(div);
71   }
72
73   var dataLoader;
74
75   function getData() {
76     var bounds = map.getBounds();
77     var size = bounds.getSize();
78
79     if (size > OSM.MAX_REQUEST_AREA) {
80       setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size }));
81       return;
82     }
83
84     setStatus(I18n.t('browse.start_rjs.loading'));
85
86     var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
87
88     /*
89      * Modern browsers are quite happy showing far more than 100 features in
90      * the data browser, so increase the limit to 2000 by default, but keep
91      * it restricted to 500 for IE8 and 100 for older IEs.
92      */
93     var maxFeatures = 2000;
94
95     /*@cc_on
96       if (navigator.appVersion < 8) {
97         maxFeatures = 100;
98       } else if (navigator.appVersion < 9) {
99         maxFeatures = 500;
100       }
101     @*/
102
103     if (dataLoader) dataLoader.abort();
104
105     dataLoader = $.ajax({
106       url: url,
107       success: function (xml) {
108         clearStatus();
109
110         dataLayer.clearLayers();
111         selectedLayer = null;
112
113         var features = dataLayer.buildFeatures(xml);
114
115         function addFeatures() {
116           dataLayer.addData(features);
117         }
118
119         if (features.length < maxFeatures) {
120           addFeatures();
121         } else {
122           displayFeatureWarning(features.length, maxFeatures, addFeatures);
123         }
124
125         dataLoader = null;
126       }
127     });
128   }
129
130   function onSelect(layer) {
131     // Unselect previously selected feature
132     if (selectedLayer) {
133       selectedLayer.setStyle(selectedLayer.originalStyle);
134     }
135
136     // Redraw in selected style
137     layer.originalStyle = layer.options;
138     layer.setStyle({color: '#0000ff', weight: 8});
139
140     OSM.route('/browse/' + layer.feature.type + '/' + layer.feature.id);
141
142     // Stash the currently drawn feature
143     selectedLayer = layer;
144   }
145
146   function setStatus(status) {
147   }
148
149   function clearStatus() {
150   }
151 }