Tidy up map browse code and qualify various global names to avoid
any risk of conflicts.
This commit is contained in:
Tom Hughes
parent
75f160aeb4
commit
18777b41ea
2 changed files with 407 additions and 344 deletions
|
|
@ -1,12 +1,13 @@
|
|||
<div style="padding: 0px 10px">
|
||||
<div style="text-align: center">
|
||||
<p style="margin-top: 10px">
|
||||
<a id="use_map" display="hidden" href="#">View Data For Current Map View</a>
|
||||
<a id="browse_select_view" href="#">View data for current map view</a>
|
||||
<br />
|
||||
<a id='drag_box' href="#">Manually select a different area</a>
|
||||
<a id="browse_select_box" href="#">Manually select a different area</a>
|
||||
</p>
|
||||
</div>
|
||||
<div id="status"></div>
|
||||
<div id="object">
|
||||
<div id="browse_status">
|
||||
</div>
|
||||
<div id="browse_object_list">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,25 @@
|
|||
page.replace_html :sidebar_title, 'Data'
|
||||
page.replace_html :sidebar_content, :partial => 'start'
|
||||
page << <<EOJ
|
||||
var browseBoxControl;
|
||||
var browseActive;
|
||||
var browseMode = "auto";
|
||||
var browseBounds;
|
||||
var browseFeatureList;
|
||||
var browseActiveFeature;
|
||||
var browseDataLayer;
|
||||
var browseSelectControl;
|
||||
var browseObjectList;
|
||||
|
||||
var gml, sf, objList, currentFeature, featureList, mode = "auto", currentBounds, browsing;
|
||||
OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
|
||||
OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
|
||||
|
||||
function start() {
|
||||
function startBrowse() {
|
||||
openSidebar({ onclose: stopBrowse });
|
||||
|
||||
var vectors = new OpenLayers.Layer.Vector();
|
||||
|
||||
box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
|
||||
browseBoxControl = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
|
||||
handlerOptions: {
|
||||
sides: 4,
|
||||
snapAngle: 90,
|
||||
|
|
@ -19,109 +28,133 @@ page << <<EOJ
|
|||
callbacks: { done: endDrag }
|
||||
}
|
||||
});
|
||||
map.addControl(box);
|
||||
map.addControl(browseBoxControl);
|
||||
|
||||
map.events.register("moveend", map, showData);
|
||||
map.events.triggerEvent("moveend");
|
||||
map.dataLayer.stopBrowse = stopBrowse;
|
||||
browsing = true;
|
||||
|
||||
browseActive = true;
|
||||
}
|
||||
|
||||
function showData() {
|
||||
if (mode == "manual") { return; }
|
||||
if (browseMode == "auto") {
|
||||
if (map.getZoom() >= 15) {
|
||||
useMap();
|
||||
} else {
|
||||
$("status").innerHTML = "Zoom in or Select an area of the map to view.";
|
||||
$("browse_status").innerHTML = "Zoom in or Select an area of the map to view.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function stopBrowse() {
|
||||
if (browsing) {
|
||||
browsing = false;
|
||||
map.dataLayer.stopBrowse = null;
|
||||
if (gml) {
|
||||
gml.destroy();
|
||||
gml = null;
|
||||
if (browseActive) {
|
||||
browseActive = false;
|
||||
|
||||
if (browseDataLayer) {
|
||||
browseDataLayer.destroy();
|
||||
browseDataLayer = null;
|
||||
}
|
||||
if (sf) {
|
||||
sf.destroy();
|
||||
sf = null;
|
||||
|
||||
if (browseSelectControl) {
|
||||
browseSelectControl.destroy();
|
||||
browseSelectControl = null;
|
||||
}
|
||||
if (box) {
|
||||
box.destroy();
|
||||
box = null;
|
||||
|
||||
if (browseBoxControl) {
|
||||
browseBoxControl.destroy();
|
||||
browseBoxControl = null;
|
||||
}
|
||||
if (currentFeature) {
|
||||
currentFeature.destroy();
|
||||
currentFeature = null;
|
||||
|
||||
if (browseActiveFeature) {
|
||||
browseActiveFeature.destroy();
|
||||
browseActiveFeature = null;
|
||||
}
|
||||
|
||||
map.dataLayer.setVisibility(false);
|
||||
map.events.unregister("moveend", map, showData);
|
||||
}
|
||||
}
|
||||
|
||||
function startDrag() {
|
||||
$("drag_box").innerHTML='Drag a box on the map to select an area';
|
||||
box.activate();
|
||||
$("browse_select_box").innerHTML='Drag a box on the map to select an area';
|
||||
|
||||
browseBoxControl.activate();
|
||||
|
||||
return false;
|
||||
};
|
||||
$("drag_box").onclick = startDrag;
|
||||
|
||||
$("browse_select_box").onclick = startDrag;
|
||||
|
||||
function useMap() {
|
||||
var bounds = map.getExtent();
|
||||
var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
|
||||
if (!currentBounds || !currentBounds.containsBounds(projected)) {
|
||||
|
||||
if (!browseBounds || !browseBounds.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),
|
||||
var tileBounds = new OpenLayers.Bounds(center.lon - (tileWidth / 2),
|
||||
center.lat - (tileHeight / 2),
|
||||
center.lon + (tileWidth / 2),
|
||||
center.lat + (tileHeight / 2));
|
||||
|
||||
currentBounds = tileBounds;
|
||||
browseBounds = tileBounds;
|
||||
getData(tileBounds);
|
||||
mode = "auto";
|
||||
$("use_map").style.display="none";
|
||||
|
||||
browseMode = "auto";
|
||||
|
||||
$("browse_select_view").style.display = "none";
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
$("use_map").onclick = useMap;
|
||||
|
||||
$("browse_select_view").onclick = useMap;
|
||||
|
||||
function endDrag(bbox) {
|
||||
var bounds = bbox.getBounds();
|
||||
box.deactivate();
|
||||
currentBounds = bounds;
|
||||
var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
|
||||
|
||||
browseBoxControl.deactivate();
|
||||
browseBounds = projected;
|
||||
getData(bounds);
|
||||
$("drag_box").innerHTML = "Manually select a different area";
|
||||
mode = "manual";
|
||||
$("use_map").style.display="inline";
|
||||
|
||||
browseMode = "manual";
|
||||
|
||||
$("browse_select_box").innerHTML = "Manually select a different area";
|
||||
$("browse_select_view").style.display = "inline";
|
||||
}
|
||||
|
||||
function displayFeatureWarning() {
|
||||
$("status").innerHTML = "";
|
||||
$("browse_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."));
|
||||
p.appendChild(document.createTextNode("You have loaded an area which contains " + browseFeatureList.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);
|
||||
|
||||
$("browse_object_list").innerHTML = "";
|
||||
$("browse_object_list").appendChild(div);
|
||||
}
|
||||
|
||||
function loadFeatureList() {
|
||||
gml.addFeatures(featureList);
|
||||
gml.events.triggerEvent("loadend");
|
||||
browseDataLayer.addFeatures(browseFeatureList);
|
||||
browseDataLayer.events.triggerEvent("loadend");
|
||||
|
||||
browseFeatureList = [];
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function customDataLoader(request) {
|
||||
if (!browsing) { return; }
|
||||
if (browseActive) {
|
||||
var doc = request.responseXML;
|
||||
|
||||
if (!doc || !doc.documentElement) {
|
||||
|
|
@ -131,77 +164,82 @@ page << <<EOJ
|
|||
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 = [];
|
||||
|
||||
browseFeatureList = gml.read(doc);
|
||||
|
||||
if (!this.maxFeatures || browseFeatureList.length <= this.maxFeatures) {
|
||||
loadFeatureList();
|
||||
} else {
|
||||
featureList = features;
|
||||
displayFeatureWarning();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getData(bounds) {
|
||||
var projected = bounds.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
|
||||
var size = projected.getWidth() * projected.getHeight();
|
||||
|
||||
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,
|
||||
displayInLayerSwitcher: false,
|
||||
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();
|
||||
|
||||
$("browse_status").innerHTML = "Unable to load: Bounding box size of " + size + " is too large. (Must be smaller than 0.25)<br />";
|
||||
} else {
|
||||
gml.setUrl(url);
|
||||
loadGML("/api/0.5/map?bbox=" + projected.toBBOX());
|
||||
}
|
||||
}
|
||||
|
||||
currentFeature = null;
|
||||
function loadGML(url) {
|
||||
$("browse_status").innerHTML = "Loading...";
|
||||
$("browse_object_list").innerHTML = "";
|
||||
|
||||
if (!browseDataLayer) {
|
||||
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' }
|
||||
}
|
||||
})]);
|
||||
|
||||
browseDataLayer = new OpenLayers.Layer.GML("Data", url, {
|
||||
format: OpenLayers.Format.OSM,
|
||||
formatOptions: { checkTags: true },
|
||||
maxFeatures: 100,
|
||||
requestSuccess: customDataLoader,
|
||||
displayInLayerSwitcher: false,
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
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;
|
||||
map.addControl(browseSelectControl);
|
||||
browseSelectControl.activate();
|
||||
} else {
|
||||
browseDataLayer.setUrl(url);
|
||||
}
|
||||
|
||||
browseActiveFeature = null;
|
||||
}
|
||||
|
||||
function dataLoaded() {
|
||||
if (!browsing) { return; }
|
||||
$("status").innerHTML = "Loaded."
|
||||
if (browseActive) {
|
||||
$("browse_status").innerHTML = "Loaded."
|
||||
|
||||
objList = document.createElement("div")
|
||||
var list = document.createElement("ul");
|
||||
|
||||
list = document.createElement("ul");
|
||||
for (var i = 0; i < this.features.length; i++) {
|
||||
var feature = this.features[i];
|
||||
|
||||
|
|
@ -210,9 +248,9 @@ page << <<EOJ
|
|||
if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
|
||||
type = "node";
|
||||
}
|
||||
var nice_name = type.substr(0,1).toUpperCase() + type.substr(1,type.length);
|
||||
var typeName = type.substr(0,1).toUpperCase() + type.substr(1,type.length);
|
||||
var li = document.createElement("li");
|
||||
li.appendChild(document.createTextNode(nice_name + " "));
|
||||
li.appendChild(document.createTextNode(typeName + " "));
|
||||
|
||||
// Link, for viewing in the tab
|
||||
var link = document.createElement("a");
|
||||
|
|
@ -225,40 +263,50 @@ page << <<EOJ
|
|||
|
||||
list.appendChild(li);
|
||||
}
|
||||
objList.appendChild(list)
|
||||
|
||||
browseObjectList = document.createElement("div")
|
||||
browseObjectList.appendChild(list)
|
||||
|
||||
var link = document.createElement("a");
|
||||
link.href = this.url;
|
||||
link.appendChild(document.createTextNode("API"));
|
||||
objList.appendChild(link)
|
||||
$("object").innerHTML = "";
|
||||
$("object").appendChild(objList);
|
||||
browseObjectList.appendChild(link);
|
||||
|
||||
$("browse_object_list").innerHTML = "";
|
||||
$("browse_object_list").appendChild(browseObjectList);
|
||||
}
|
||||
}
|
||||
|
||||
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") {
|
||||
|
||||
if (browseMode != "auto") {
|
||||
map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function loadObjList() {
|
||||
$("object").innerHTML="";
|
||||
$("object").appendChild(objList);
|
||||
function loadObjectList() {
|
||||
$("browse_object_list").innerHTML="";
|
||||
$("browse_object_list").appendChild(browseObjectList);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onFeatureSelect(feature) {
|
||||
// Unselect previously selected feature
|
||||
if (currentFeature) {
|
||||
currentFeature.layer.drawFeature(
|
||||
currentFeature, currentFeature.layer.styleMap.createSymbolizer(currentFeature, "default")
|
||||
if (browseActiveFeature) {
|
||||
browseActiveFeature.layer.drawFeature(
|
||||
browseActiveFeature,
|
||||
browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default")
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -267,21 +315,23 @@ page << <<EOJ
|
|||
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);
|
||||
// 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);
|
||||
} else {
|
||||
$("object").innerHTML = "";
|
||||
$("browse_object_list").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.onclick = loadObjectList;
|
||||
link.appendChild(document.createTextNode("Back to Object List"));
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.appendChild(link)
|
||||
$("object").appendChild(div);
|
||||
|
||||
$("browse_object_list").appendChild(div);
|
||||
|
||||
var type = "way";
|
||||
if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
|
||||
|
|
@ -296,7 +346,7 @@ page << <<EOJ
|
|||
div.style.marginTop = "20px"
|
||||
div.appendChild(link);
|
||||
|
||||
$("object").appendChild(div);
|
||||
$("browse_object_list").appendChild(div);
|
||||
|
||||
// Now the list of attributes
|
||||
var ul = document.createElement("ul");
|
||||
|
|
@ -309,35 +359,45 @@ page << <<EOJ
|
|||
ul.appendChild(li);
|
||||
}
|
||||
|
||||
$("object").appendChild(ul);
|
||||
$("browse_object_list").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});
|
||||
link.onclick = OpenLayers.Function.bind(loadHistory, {
|
||||
type: type, feature: feature, link: link
|
||||
});
|
||||
|
||||
$("object").appendChild(link);
|
||||
$("browse_object_list").appendChild(link);
|
||||
|
||||
// Stash the currently drawn feature
|
||||
currentFeature = feature;
|
||||
browseActiveFeature = 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)});
|
||||
|
||||
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) {
|
||||
if (browseActiveFeature.osm_id != this.feature.osm_id || $("browse_object_list").firstChild == browseObjectList) {
|
||||
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--) {
|
||||
|
|
@ -348,12 +408,14 @@ page << <<EOJ
|
|||
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);
|
||||
|
||||
$("browse_object_list").appendChild(div);
|
||||
}
|
||||
|
||||
start();
|
||||
startBrowse();
|
||||
EOJ
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue