OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
function startBrowse() {
+ browseActive = true;
+
openSidebar({ onclose: stopBrowse });
var vectors = new OpenLayers.Layer.Vector();
map.events.register("moveend", map, showData);
map.events.triggerEvent("moveend");
-
- browseActive = true;
}
function showData() {
if (map.getZoom() >= 15) {
useMap();
} else {
- $("browse_status").innerHTML = "Zoom in or Select an area of the map to view.";
+ setStatus("Zoom in or select an area of the map to view");
}
}
}
map.events.unregister("moveend", map, showData);
}
}
-
+
function startDrag() {
$("browse_select_box").innerHTML='Drag a box on the map to select an area';
};
$("browse_select_box").onclick = startDrag;
-
+
function useMap() {
var bounds = map.getExtent();
var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
}
$("browse_select_view").onclick = useMap;
-
+
function endDrag(bbox) {
var bounds = bbox.getBounds();
var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
$("browse_select_box").innerHTML = "Manually select a different area";
$("browse_select_view").style.display = "inline";
}
-
+
function displayFeatureWarning() {
- $("browse_status").innerHTML = "";
+ clearStatus();
var div = document.createElement("div");
input.onclick = loadFeatureList;
div.appendChild(input);
- $("browse_object_list").innerHTML = "";
- $("browse_object_list").appendChild(div);
+ $("browse_content").innerHTML = "";
+ $("browse_content").appendChild(div);
}
-
+
function loadFeatureList() {
browseDataLayer.addFeatures(browseFeatureList);
browseDataLayer.events.triggerEvent("loadend");
return false;
}
- function customDataLoader(request) {
+ function customDataLoader(request) {
if (browseActive) {
var doc = request.responseXML;
var size = projected.getWidth() * projected.getHeight();
if (size > 0.25) {
- $("browse_status").innerHTML = "Unable to load: Bounding box size of " + size + " is too large. (Must be smaller than 0.25)<br />";
+ setStatus("Unable to load: Bounding box size of " + size + " is too large (must be smaller than 0.25)");
} else {
- loadGML("/api/0.5/map?bbox=" + projected.toBBOX());
+ loadGML("/api/#{API_VERSION}/map?bbox=" + projected.toBBOX());
}
}
function loadGML(url) {
- $("browse_status").innerHTML = "Loading...";
- $("browse_object_list").innerHTML = "";
+ setStatus("Loading...");
+ $("browse_content").innerHTML = "";
if (!browseDataLayer) {
var style = new OpenLayers.Style();
requestSuccess: customDataLoader,
displayInLayerSwitcher: false,
styleMap: new OpenLayers.StyleMap({
- default: style,
- select: { strokeColor: '#0000ff', strokeWidth: 8 }
+ 'default': style,
+ 'select': { strokeColor: '#0000ff', strokeWidth: 8 }
})
});
browseDataLayer.events.register("loadend", browseDataLayer, dataLoaded );
map.addLayer(browseDataLayer);
browseSelectControl = new OpenLayers.Control.SelectFeature(browseDataLayer, { onSelect: onFeatureSelect });
- browseSelectControl.handler.stopDown = false;
- browseSelectControl.handler.stopUp = false;
+ browseSelectControl.handlers.feature.stopDown = false;
+ browseSelectControl.handlers.feature.stopUp = false;
map.addControl(browseSelectControl);
browseSelectControl.activate();
} else {
function dataLoaded() {
if (browseActive) {
- $("browse_status").innerHTML = "Loaded."
+ clearStatus();
+ browseObjectList = document.createElement("div")
+
+ var heading = document.createElement("p");
+ heading.className = "browse_heading";
+ heading.appendChild(document.createTextNode("Object list"));
+ browseObjectList.appendChild(heading);
+
var list = document.createElement("ul");
for (var i = 0; i < this.features.length; i++) {
var feature = this.features[i];
// Type, for linking
- var type = "way";
- if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
- type = "node";
- }
- var typeName = type.substr(0,1).toUpperCase() + type.substr(1,type.length);
+ var type = featureType(feature);
+ var typeName = ucFirst(type);
var li = document.createElement("li");
li.appendChild(document.createTextNode(typeName + " "));
list.appendChild(li);
}
- browseObjectList = document.createElement("div")
browseObjectList.appendChild(list)
var link = document.createElement("a");
link.appendChild(document.createTextNode("API"));
browseObjectList.appendChild(link);
- $("browse_object_list").innerHTML = "";
- $("browse_object_list").appendChild(browseObjectList);
+ $("browse_content").innerHTML = "";
+ $("browse_content").appendChild(browseObjectList);
}
}
}
function loadObjectList() {
- $("browse_object_list").innerHTML="";
- $("browse_object_list").appendChild(browseObjectList);
+ $("browse_content").innerHTML="";
+ $("browse_content").appendChild(browseObjectList);
return false;
}
);
// If the current object is the list, don't innerHTML="", since that could clear it.
- if ($("browse_object_list").firstChild == browseObjectList) {
- $("browse_object_list").removeChild(browseObjectList);
+ if ($("browse_content").firstChild == browseObjectList) {
+ $("browse_content").removeChild(browseObjectList);
} else {
- $("browse_object_list").innerHTML = "";
+ $("browse_content").innerHTML = "";
}
// Create a link back to the object list
+ var div = document.createElement("div");
+ div.style.textAlign = "center";
+ div.style.marginBottom = "20px";
+ $("browse_content").appendChild(div);
var link = document.createElement("a");
link.href = "#";
link.onclick = loadObjectList;
- link.appendChild(document.createTextNode("Back to Object List"));
+ link.appendChild(document.createTextNode("Display object list"));
+ div.appendChild(link);
- var div = document.createElement("div");
- div.appendChild(link)
+ var table = document.createElement("table");
+ table.width = "100%";
+ table.className = "browse_heading";
+ $("browse_content").appendChild(table);
- $("browse_object_list").appendChild(div);
-
- var type = "way";
- if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
- type = "node";
- }
-
+ var tr = document.createElement("tr");
+ table.appendChild(tr);
+
+ var heading = document.createElement("td");
+ heading.appendChild(document.createTextNode(featureName(feature)));
+ tr.appendChild(heading);
+
+ var td = document.createElement("td");
+ td.align = "right";
+ tr.appendChild(td);
+
+ var type = featureType(feature);
var link = document.createElement("a");
link.href = "/browse/" + type + "/" + feature.osm_id;
- link.appendChild(document.createTextNode("Database entry for " + feature.osm_id));
-
+ link.appendChild(document.createTextNode("Details"));
+ td.appendChild(link);
+
var div = document.createElement("div");
- div.style.marginTop = "20px"
- div.appendChild(link);
+ div.className = "browse_details";
- $("browse_object_list").appendChild(div);
+ $("browse_content").appendChild(div);
// Now the list of attributes
var ul = document.createElement("ul");
ul.appendChild(li);
}
- $("browse_object_list").appendChild(ul);
+ div.appendChild(ul);
var link = document.createElement("a");
- link.href = "/browse/"+type+"/"+feature.osm_id+"/history";
- link.appendChild(document.createTextNode("History"));
+ link.href = "/browse/" + type + "/" + feature.osm_id + "/history";
+ link.appendChild(document.createTextNode("Show history"));
link.onclick = OpenLayers.Function.bind(loadHistory, {
type: type, feature: feature, link: link
});
- $("browse_object_list").appendChild(link);
+ div.appendChild(link);
// Stash the currently drawn feature
browseActiveFeature = feature;
this.link.href = "";
this.link.innerHTML = "Wait...";
- new Ajax.Request("/api/0.5/" + this.type + "/" + this.feature.osm_id + "/history", {
+ new Ajax.Request("/api/#{API_VERSION}/" + this.type + "/" + this.feature.osm_id + "/history", {
onComplete: OpenLayers.Function.bind(displayHistory, this)
});
}
function displayHistory(request) {
- if (browseActiveFeature.osm_id != this.feature.osm_id || $("browse_object_list").firstChild == browseObjectList) {
+ if (browseActiveFeature.osm_id != this.feature.osm_id || $("browse_content").firstChild == browseObjectList) {
return false;
}
this.link.parentNode.removeChild(this.link);
var doc = request.responseXML;
+
+ var table = document.createElement("table");
+ table.width = "100%";
+ table.className = "browse_heading";
+ $("browse_content").appendChild(table);
+
+ var tr = document.createElement("tr");
+ table.appendChild(tr);
+
+ var heading = document.createElement("td");
+ heading.appendChild(document.createTextNode("History for " + featureName(this.feature)));
+ tr.appendChild(heading);
+
+ var td = document.createElement("td");
+ td.align = "right";
+ tr.appendChild(td);
+
+ var link = document.createElement("a");
+ link.href = "/browse/" + this.type + "/" + this.feature.osm_id + "/history";
+ link.appendChild(document.createTextNode("Details"));
+ td.appendChild(link);
+
var div = document.createElement("div");
- var h3 = document.createElement("h3");
- h3.appendChild(document.createTextNode("History"));
- div.appendChild(h3);
+ div.className = "browse_details";
var nodes = doc.getElementsByTagName(this.type);
var history = document.createElement("ul");
}
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);
+ $("browse_content").appendChild(div);
+ }
- $("browse_object_list").appendChild(div);
+ function featureType(feature) {
+ if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
+ return "node";
+ } else {
+ return "way";
+ }
}
-
+
+ function featureName(feature) {
+ if (feature.attributes.name) {
+ return feature.attributes.name;
+ } else {
+ return ucFirst(featureType(feature)) + " " + feature.osm_id;
+ }
+ }
+
+ function setStatus(status) {
+ $("browse_status").innerHTML = status;
+ $("browse_status").style.display = "block";
+ }
+
+ function clearStatus() {
+ $("browse_status").innerHTML = "";
+ $("browse_status").style.display = "none";
+ }
+
+ function ucFirst(str) {
+ return str.substr(0,1).toUpperCase() + str.substr(1,str.length);
+ }
+
startBrowse();
EOJ
projects / rails.git / blobdiff