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