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