259 lines
9.4 KiB
Text
259 lines
9.4 KiB
Text
page.replace_html :sidebar_title, 'Browse'
|
|
page.replace_html :sidebar_content, :partial => 'start'
|
|
page << <<EOJ
|
|
|
|
var gml, sf, objList, currentFeature, featureList;
|
|
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);
|
|
}
|
|
|
|
function stopBrowse() {
|
|
if (gml) {
|
|
gml.destroy();
|
|
gml = null;
|
|
}
|
|
if (sf) {
|
|
sf.destroy();
|
|
sf = null;
|
|
}
|
|
if (currentFeature) {
|
|
currentFeature.destroy();
|
|
currentFeature = null;
|
|
}
|
|
}
|
|
|
|
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();
|
|
setBounds(bounds);
|
|
getData(bounds);
|
|
return false;
|
|
}
|
|
$("use_map").onclick = useMap;
|
|
|
|
function endDrag(bbox) {
|
|
var bounds = bbox.getBounds();
|
|
setBounds(bounds);
|
|
box.deactivate();
|
|
getData(bounds);
|
|
$("drag_box").innerHTML = "Manually select a different area";
|
|
}
|
|
function displayFeatureWarning() {
|
|
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");
|
|
}
|
|
|
|
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) {
|
|
$("status").innerHTML = "Loading...";
|
|
|
|
bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
|
|
var url = "/api/0.5/map?bbox="+bounds.toBBOX();
|
|
|
|
if (!gml) {
|
|
var def = OpenLayers.Feature.Vector.style['default'];
|
|
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'}})
|
|
}
|
|
);
|
|
gml.events.register("loadend", gml, dataLoaded );
|
|
map.addLayer(gml);
|
|
|
|
sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': onFeatureSelect});
|
|
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);
|
|
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);
|
|
}
|
|
$("object").appendChild(ul);
|
|
|
|
// 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;
|
|
}
|
|
|
|
start();
|
|
EOJ
|