app/assets/javascripts/index/query.js

   1 OSM.Query = function(map) {
   2   var queryButton = $(".control-query .control-button"),
   3     uninterestingTags = ['source', 'source_ref', 'source:ref', 'history', 'attribution', 'created_by', 'tiger:county', 'tiger:tlid', 'tiger:upload_uuid'],
   4     searchRadius = 10,
   5     marker;
   6
   7   queryButton.on("click", function (e) {
   8     e.preventDefault();
   9     e.stopPropagation();
  10
  11     if (queryButton.hasClass("active")) {
  12       disableQueryMode();
  13
  14       OSM.router.route("/");
  15     } else {
  16       enableQueryMode();
  17     }
  18   });
  19
  20   $("#sidebar_content")
  21     .on("mouseover", ".query-results li", function () {
  22       var geometry = $(this).data("geometry")
  23       if (geometry) map.addLayer(geometry);
  24       $(this).addClass("selected");
  25     })
  26     .on("mouseout", ".query-results li", function () {
  27       var geometry = $(this).data("geometry")
  28       if (geometry) map.removeLayer(geometry);
  29       $(this).removeClass("selected");
  30     });
  31
  32   function interestingFeature(feature, origin) {
  33     if (feature.tags) {
  34       if (feature.type === "node" &&
  35           OSM.distance(origin, L.latLng(feature.lat, feature.lon)) > searchRadius) {
  36         return false;
  37       }
  38
  39       for (var key in feature.tags) {
  40         if (uninterestingTags.indexOf(key) < 0) {
  41           return true;
  42         }
  43       }
  44     }
  45
  46     return false;
  47   }
  48
  49   function featurePrefix(feature) {
  50     var tags = feature.tags;
  51     var prefix = "";
  52
  53     if (tags.boundary === "administrative") {
  54       prefix = I18n.t("geocoder.search_osm_nominatim.admin_levels.level" + tags.admin_level)
  55     } else {
  56       var prefixes = I18n.t("geocoder.search_osm_nominatim.prefix");
  57
  58       for (var key in tags) {
  59         var value = tags[key];
  60
  61         if (prefixes[key]) {
  62           if (prefixes[key][value]) {
  63             return prefixes[key][value];
  64           } else {
  65             var first = value.substr(0, 1).toUpperCase(),
  66               rest = value.substr(1).replace(/_/g, " ");
  67
  68             return first + rest;
  69           }
  70         }
  71       }
  72     }
  73
  74     if (!prefix) {
  75       prefix = I18n.t("javascripts.query." + feature.type);
  76     }
  77
  78     return prefix;
  79   }
  80
  81   function featureName(feature) {
  82     var tags = feature.tags;
  83
  84     if (tags["name"]) {
  85       return tags["name"];
  86     } else if (tags["ref"]) {
  87       return tags["ref"];
  88     } else if (tags["addr:housenumber"] && tags["addr:street"]) {
  89       return tags["addr:housenumber"] + " " + tags["addr:street"];
  90     } else {
  91       return "#" + feature.id;
  92     }
  93   }
  94
  95   function featureLink(feature) {
  96     if (feature.type === "area") {
  97       if (feature.id >= 3600000000) {
  98         var id = feature.id - 3600000000;
  99
 100         return "/browse/relation/" + id;
 101       } else if (feature.id >= 2400000000) {
 102         var id = feature.id - 2400000000;
 103
 104         return "/browse/way/" + id;
 105       } else {
 106         return "/browse/node/" + feature.id;
 107       }
 108     } else {
 109       return "/browse/" + feature.type + "/" + feature.id;
 110     }
 111   }
 112
 113   function featureGeometry(feature, nodes) {
 114     var geometry;
 115
 116     if (feature.type === "node") {
 117       geometry = L.circleMarker([feature.lat, feature.lon]);
 118     } else if (feature.type === "way") {
 119       geometry = L.polyline(feature.nodes.map(function (node) {
 120         return nodes[node];
 121       }));
 122     }
 123
 124     return geometry;
 125   }
 126
 127   function runQuery(latlng, query, $section) {
 128     var $ul = $section.find("ul");
 129
 130     $ul.empty();
 131     $section.show();
 132
 133     $section.find(".loader").oneTime(1000, "loading", function () {
 134       $(this).show();
 135     });
 136
 137     $.ajax({
 138       url: "http://overpass-api.de/api/interpreter",
 139       method: "GET",
 140       data: {
 141         data: "[timeout:5][out:json];" + query,
 142       },
 143       success: function(results) {
 144         var nodes = {};
 145
 146         $section.find(".loader").stopTime("loading").hide();
 147
 148         results.elements.forEach(function (element) {
 149           if (element.type === "node") {
 150             nodes[element.id] = [element.lat, element.lon];
 151           }
 152         });
 153
 154         for (var i = 0; i < results.elements.length; i++) {
 155           var element = results.elements[i];
 156
 157           if (interestingFeature(element, latlng)) {
 158             var $li = $("<li>")
 159               .data("geometry", featureGeometry(element, nodes))
 160               .appendTo($ul);
 161             var $p = $("<p>")
 162               .addClass("inner12 search_results_entry clearfix")
 163               .text(featurePrefix(element) + " ")
 164               .appendTo($li);
 165
 166             $("<a>")
 167               .attr("href", featureLink(element))
 168               .text(featureName(element))
 169               .appendTo($p);
 170           }
 171         }
 172       }
 173     });
 174   }
 175
 176   function queryOverpass(lat, lng) {
 177     var latlng = L.latLng(lat, lng),
 178       around = "around:" + searchRadius + "," + lat + "," + lng,
 179       features = "(node(" + around + ");way(" + around + ");relation(" + around + "))",
 180       nearby = "((" + features + ";way(bn));node(w));out;",
 181       isin = "(is_in(" + lat + "," + lng + ");>);out;";
 182
 183     $("#sidebar_content .query-intro")
 184       .hide();
 185
 186     if (marker) {
 187       marker.setLatLng(latlng).addTo(map);
 188     } else {
 189       marker = L.circle(latlng, searchRadius, { clickable: false }).addTo(map);
 190     }
 191
 192     $(document).everyTime(75, "fadeQueryMarker", function (i) {
 193       if (i == 10) {
 194         map.removeLayer(marker);
 195       } else {
 196         marker.setStyle({
 197           opacity: 0.5 - i * 0.05,
 198           fillOpacity: 0.2 - i * 0.02
 199         });
 200       }
 201     }, 10);
 202
 203     runQuery(latlng, nearby, $("#query-nearby"));
 204     runQuery(latlng, isin, $("#query-isin"));
 205   }
 206
 207   function clickHandler(e) {
 208     var precision = OSM.zoomPrecision(map.getZoom()),
 209       lat = e.latlng.lat.toFixed(precision),
 210       lng = e.latlng.lng.toFixed(precision);
 211
 212     OSM.router.route("/query?lat=" + lat + "&lon=" + lng);
 213   }
 214
 215   function enableQueryMode() {
 216     queryButton.addClass("active");
 217     map.on("click", clickHandler);
 218     $(map.getContainer()).addClass("query-active");
 219   }
 220
 221   function disableQueryMode() {
 222     if (marker) map.removeLayer(marker);
 223     $(map.getContainer()).removeClass("query-active");
 224     map.off("click", clickHandler);
 225     queryButton.removeClass("active");
 226   }
 227
 228   var page = {};
 229
 230   page.pushstate = page.popstate = function(path) {
 231     OSM.loadSidebarContent(path, function () {
 232       page.load(path);
 233     });
 234   };
 235
 236   page.load = function(path) {
 237     var params = querystring.parse(path.substring(path.indexOf('?') + 1));
 238
 239     queryOverpass(params.lat, params.lon);
 240     enableQueryMode();
 241
 242     return map.getState();
 243   };
 244
 245   page.unload = function() {
 246     disableQueryMode();
 247   };
 248
 249   return page;
 250 };