app/views/browse/start.rjs

   1 page.replace_html :sidebar_title, 'Browse'
   2 page.replace_html :sidebar_content, :partial => 'start'
   3 page << <<EOJ
   4  var gml, sf, obj_list, currentFeature;
   5  OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
   6  OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
   7  function start() {
   8    openSidebar({ onclose: stopBrowse });
   9    vectors = new OpenLayers.Layer.Vector("Vector Layer", {
  10      displayInLayerSwitcher: false
  11    });
  12
  13    box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
  14      handlerOptions: {
  15        sides: 4,
  16        snapAngle: 90,
  17        irregular: true,
  18        persist: true,
  19        callbacks: { done: endDrag }
  20      }
  21    });
  22    map.addControl(box);
  23  }
  24  function stopBrowse() {
  25      if (gml) {
  26        gml.destroy();
  27        gml = null;
  28      }
  29      if (sf) {
  30          sf.destroy();
  31          sf = null;
  32      }
  33      if (currentFeature) {
  34          currentFeature.destroy();
  35          currentFeature = null;
  36      }
  37  }
  38  function startDrag() {
  39    $("drag_box").innerHTML='Drag a box on the map to select an area';
  40     box.activate();
  41     return false;
  42  };
  43
  44  $("drag_box").onclick = startDrag;
  45
  46   function useMap() {
  47       var bounds = map.getExtent();
  48       setBounds(bounds);
  49       getData(bounds);
  50   }
  51   $("use_map").onclick = useMap;
  52   function dataLoaded() {
  53       $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
  54
  55       obj_list = document.createElement("ul");
  56       for (var i = 0; i < this.features.length; i++) {
  57           var feature = this.features[i];
  58           var type ="way";
  59           if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
  60               type = "node";
  61           }
  62           var nice_name = type.substr(0,1).toUpperCase() + type.substr(1,type.length);
  63           var li = document.createElement("li");
  64           li.appendChild(document.createTextNode(nice_name + " "));
  65           var link = document.createElement("a");
  66           link.href =  "/browse/"+type+"/"+feature.osm_id;
  67           var name = feature.attributes.name || feature.osm_id;
  68           link.appendChild(document.createTextNode(name));
  69           li.appendChild(link);
  70           li.appendChild(document.createTextNode(" "));
  71           var link = document.createElement("a");
  72           link.href =  "#";
  73           link.appendChild(document.createTextNode("+"));
  74           link.feature = feature;
  75           link.onclick = OpenLayers.Function.bind(function() {
  76             var layer = this.feature.layer;
  77             for (var i = 0; i < layer.selectedFeatures.length; i++) {
  78                 var f = layer.selectedFeatures[i];
  79                 layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
  80             }
  81             on_feature_hover(this.feature);
  82             map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());
  83           }, link);
  84           li.appendChild(link);
  85           obj_list.appendChild(li);
  86       }
  87       $("object").innerHTML = "";
  88       $("object").appendChild(obj_list);
  89   }
  90   function getData(bounds) {
  91     $("status").innerHTML = "Loading...";
  92     bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
  93     var url = "/api/0.5/map?bbox="+bounds.toBBOX();
  94     if (!gml) {
  95         var def = OpenLayers.Feature.Vector.style['default'];
  96         var style = new OpenLayers.Style();
  97         style.addRules([new OpenLayers.Rule(
  98           {'symbolizer':
  99             {"Polygon": {'fillColor': '#ff0000', 'strokeColor': '#ff0000'},
 100              "Line": {'fillColor': '#ffff00', 'strokeColor': '#000000', strokeOpacity: '0.4'},
 101              "Point": {'fillColor': '#00ff00', 'strokeColor': '#00ff00'}}
 102           }
 103         )]);
 104         gml = new OpenLayers.Layer.GML("Data",url,
 105                 {format: OpenLayers.Format.OSM, formatOptions: {checkTags: true},
 106                  styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff'}})
 107                 }
 108         );
 109         gml.events.register("loadend", gml, dataLoaded );
 110         map.addLayer(gml);
 111         sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': on_feature_hover});
 112         map.addControl(sf);
 113         sf.activate();
 114
 115     } else {
 116         gml.setUrl(url);
 117     }
 118   }
 119   function endDrag(bbox) {
 120     var bounds = bbox.getBounds();
 121     setBounds(bounds);
 122     box.deactivate();
 123     getData(bounds);
 124     $("drag_box").innerHTML = "Select an area to see features";
 125
 126   }
 127   function loadObjList() {
 128       $("object").innerHTML="";
 129       $("object").appendChild(obj_list);
 130   }
 131
 132   function on_feature_hover(feature) {
 133       if (currentFeature) {
 134         currentFeature.layer.drawFeature(
 135           currentFeature, currentFeature.layer.styleMap.createSymbolizer(currentFeature, "default")
 136         );
 137       }
 138       feature.layer.drawFeature(
 139         feature, feature.layer.styleMap.createSymbolizer(feature, "select")
 140       );
 141       if ($("object").firstChild == $("object").obj_list) {
 142         $("object").removeChild(obj_list);
 143       } else {
 144         $("object").innerHTML = "";
 145       }
 146       var div = document.createElement("div");
 147       var link = document.createElement("a");
 148       link.href="#";
 149       link.onclick = loadObjList;
 150       link.appendChild(document.createTextNode("Back to Object List"));
 151       div.appendChild(link)
 152       $("object").appendChild(div);
 153       var ul = document.createElement("ul");
 154       var type ="way";
 155       if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
 156           type = "node";
 157       }
 158       var li = document.createElement("li");
 159       var link = document.createElement("a");
 160       link.href =  "/browse/"+type+"/"+feature.osm_id;
 161       link.appendChild(document.createTextNode(feature.osm_id));
 162       li.appendChild(link);
 163       ul.appendChild(li);
 164       for (var key in feature.attributes) {
 165           var li = document.createElement("li");
 166           li.appendChild(document.createTextNode(key + ": " + feature.attributes[key]));
 167           ul.appendChild(li);
 168       }
 169       $("object").appendChild(ul);
 170       currentFeature = feature;
 171   }
 172   function setBounds(bounds) {
 173     var epsg4326 = new OpenLayers.Projection("EPSG:4326");
 174     var decimals = Math.pow(10, Math.floor(map.getZoom() / 3));
 175
 176     bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
 177
 178     $("minlon").innerHTML = Math.round(bounds.left * decimals) / decimals;
 179     $("minlat").innerHTML = Math.round(bounds.bottom * decimals) / decimals;
 180     $("maxlon").innerHTML = Math.round(bounds.right * decimals) / decimals;
 181     $("maxlat").innerHTML = Math.round(bounds.top * decimals) / decimals;
 182   }
 183
 184 start();
 185 EOJ