a0bb4268599322d03beb66b7f6c921f987c65639
[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       clearStatus();
40     }
41   });
42
43   function updateData() {
44     if (map.getZoom() >= 15) {
45       var bounds = map.getBounds();
46       if (!browseBounds || !browseBounds.contains(bounds)) {
47         browseBounds = bounds;
48         getData();
49       }
50     }
51   }
52
53   function displayFeatureWarning(count, limit, callback) {
54     clearStatus();
55
56     $('#browse_status').append(
57       $("<p class='warning'></p>")
58         .text(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit }))
59         .append(
60           $("<input type='submit'>")
61             .val(I18n.t('browse.start_rjs.load_data'))
62             .click(callback)));
63   }
64
65   var dataLoader;
66
67   function getData() {
68     var bounds = map.getBounds();
69     var size = bounds.getSize();
70
71     if (size > OSM.MAX_REQUEST_AREA) {
72       setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size }));
73       return;
74     }
75
76     setStatus(I18n.t('browse.start_rjs.loading'));
77
78     var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
79
80     /*
81      * Modern browsers are quite happy showing far more than 100 features in
82      * the data browser, so increase the limit to 2000 by default, but keep
83      * it restricted to 500 for IE8 and 100 for older IEs.
84      */
85     var maxFeatures = 2000;
86
87     /*@cc_on
88       if (navigator.appVersion < 8) {
89         maxFeatures = 100;
90       } else if (navigator.appVersion < 9) {
91         maxFeatures = 500;
92       }
93     @*/
94
95     if (dataLoader) dataLoader.abort();
96
97     dataLoader = $.ajax({
98       url: url,
99       success: function (xml) {
100         dataLayer.clearLayers();
101         selectedLayer = null;
102
103         var features = dataLayer.buildFeatures(xml);
104
105         function addFeatures() {
106           clearStatus();
107           dataLayer.addData(features);
108         }
109
110         if (features.length < maxFeatures) {
111           addFeatures();
112         } else {
113           displayFeatureWarning(features.length, maxFeatures, addFeatures);
114         }
115
116         dataLoader = null;
117       }
118     });
119   }
120
121   function onSelect(layer) {
122     // Unselect previously selected feature
123     if (selectedLayer) {
124       selectedLayer.setStyle(selectedLayer.originalStyle);
125     }
126
127     // Redraw in selected style
128     layer.originalStyle = layer.options;
129     layer.setStyle({color: '#0000ff', weight: 8});
130
131     OSM.route('/browse/' + layer.feature.type + '/' + layer.feature.id);
132
133     // Stash the currently drawn feature
134     selectedLayer = layer;
135   }
136
137   function setStatus(status) {
138     $('#browse_status').append($('<p></p>').text(status));
139   }
140
141   function clearStatus() {
142     $('#browse_status').empty();
143   }
144 }