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