-page.replace_html :sidebar_title, 'Browse'
+page.replace_html :sidebar_title, 'Data'
page.replace_html :sidebar_content, :partial => 'start'
page << <<EOJ
- var gml, sf, objList, currentFeature, featureList;
+ var gml, sf, objList, currentFeature, featureList, mode = "auto", currentBounds, browsing;
OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
}
});
map.addControl(box);
- map.events.register("moveend", map, validateLinks);
+ map.events.register("moveend", map, showData);
map.events.triggerEvent("moveend");
+ map.dataLayer.stopBrowse = stopBrowse;
+ browsing = true;
+ }
+
+ function showData() {
+ if (mode == "manual") { return; }
+ if (map.getZoom() >= 15) {
+ useMap();
+ } else {
+ $("status").innerHTML = "Zoom in or Select an area of the map to view.";
+ }
}
function stopBrowse() {
- if (gml) {
- gml.destroy();
- gml = null;
- }
- if (sf) {
- sf.destroy();
- sf = null;
- }
- if (currentFeature) {
- currentFeature.destroy();
- currentFeature = null;
- }
- map.events.unregister("moveend", map, validateLinks);
+ if (browsing) {
+ browsing = false;
+ map.dataLayer.stopBrowse = null;
+ if (gml) {
+ gml.destroy();
+ gml = null;
+ }
+ if (sf) {
+ sf.destroy();
+ sf = null;
+ }
+ if (currentFeature) {
+ currentFeature.destroy();
+ currentFeature = null;
+ }
+ map.dataLayer.setVisibility(false);
+ map.events.unregister("moveend", map, showData);
+ }
}
function startDrag() {
function useMap() {
var bounds = map.getExtent();
- setBounds(bounds);
- getData(bounds);
+ var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
+ if (!currentBounds || !currentBounds.containsBounds(projected)) {
+ var center = bounds.getCenterLonLat();
+ var tileWidth = bounds.getWidth() * 1.2;
+ var tileHeight = bounds.getHeight() * 1.2;
+ var tileBounds =
+ new OpenLayers.Bounds(center.lon - (tileWidth / 2),
+ center.lat - (tileHeight / 2),
+ center.lon + (tileWidth / 2),
+ center.lat + (tileHeight / 2));
+
+ currentBounds = tileBounds;
+ getData(tileBounds);
+ mode = "auto";
+ $("use_map").style.display="none";
+ }
return false;
}
$("use_map").onclick = useMap;
function endDrag(bbox) {
var bounds = bbox.getBounds();
- setBounds(bounds);
box.deactivate();
+ currentBounds = bounds;
getData(bounds);
$("drag_box").innerHTML = "Manually select a different area";
+ mode = "manual";
+ $("use_map").style.display="inline";
}
function displayFeatureWarning() {
+ $("status").innerHTML = "";
var div = document.createElement("div");
var p = document.createElement("p");
p.appendChild(document.createTextNode("You have loaded an area which contains " + featureList.length + " features. In general, some browsers may not cope well with displaying this quantity of data. Generally, browsers work best at displaying less than 100 features at a time: doing anything else may make your browser slow/unresponsive. If you are sure you want to display this data, you may do so by clicking the button below."));
function loadFeatureList() {
gml.addFeatures(featureList);
gml.events.triggerEvent("loadend");
+ return false;
}
function customDataLoader(request) {
+ if (!browsing) { return; }
var doc = request.responseXML;
if (!doc || !doc.documentElement) {
bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
var size = bounds.getWidth() * bounds.getHeight();
if (size > 0.25) {
- $("status").innerHTML = "Unable to load: Bounding box size of " + size + " is too large. (Must be smaller than 0.25)";
+ $("status").innerHTML = "Unable to load: Bounding box size of " + size + " is too large. (Must be smaller than 0.25)<br />";
return;
}
var url = "/api/0.5/map?bbox="+bounds.toBBOX();
+ loadGML(url);
+ }
+ function loadGML(url) {
$("status").innerHTML = "Loading...";
+ $("object").innerHTML = "";
if (!gml) {
- var def = OpenLayers.Feature.Vector.style['default'];
var style = new OpenLayers.Style();
style.addRules([new OpenLayers.Rule(
{'symbolizer':
gml = new OpenLayers.Layer.GML("Data",url,
{format: OpenLayers.Format.OSM, formatOptions: {checkTags: true},
maxFeatures: 100, requestSuccess: customDataLoader,
- styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff'}})
+ displayInLayerSwitcher: false,
+ styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff', strokeWidth: 8}})
}
);
gml.events.register("loadend", gml, dataLoaded );
currentFeature = null;
}
-
- function dataLoaded() {
- $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
+ function dataLoaded() {
+ if (!browsing) { return; }
+ $("status").innerHTML = "Loaded."
- objList = document.createElement("ul");
+ objList = document.createElement("div")
+
+ list = document.createElement("ul");
for (var i = 0; i < this.features.length; i++) {
var feature = this.features[i];
link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);
li.appendChild(link);
- objList.appendChild(li);
+ list.appendChild(li);
}
+ objList.appendChild(list)
+ var link = document.createElement("a");
+ link.href = this.url;
+ link.appendChild(document.createTextNode("API"));
+ objList.appendChild(link)
$("object").innerHTML = "";
$("object").appendChild(objList);
+
}
function viewFeatureLink() {
layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
}
onFeatureSelect(this.feature);
- map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());
+ if (mode != "auto") {
+ map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());
+ }
return false;
}
div.appendChild(link)
$("object").appendChild(div);
- // Now the list of attributes
- var ul = document.createElement("ul");
var type = "way";
if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
type = "node";
}
- var li = document.createElement("li");
+
var link = document.createElement("a");
link.href = "/browse/"+type+"/"+feature.osm_id;
- link.appendChild(document.createTextNode(feature.osm_id));
- li.appendChild(link);
- ul.appendChild(li);
+ link.appendChild(document.createTextNode("Database entry for " + feature.osm_id));
+
+ var div = document.createElement("div");
+ div.style.marginTop = "20px"
+ div.appendChild(link);
+
+ $("object").appendChild(div);
+
+ // Now the list of attributes
+ var ul = document.createElement("ul");
for (var key in feature.attributes) {
var li = document.createElement("li");
var b = document.createElement("b");
li.appendChild(document.createTextNode(": " + feature.attributes[key]));
ul.appendChild(li);
}
+
$("object").appendChild(ul);
+ var link = document.createElement("a");
+ link.href = "/browse/"+type+"/"+feature.osm_id+"/history";
+ link.appendChild(document.createTextNode("History"));
+ ul.appendChild(li);
+ link.onclick = OpenLayers.Function.bind(loadHistory, {type: type, feature: feature, link: link});
+
+ $("object").appendChild(link);
+
// Stash the currently drawn feature
currentFeature = feature;
}
-
- function setBounds(bounds) {
- var epsg4326 = new OpenLayers.Projection("EPSG:4326");
- var decimals = Math.pow(10, Math.floor(map.getZoom() / 3));
-
- bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
-
- $("minlon").innerHTML = Math.round(bounds.left * decimals) / decimals;
- $("minlat").innerHTML = Math.round(bounds.bottom * decimals) / decimals;
- $("maxlon").innerHTML = Math.round(bounds.right * decimals) / decimals;
- $("maxlat").innerHTML = Math.round(bounds.top * decimals) / decimals;
+ function loadHistory() {
+ this.link.href = "";
+ this.link.innerHTML = "Wait...";
+ new Ajax.Request("/api/0.5/"+this.type+"/"+this.feature.osm_id+"/history", {onComplete: OpenLayers.Function.bind(displayHistory, this)});
+ return false;
}
- function validateLinks() {
- var bounds = this.getExtent();
- bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
-
- if (bounds.getWidth() * bounds.getHeight() > 0.25) {
- $("use_map").style.display = "none";
- } else {
- $("use_map").style.display = "inline";
- }
+ function displayHistory(request) {
+ if (currentFeature.osm_id != this.feature.osm_id || $("object").firstChild == objList) {
+ return false;
+ }
+ this.link.parentNode.removeChild(this.link);
+ var doc = request.responseXML;
+ var div = document.createElement("div");
+ var h3 = document.createElement("h3");
+ h3.appendChild(document.createTextNode("History"));
+ div.appendChild(h3);
+ var nodes = doc.getElementsByTagName(this.type);
+ var history = document.createElement("ul");
+ for (var i = nodes.length - 1; i >= 0; i--) {
+ var user = nodes[i].getAttribute("user") || "private user";
+ var timestamp = nodes[i].getAttribute("timestamp");
+ var item = document.createElement("li");
+ item.appendChild(document.createTextNode("Edited by " + user + " at " + timestamp));
+ history.appendChild(item);
+ }
+ div.appendChild(history);
+ var link = document.createElement("a");
+ link.appendChild(document.createTextNode("History entry for " + this.feature.osm_id));
+ link.href = "/browse/"+this.type+"/"+this.feature.osm_id+"/history";
+ div.appendChild(link);
+ $("object").appendChild(div);
}
+
start();
EOJ
projects / rails.git / blobdiff