app/assets/javascripts/index/browse.js

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