app/views/browse/start.rjs

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