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   dataLayer.on('statechange', function (e) {
  30     if (e.checked) {
  31       if (e.disabled) {
  32         var size = map.getBounds().getSize();
  33         $('#browse_status').html(
  34           $("<p class='warning'></p>")
  35             .text(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size.toFixed(2) })));
  36       } else {
  37         $('#browse_status').empty();
  38       }
  39     }
  40   });
  41
  42   map.on('layeradd', function (e) {
  43     if (e.layer === dataLayer) {
  44       map.on("moveend", updateData);
  45       updateData();
  46     }
  47   });
  48
  49   map.on('layerremove', function (e) {
  50     if (e.layer === dataLayer) {
  51       map.off("moveend", updateData);
  52       $('#browse_status').empty();
  53     }
  54   });
  55
  56   function updateData() {
  57     var bounds = map.getBounds();
  58     if (!browseBounds || !browseBounds.contains(bounds)) {
  59       getData();
  60     }
  61   }
  62
  63   function displayFeatureWarning(count, limit, callback) {
  64     $('#browse_status').html(
  65       $("<p class='warning'></p>")
  66         .text(I18n.t("browse.start_rjs.feature_warning", { num_features: count, max_features: limit }))
  67         .append(
  68           $("<input type='submit'>")
  69             .val(I18n.t('browse.start_rjs.load_data'))
  70             .click(callback)));
  71   }
  72
  73   var dataLoader;
  74
  75   function getData() {
  76     var bounds = map.getBounds();
  77     var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
  78
  79     /*
  80      * Modern browsers are quite happy showing far more than 100 features in
  81      * the data browser, so increase the limit to 2000 by default, but keep
  82      * it restricted to 500 for IE8 and 100 for older IEs.
  83      */
  84     var maxFeatures = 2000;
  85
  86     /*@cc_on
  87       if (navigator.appVersion < 8) {
  88         maxFeatures = 100;
  89       } else if (navigator.appVersion < 9) {
  90         maxFeatures = 500;
  91       }
  92     @*/
  93
  94     if (dataLoader) dataLoader.abort();
  95
  96     dataLoader = $.ajax({
  97       url: url,
  98       success: function (xml) {
  99         dataLayer.clearLayers();
 100         selectedLayer = null;
 101
 102         var features = dataLayer.buildFeatures(xml);
 103
 104         function addFeatures() {
 105           $('#browse_status').empty();
 106           dataLayer.addData(features);
 107         }
 108
 109         if (features.length < maxFeatures) {
 110           addFeatures();
 111         } else {
 112           displayFeatureWarning(features.length, maxFeatures, addFeatures);
 113         }
 114
 115         dataLoader = null;
 116         browseBounds = bounds;
 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.router.route('/' + layer.feature.type + '/' + layer.feature.id);
 132
 133     // Stash the currently drawn feature
 134     selectedLayer = layer;
 135   }
 136 }