329 lines
12 KiB
Text
329 lines
12 KiB
Text
page.replace_html :sidebar_title, 'Data'
|
|
page.replace_html :sidebar_content, :partial => 'start'
|
|
page << <<EOJ
|
|
|
|
var gml, sf, objList, currentFeature, featureList, mode = "auto", currentBounds;
|
|
OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
|
|
OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
|
|
|
|
function start() {
|
|
openSidebar({ onclose: stopBrowse });
|
|
var vectors = new OpenLayers.Layer.Vector();
|
|
|
|
box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
|
|
handlerOptions: {
|
|
sides: 4,
|
|
snapAngle: 90,
|
|
irregular: true,
|
|
persist: true,
|
|
callbacks: { done: endDrag }
|
|
}
|
|
});
|
|
map.addControl(box);
|
|
map.events.register("moveend", map, showData);
|
|
map.events.triggerEvent("moveend");
|
|
}
|
|
|
|
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, showData);
|
|
}
|
|
|
|
function startDrag() {
|
|
$("drag_box").innerHTML='Drag a box on the map to select an area';
|
|
box.activate();
|
|
return false;
|
|
};
|
|
$("drag_box").onclick = startDrag;
|
|
|
|
function useMap() {
|
|
var bounds = map.getExtent();
|
|
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";
|
|
$("drag_box").style.display="inline";
|
|
$("use_map").style.display="none";
|
|
}
|
|
return false;
|
|
}
|
|
$("use_map").onclick = useMap;
|
|
|
|
function endDrag(bbox) {
|
|
var bounds = bbox.getBounds();
|
|
box.deactivate();
|
|
getData(bounds);
|
|
$("drag_box").innerHTML = "Manually select a different area";
|
|
mode = "manual";
|
|
$("use_map").style.display="inline";
|
|
$("drag_box").style.display="none";
|
|
}
|
|
|
|
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."));
|
|
div.appendChild(p);
|
|
var input = document.createElement("input");
|
|
input.type = "submit";
|
|
input.value = "Load Data";
|
|
input.onclick = loadFeatureList;
|
|
div.appendChild(input);
|
|
$("object").innerHTML="";
|
|
$("object").appendChild(div);
|
|
}
|
|
|
|
function loadFeatureList() {
|
|
gml.addFeatures(featureList);
|
|
gml.events.triggerEvent("loadend");
|
|
return false;
|
|
}
|
|
|
|
function customDataLoader(request) {
|
|
var doc = request.responseXML;
|
|
|
|
if (!doc || !doc.documentElement) {
|
|
doc = request.responseText;
|
|
}
|
|
|
|
var options = {};
|
|
|
|
OpenLayers.Util.extend(options, this.formatOptions);
|
|
if (this.map && !this.projection.equals(this.map.getProjectionObject())) {
|
|
options.externalProjection = this.projection;
|
|
options.internalProjection = this.map.getProjectionObject();
|
|
}
|
|
|
|
var gml = this.format ? new this.format(options) : new OpenLayers.Format.GML(options);
|
|
var features = gml.read(doc);
|
|
if (!this.maxFeatures || features.length <= this.maxFeatures) {
|
|
this.addFeatures(features);
|
|
this.events.triggerEvent("loadend");
|
|
featureList = [];
|
|
} else {
|
|
featureList = features;
|
|
displayFeatureWarning();
|
|
}
|
|
}
|
|
|
|
function getData(bounds) {
|
|
|
|
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)<br />";
|
|
return;
|
|
}
|
|
|
|
var url = "/api/0.5/map?bbox="+bounds.toBBOX();
|
|
|
|
loadGML(url);
|
|
}
|
|
function loadGML(url) {
|
|
$("status").innerHTML = "Loading...";
|
|
$("object").innerHTML = "";
|
|
if (!gml) {
|
|
var style = new OpenLayers.Style();
|
|
style.addRules([new OpenLayers.Rule(
|
|
{'symbolizer':
|
|
{"Polygon": {'fillColor': '#ff0000', 'strokeColor': '#ff0000'},
|
|
"Line": {'fillColor': '#ffff00', 'strokeColor': '#000000', strokeOpacity: '0.4'},
|
|
"Point": {'fillColor': '#00ff00', 'strokeColor': '#00ff00'}}
|
|
}
|
|
)]);
|
|
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', strokeWidth: 8}})
|
|
}
|
|
);
|
|
gml.events.register("loadend", gml, dataLoaded );
|
|
map.addLayer(gml);
|
|
|
|
sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': onFeatureSelect});
|
|
sf.handler.stopDown = false;
|
|
sf.handler.stopUp = false;
|
|
map.addControl(sf);
|
|
sf.activate();
|
|
|
|
} else {
|
|
gml.setUrl(url);
|
|
}
|
|
|
|
currentFeature = null;
|
|
}
|
|
function dataLoaded() {
|
|
$("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
|
|
|
|
objList = 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 nice_name = type.substr(0,1).toUpperCase() + type.substr(1,type.length);
|
|
var li = document.createElement("li");
|
|
li.appendChild(document.createTextNode(nice_name + " "));
|
|
|
|
// Link, for viewing in the tab
|
|
var link = document.createElement("a");
|
|
link.href = "/browse/" + type + "/" + feature.osm_id;
|
|
var name = feature.attributes.name || feature.osm_id;
|
|
link.appendChild(document.createTextNode(name));
|
|
link.feature = feature;
|
|
link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);
|
|
li.appendChild(link);
|
|
|
|
objList.appendChild(li);
|
|
}
|
|
$("object").innerHTML = "";
|
|
$("object").appendChild(objList);
|
|
}
|
|
|
|
function viewFeatureLink() {
|
|
var layer = this.feature.layer;
|
|
for (var i = 0; i < layer.selectedFeatures.length; i++) {
|
|
var f = layer.selectedFeatures[i];
|
|
layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
|
|
}
|
|
onFeatureSelect(this.feature);
|
|
if (mode != "auto") {
|
|
map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function loadObjList() {
|
|
$("object").innerHTML="";
|
|
$("object").appendChild(objList);
|
|
return false;
|
|
}
|
|
|
|
function onFeatureSelect(feature) {
|
|
// Unselect previously selected feature
|
|
if (currentFeature) {
|
|
currentFeature.layer.drawFeature(
|
|
currentFeature, currentFeature.layer.styleMap.createSymbolizer(currentFeature, "default")
|
|
);
|
|
}
|
|
|
|
// Redraw in selected style
|
|
feature.layer.drawFeature(
|
|
feature, feature.layer.styleMap.createSymbolizer(feature, "select")
|
|
);
|
|
|
|
// If the current object is the list, don't innerHTML="", since that could clar it.
|
|
if ($("object").firstChild == objList) {
|
|
$("object").removeChild(objList);
|
|
} else {
|
|
$("object").innerHTML = "";
|
|
}
|
|
|
|
// Create a link back to the object list
|
|
var div = document.createElement("div");
|
|
var link = document.createElement("a");
|
|
link.href="#";
|
|
link.onclick = loadObjList;
|
|
link.appendChild(document.createTextNode("Back to Object List"));
|
|
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);
|
|
for (var key in feature.attributes) {
|
|
var li = document.createElement("li");
|
|
var b = document.createElement("b");
|
|
b.appendChild(document.createTextNode(key));
|
|
li.appendChild(b);
|
|
li.appendChild(document.createTextNode(": " + feature.attributes[key]));
|
|
ul.appendChild(li);
|
|
}
|
|
|
|
var li = document.createElement("li");
|
|
var link = document.createElement("a");
|
|
link.href = "/browse/"+type+"/"+feature.osm_id+"/history";
|
|
link.appendChild(document.createTextNode("History"));
|
|
li.appendChild(link);
|
|
ul.appendChild(li);
|
|
link.onclick = OpenLayers.Function.bind(loadHistory, {type: type, feature: feature, link: link});
|
|
$("object").appendChild(ul);
|
|
|
|
|
|
// Stash the currently drawn feature
|
|
currentFeature = feature;
|
|
}
|
|
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 displayHistory(request) {
|
|
if (currentFeature.osm_id != this.feature.osm_id || $("object").firstChild == objList) {
|
|
return false;
|
|
}
|
|
this.link.parentNode.parentNode.removeChild(this.link.parentNode);
|
|
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 = 0; i < nodes.length; 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);
|
|
$("object").appendChild(div);
|
|
}
|
|
|
|
start();
|
|
EOJ
|