Merge branch 'master' into notes
Conflicts: Gemfile.lock app/views/browse/_map.html.erb app/views/site/index.html.erb
This commit is contained in:
Tom Hughes
commit
0037502426
190 changed files with 3488 additions and 2999 deletions
|
|
@ -6,13 +6,9 @@
|
|||
//= require augment
|
||||
//= require openlayers
|
||||
//= require i18n/translations
|
||||
//= require globals
|
||||
//= require params
|
||||
//= require osm
|
||||
//= require piwik
|
||||
//= require browse
|
||||
//= require export
|
||||
//= require map
|
||||
//= require key
|
||||
//= require menu
|
||||
//= require sidebar
|
||||
//= require richtext
|
||||
|
|
@ -30,7 +26,7 @@ function zoomPrecision(zoom) {
|
|||
* Called as the user scrolls/zooms around to aniplate hrefs of the
|
||||
* view tab and various other links
|
||||
*/
|
||||
function updatelinks(lon,lat,zoom,layers,minlon,minlat,maxlon,maxlat,objtype,objid) {
|
||||
function updatelinks(lon,lat,zoom,layers,minlon,minlat,maxlon,maxlat,object) {
|
||||
var toPrecision = zoomPrecision(zoom);
|
||||
var node;
|
||||
|
||||
|
|
@ -59,8 +55,8 @@ function updatelinks(lon,lat,zoom,layers,minlon,minlat,maxlon,maxlat,objtype,obj
|
|||
args.layers = layers;
|
||||
}
|
||||
|
||||
if (objtype && $(link).hasClass("object")) {
|
||||
args[objtype] = objid;
|
||||
if (object && $(link).hasClass("object")) {
|
||||
args[object.type] = object.id;
|
||||
}
|
||||
|
||||
var minzoom = $(link).data("minzoom");
|
||||
|
|
@ -88,8 +84,8 @@ function updatelinks(lon,lat,zoom,layers,minlon,minlat,maxlon,maxlat,objtype,obj
|
|||
var prefix = shortlinkPrefix();
|
||||
|
||||
// Add ?{node,way,relation}=id to the arguments
|
||||
if (objtype && objid) {
|
||||
args[objtype] = objid;
|
||||
if (object) {
|
||||
args[object.type] = object.id;
|
||||
}
|
||||
|
||||
// This is a hack to omit the default mapnik layer from the shortlink.
|
||||
|
|
@ -104,7 +100,7 @@ function updatelinks(lon,lat,zoom,layers,minlon,minlat,maxlon,maxlat,objtype,obj
|
|||
// ?{node,way,relation}= can be safely omitted from the shortlink
|
||||
// which encodes lat/lon/zoom. If new URL parameters are added to
|
||||
// the main slippy map this needs to be changed.
|
||||
if (args.layers || args[objtype]) {
|
||||
if (args.layers || object) {
|
||||
this.href = setArgs(prefix + "/go/" + code, args);
|
||||
} else {
|
||||
this.href = prefix + "/go/" + code;
|
||||
|
|
|
|||
|
|
@ -1,549 +1,99 @@
|
|||
function startBrowse(sidebarHtml) {
|
||||
var browseBoxControl;
|
||||
var browseMode = "auto";
|
||||
var browseBounds;
|
||||
var browseFeatureList;
|
||||
var browseActiveFeature;
|
||||
var browseDataLayer;
|
||||
var browseSelectControl;
|
||||
var browseObjectList;
|
||||
var areasHidden = false;
|
||||
$(document).ready(function () {
|
||||
function remoteEditHandler(bbox, select) {
|
||||
var left = bbox.left - 0.0001;
|
||||
var top = bbox.top + 0.0001;
|
||||
var right = bbox.right + 0.0001;
|
||||
var bottom = bbox.bottom - 0.0001;
|
||||
var loaded = false;
|
||||
|
||||
OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
|
||||
OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
|
||||
$("#linkloader").load(function () { loaded = true; });
|
||||
|
||||
map.dataLayer.active = true;
|
||||
|
||||
$("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title'));
|
||||
$("#sidebar_content").html(sidebarHtml);
|
||||
|
||||
openSidebar();
|
||||
|
||||
var vectors = new OpenLayers.Layer.Vector();
|
||||
|
||||
browseBoxControl = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
|
||||
handlerOptions: {
|
||||
sides: 4,
|
||||
snapAngle: 90,
|
||||
irregular: true,
|
||||
persist: true
|
||||
if (select) {
|
||||
$("#linkloader").attr("src", "http://127.0.0.1:8111/load_and_zoom?left=" + left + "&top=" + top + "&right=" + right + "&bottom=" + bottom + "&select=" + select);
|
||||
} else {
|
||||
$("#linkloader").attr("src", "http://127.0.0.1:8111/load_and_zoom?left=" + left + "&top=" + top + "&right=" + right + "&bottom=" + bottom);
|
||||
}
|
||||
});
|
||||
browseBoxControl.handler.callbacks.done = endDrag;
|
||||
map.addControl(browseBoxControl);
|
||||
|
||||
map.events.register("moveend", map, updateData);
|
||||
map.events.triggerEvent("moveend");
|
||||
|
||||
$("#browse_select_view").click(useMap);
|
||||
|
||||
$("#browse_select_box").click(startDrag);
|
||||
|
||||
$("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
|
||||
$("#browse_hide_areas_box").show();
|
||||
$("#browse_hide_areas_box").click(hideAreas);
|
||||
|
||||
function updateData() {
|
||||
if (browseMode == "auto") {
|
||||
if (map.getZoom() >= 15) {
|
||||
useMap(false);
|
||||
} else {
|
||||
setStatus(I18n.t('browse.start_rjs.zoom_or_select'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$("#sidebar").one("closed", function () {
|
||||
if (map.dataLayer.active) {
|
||||
map.dataLayer.active = false;
|
||||
|
||||
if (browseSelectControl) {
|
||||
browseSelectControl.destroy();
|
||||
browseSelectControl = null;
|
||||
}
|
||||
|
||||
if (browseBoxControl) {
|
||||
browseBoxControl.destroy();
|
||||
browseBoxControl = null;
|
||||
}
|
||||
|
||||
if (browseActiveFeature) {
|
||||
browseActiveFeature.destroy();
|
||||
browseActiveFeature = null;
|
||||
}
|
||||
|
||||
if (browseDataLayer) {
|
||||
browseDataLayer.destroy();
|
||||
browseDataLayer = null;
|
||||
}
|
||||
|
||||
map.dataLayer.setVisibility(false);
|
||||
map.events.unregister("moveend", map, updateData);
|
||||
}
|
||||
});
|
||||
|
||||
function startDrag() {
|
||||
$("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box'));
|
||||
|
||||
browseBoxControl.activate();
|
||||
setTimeout(function () {
|
||||
if (!loaded) alert(I18n.t('site.index.remote_failed'));
|
||||
}, 1000);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function useMap(reload) {
|
||||
var bounds = map.getExtent();
|
||||
var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
|
||||
var map = createMap("small_map", {
|
||||
controls: [ new OpenLayers.Control.Navigation() ]
|
||||
});
|
||||
|
||||
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),
|
||||
center.lat - (tileHeight / 2),
|
||||
center.lon + (tileWidth / 2),
|
||||
center.lat + (tileHeight / 2));
|
||||
var params = $("#small_map").data();
|
||||
if (params.type == "changeset") {
|
||||
var bbox = new OpenLayers.Bounds(params.minlon, params.minlat, params.maxlon, params.maxlat);
|
||||
var centre = bbox.getCenterLonLat();
|
||||
|
||||
browseBounds = tileBounds;
|
||||
getData(tileBounds, reload);
|
||||
map.zoomToExtent(proj(bbox));
|
||||
addBoxToMap(bbox);
|
||||
|
||||
browseMode = "auto";
|
||||
$("#loading").hide();
|
||||
$("#browse_map .geolink").show();
|
||||
|
||||
$("#browse_select_view").hide();
|
||||
$("a[data-editor=remote]").click(function () {
|
||||
return remoteEditHandler(bbox);
|
||||
});
|
||||
|
||||
updatelinks(centre.lon, centre.lat, 16, null, params.minlon, params.minlat, params.maxlon, params.maxlat);
|
||||
} else if (params.type == "note") {
|
||||
var centre = new OpenLayers.LonLat(params.lon, params.lat);
|
||||
|
||||
setMapCenter(centre, 16);
|
||||
addMarkerToMap(centre);
|
||||
|
||||
var bbox = getMapExtent();
|
||||
|
||||
$("#loading").hide();
|
||||
$("#browse_map .geolink").show();
|
||||
|
||||
$("a[data-editor=remote]").click(function () {
|
||||
return remoteEditHandler(bbox);
|
||||
});
|
||||
|
||||
updatelinks(centre.lon, centre.lat, 16, null, bbox.left, bbox.bottom, bbox.right, bbox.top)
|
||||
} else {
|
||||
$("#object_larger_map").hide();
|
||||
$("#object_edit").hide();
|
||||
|
||||
var object = {type: params.type, id: params.id};
|
||||
|
||||
if (!params.visible) {
|
||||
object.version = params.version - 1;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
addObjectToMap(object, true, function(extent) {
|
||||
$("#loading").hide();
|
||||
$("#browse_map .geolink").show();
|
||||
|
||||
function hideAreas() {
|
||||
$("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas'));
|
||||
$("#browse_hide_areas_box").show();
|
||||
$("#browse_hide_areas_box").click(showAreas);
|
||||
if (extent) {
|
||||
extent = unproj(extent);
|
||||
|
||||
areasHidden = true;
|
||||
var centre = extent.getCenterLonLat();
|
||||
|
||||
useMap(true);
|
||||
}
|
||||
|
||||
function showAreas() {
|
||||
$("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
|
||||
$("#browse_hide_areas_box").show();
|
||||
$("#browse_hide_areas_box").click(hideAreas);
|
||||
|
||||
areasHidden = false;
|
||||
|
||||
useMap(true);
|
||||
}
|
||||
|
||||
function endDrag(bbox) {
|
||||
var bounds = bbox.getBounds();
|
||||
var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
|
||||
|
||||
browseBoxControl.deactivate();
|
||||
browseBounds = projected;
|
||||
getData(bounds);
|
||||
|
||||
browseMode = "manual";
|
||||
|
||||
$("#browse_select_box").html(I18n.t('browse.start_rjs.manually_select'));
|
||||
$("#browse_select_view").show();
|
||||
}
|
||||
|
||||
function displayFeatureWarning(count, limit, callback) {
|
||||
clearStatus();
|
||||
|
||||
var div = document.createElement("div");
|
||||
|
||||
var p = document.createElement("p");
|
||||
p.appendChild(document.createTextNode(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit })));
|
||||
div.appendChild(p);
|
||||
|
||||
var input = document.createElement("input");
|
||||
input.type = "submit";
|
||||
input.value = I18n.t('browse.start_rjs.load_data');
|
||||
input.onclick = callback;
|
||||
div.appendChild(input);
|
||||
|
||||
$("#browse_content").html("");
|
||||
$("#browse_content").append(div);
|
||||
}
|
||||
|
||||
function customDataLoader(resp, options) {
|
||||
if (map.dataLayer.active) {
|
||||
var request = resp.priv;
|
||||
var doc = request.responseXML;
|
||||
|
||||
if (!doc || !doc.documentElement) {
|
||||
doc = request.responseText;
|
||||
}
|
||||
|
||||
resp.features = this.format.read(doc);
|
||||
|
||||
if (!this.maxFeatures || resp.features.length <= this.maxFeatures) {
|
||||
options.callback.call(options.scope, resp);
|
||||
} else {
|
||||
displayFeatureWarning(resp.features.length, this.maxFeatures, function () {
|
||||
options.callback.call(options.scope, resp);
|
||||
$("a.bbox[data-editor=remote]").click(function () {
|
||||
return remoteEditHandler(extent);
|
||||
});
|
||||
|
||||
$("a.object[data-editor=remote]").click(function () {
|
||||
return remoteEditHandler(extent, params.type + params.id);
|
||||
});
|
||||
|
||||
$("#object_larger_map").show();
|
||||
$("#object_edit").show();
|
||||
|
||||
updatelinks(centre.lon, centre.lat, 16, null, extent.left, extent.bottom, extent.right, extent.top, object);
|
||||
} else {
|
||||
$("#small_map").hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getData(bounds, reload) {
|
||||
var projected = bounds.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
|
||||
var size = projected.getWidth() * projected.getHeight();
|
||||
|
||||
if (size > OSM.MAX_REQUEST_AREA) {
|
||||
setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size }));
|
||||
} else {
|
||||
loadData("/api/" + OSM.API_VERSION + "/map?bbox=" + projected.toBBOX(), reload);
|
||||
}
|
||||
}
|
||||
|
||||
function loadData(url, reload) {
|
||||
setStatus(I18n.t('browse.start_rjs.loading'));
|
||||
|
||||
$("#browse_content").empty();
|
||||
|
||||
var formatOptions = {
|
||||
checkTags: true,
|
||||
interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid']
|
||||
};
|
||||
|
||||
if (areasHidden) formatOptions.areaTags = [];
|
||||
|
||||
if (!browseDataLayer || reload) {
|
||||
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' }
|
||||
}
|
||||
})]);
|
||||
|
||||
if (browseDataLayer) browseDataLayer.destroyFeatures();
|
||||
|
||||
/*
|
||||
* Modern browsers are quite happy showing far more than 100 features in
|
||||
* the data browser, so increase the limit to 2000 by default, but keep
|
||||
* it restricted to 500 for IE8 and 100 for older IEs.
|
||||
*/
|
||||
var maxFeatures = 2000;
|
||||
|
||||
/*@cc_on
|
||||
if (navigator.appVersion < 8) {
|
||||
maxFeatures = 100;
|
||||
} else if (navigator.appVersion < 9) {
|
||||
maxFeatures = 500;
|
||||
}
|
||||
@*/
|
||||
|
||||
browseDataLayer = new OpenLayers.Layer.Vector("Data", {
|
||||
strategies: [
|
||||
new OpenLayers.Strategy.Fixed()
|
||||
],
|
||||
protocol: new OpenLayers.Protocol.HTTP({
|
||||
url: url,
|
||||
format: new OpenLayers.Format.OSM(formatOptions),
|
||||
maxFeatures: maxFeatures,
|
||||
handleRead: customDataLoader
|
||||
}),
|
||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
||||
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.handlers.feature.stopDown = false;
|
||||
browseSelectControl.handlers.feature.stopUp = false;
|
||||
map.addControl(browseSelectControl);
|
||||
browseSelectControl.activate();
|
||||
} else {
|
||||
browseDataLayer.destroyFeatures();
|
||||
browseDataLayer.refresh({ url: url });
|
||||
}
|
||||
|
||||
browseActiveFeature = null;
|
||||
}
|
||||
|
||||
function dataLoaded() {
|
||||
if (this.map.dataLayer.active) {
|
||||
clearStatus();
|
||||
|
||||
browseObjectList = document.createElement("div");
|
||||
|
||||
var heading = document.createElement("p");
|
||||
heading.className = "browse_heading";
|
||||
heading.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.heading')));
|
||||
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 = featureType(feature);
|
||||
var typeName = featureTypeName(feature);
|
||||
var li = document.createElement("li");
|
||||
li.appendChild(document.createTextNode(typeName + " "));
|
||||
|
||||
// Link, for viewing in the tab
|
||||
var link = document.createElement("a");
|
||||
link.href = "/browse/" + type + "/" + feature.osm_id;
|
||||
var name = featureName(feature);
|
||||
link.appendChild(document.createTextNode(name));
|
||||
link.feature = feature;
|
||||
link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);
|
||||
li.appendChild(link);
|
||||
|
||||
list.appendChild(li);
|
||||
}
|
||||
|
||||
browseObjectList.appendChild(list);
|
||||
|
||||
var link = document.createElement("a");
|
||||
link.href = this.protocol.url;
|
||||
link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.api')));
|
||||
browseObjectList.appendChild(link);
|
||||
|
||||
$("#browse_content").html(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 (browseMode != "auto") {
|
||||
map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function loadObjectList() {
|
||||
$("#browse_content").empty();
|
||||
$("#browse_content").append(browseObjectList);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onFeatureSelect(feature) {
|
||||
// Unselect previously selected feature
|
||||
if (browseActiveFeature) {
|
||||
browseActiveFeature.layer.drawFeature(
|
||||
browseActiveFeature,
|
||||
browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "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 clear it.
|
||||
if ($("#browse_content").firstChild == browseObjectList) {
|
||||
$("#browse_content").removeChild(browseObjectList);
|
||||
} else {
|
||||
$("#browse_content").empty();
|
||||
}
|
||||
|
||||
// Create a link back to the object list
|
||||
var div = document.createElement("div");
|
||||
div.style.textAlign = "center";
|
||||
div.style.marginBottom = "20px";
|
||||
$("#browse_content").append(div);
|
||||
var link = document.createElement("a");
|
||||
link.href = "#";
|
||||
link.onclick = loadObjectList;
|
||||
link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.back')));
|
||||
div.appendChild(link);
|
||||
|
||||
var table = document.createElement("table");
|
||||
table.width = "100%";
|
||||
table.className = "browse_heading";
|
||||
$("#browse_content").append(table);
|
||||
|
||||
var tr = document.createElement("tr");
|
||||
table.appendChild(tr);
|
||||
|
||||
var heading = document.createElement("td");
|
||||
heading.appendChild(document.createTextNode(featureNameSelect(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(I18n.t('browse.start_rjs.object_list.details')));
|
||||
td.appendChild(link);
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.className = "browse_details";
|
||||
|
||||
$("#browse_content").append(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");
|
||||
b.appendChild(document.createTextNode(key));
|
||||
li.appendChild(b);
|
||||
li.appendChild(document.createTextNode(": " + feature.attributes[key]));
|
||||
ul.appendChild(li);
|
||||
}
|
||||
|
||||
div.appendChild(ul);
|
||||
|
||||
var link = document.createElement("a");
|
||||
link.href = "/browse/" + type + "/" + feature.osm_id + "/history";
|
||||
link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.show_history')));
|
||||
link.onclick = OpenLayers.Function.bind(loadHistory, {
|
||||
type: type, feature: feature, link: link
|
||||
});
|
||||
|
||||
div.appendChild(link);
|
||||
|
||||
// Stash the currently drawn feature
|
||||
browseActiveFeature = feature;
|
||||
}
|
||||
|
||||
function loadHistory() {
|
||||
this.link.href = "";
|
||||
this.link.innerHTML = I18n.t('browse.start_rjs.wait');
|
||||
|
||||
$.ajax("/api/" + OSM.API_VERSION + "/" + this.type + "/" + this.feature.osm_id + "/history", {
|
||||
complete: OpenLayers.Function.bind(displayHistory, this)
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function displayHistory(request) {
|
||||
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").append(table);
|
||||
|
||||
var tr = document.createElement("tr");
|
||||
table.appendChild(tr);
|
||||
|
||||
var heading = document.createElement("td");
|
||||
heading.appendChild(document.createTextNode(I18n.t("browse.start_rjs.history_for_feature", { feature: featureNameHistory(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(I18n.t('browse.start_rjs.details')));
|
||||
td.appendChild(link);
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.className = "browse_details";
|
||||
|
||||
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") || I18n.t('browse.start_rjs.private_user');
|
||||
var timestamp = nodes[i].getAttribute("timestamp");
|
||||
var item = document.createElement("li");
|
||||
item.appendChild(document.createTextNode(I18n.t("browse.start_rjs.edited_by_user_at_timestamp", { user: user, timestamp: timestamp })));
|
||||
history.appendChild(item);
|
||||
}
|
||||
div.appendChild(history);
|
||||
|
||||
$("#browse_content").append(div);
|
||||
}
|
||||
|
||||
function featureType(feature) {
|
||||
if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
|
||||
return "node";
|
||||
} else {
|
||||
return "way";
|
||||
}
|
||||
}
|
||||
|
||||
function featureTypeName(feature) {
|
||||
if (featureType(feature) == "node") {
|
||||
return I18n.t('browse.start_rjs.object_list.type.node');
|
||||
} else if (featureType(feature) == "way") {
|
||||
return I18n.t('browse.start_rjs.object_list.type.way');
|
||||
}
|
||||
}
|
||||
|
||||
function featureName(feature) {
|
||||
var lang = $('html').attr('lang');
|
||||
if (feature.attributes['name:' + lang]) {
|
||||
return feature.attributes['name:' + lang];
|
||||
} else if (feature.attributes.name) {
|
||||
return feature.attributes.name;
|
||||
} else {
|
||||
return feature.osm_id;
|
||||
}
|
||||
}
|
||||
|
||||
function featureNameSelect(feature) {
|
||||
var lang = $('html').attr('lang');
|
||||
if (feature.attributes['name:' + lang]) {
|
||||
return feature.attributes['name:' + lang];
|
||||
} else if (feature.attributes.name) {
|
||||
return feature.attributes.name;
|
||||
} else if (featureType(feature) == "node") {
|
||||
return I18n.t("browse.start_rjs.object_list.selected.type.node", { id: feature.osm_id });
|
||||
} else if (featureType(feature) == "way") {
|
||||
return I18n.t("browse.start_rjs.object_list.selected.type.way", { id: feature.osm_id });
|
||||
}
|
||||
}
|
||||
|
||||
function featureNameHistory(feature) {
|
||||
var lang = $('html').attr('lang');
|
||||
if (feature.attributes['name:' + lang]) {
|
||||
return feature.attributes['name:' + lang];
|
||||
} else if (feature.attributes.name) {
|
||||
return feature.attributes.name;
|
||||
} else if (featureType(feature) == "node") {
|
||||
return I18n.t("browse.start_rjs.object_list.history.type.node", { id: feature.osm_id });
|
||||
} else if (featureType(feature) == "way") {
|
||||
return I18n.t("browse.start_rjs.object_list.history.type.way", { id: feature.osm_id });
|
||||
}
|
||||
}
|
||||
|
||||
function setStatus(status) {
|
||||
$("#browse_status").html(status);
|
||||
$("#browse_status").show();
|
||||
}
|
||||
|
||||
function clearStatus() {
|
||||
$("#browse_status").html("");
|
||||
$("#browse_status").hide();
|
||||
}
|
||||
}
|
||||
createMenu("area_edit", "area_edit_menu", "right");
|
||||
createMenu("object_edit", "object_edit_menu", "right");
|
||||
});
|
||||
|
|
|
|||
83
app/assets/javascripts/changeset.js
Normal file
83
app/assets/javascripts/changeset.js
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
$(document).ready(function () {
|
||||
var highlight;
|
||||
|
||||
function highlightChangeset(id) {
|
||||
var feature = vectors.getFeatureByFid(id);
|
||||
var bounds = feature.geometry.getBounds();
|
||||
|
||||
if (bounds.containsBounds(map.getExtent())) {
|
||||
bounds = map.getExtent().scale(1.1);
|
||||
}
|
||||
|
||||
if (highlight) vectors.removeFeatures(highlight);
|
||||
|
||||
highlight = new OpenLayers.Feature.Vector(bounds.toGeometry(), {}, {
|
||||
strokeWidth: 2,
|
||||
strokeColor: "#ee9900",
|
||||
fillColor: "#ffff55",
|
||||
fillOpacity: 0.5
|
||||
});
|
||||
|
||||
vectors.addFeatures(highlight);
|
||||
|
||||
$("#tr-changeset-" + id).addClass("selected");
|
||||
}
|
||||
|
||||
function unHighlightChangeset(id) {
|
||||
vectors.removeFeatures(highlight);
|
||||
|
||||
$("#tr-changeset-" + id).removeClass("selected");
|
||||
}
|
||||
|
||||
var map = createMap("changeset_list_map", {
|
||||
controls: [
|
||||
new OpenLayers.Control.Navigation(),
|
||||
new OpenLayers.Control.Zoom(),
|
||||
new OpenLayers.Control.SimplePanZoom()
|
||||
]
|
||||
});
|
||||
|
||||
var bounds = new OpenLayers.Bounds();
|
||||
|
||||
$("[data-changeset]").each(function () {
|
||||
var changeset = $(this).data('changeset');
|
||||
if (changeset.bbox) {
|
||||
var bbox = new OpenLayers.Bounds(changeset.bbox.minlon, changeset.bbox.minlat, changeset.bbox.maxlon, changeset.bbox.maxlat);
|
||||
|
||||
bounds.extend(bbox);
|
||||
|
||||
addBoxToMap(bbox, changeset.id, true);
|
||||
}
|
||||
});
|
||||
|
||||
vectors.events.on({
|
||||
"featureselected": function(feature) {
|
||||
highlightChangeset(feature.feature.fid);
|
||||
},
|
||||
"featureunselected": function(feature) {
|
||||
unHighlightChangeset(feature.feature.fid);
|
||||
}
|
||||
});
|
||||
|
||||
var selectControl = new OpenLayers.Control.SelectFeature(vectors, {
|
||||
multiple: false,
|
||||
hover: true
|
||||
});
|
||||
map.addControl(selectControl);
|
||||
selectControl.activate();
|
||||
|
||||
var params = OSM.mapParams();
|
||||
if (params.bbox) {
|
||||
map.zoomToExtent(proj(new OpenLayers.Bounds(params.minlon, params.minlat, params.maxlon, params.maxlat)));
|
||||
} else {
|
||||
map.zoomToExtent(proj(bounds));
|
||||
}
|
||||
|
||||
$("[data-changeset]").mouseover(function() {
|
||||
highlightChangeset($(this).data("changeset").id);
|
||||
});
|
||||
|
||||
$("[data-changeset]").mouseout(function() {
|
||||
unHighlightChangeset($(this).data("changeset").id);
|
||||
});
|
||||
});
|
||||
37
app/assets/javascripts/diary_entry.js
Normal file
37
app/assets/javascripts/diary_entry.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
$(document).ready(function () {
|
||||
var marker;
|
||||
|
||||
function setLocation(e) {
|
||||
closeMapPopup();
|
||||
|
||||
var lonlat = getEventPosition(e);
|
||||
|
||||
$("#latitude").val(lonlat.lat);
|
||||
$("#longitude").val(lonlat.lon);
|
||||
|
||||
if (marker) {
|
||||
removeMarkerFromMap(marker);
|
||||
}
|
||||
|
||||
marker = addMarkerToMap(lonlat, null, I18n.t('diary_entry.edit.marker_text'));
|
||||
}
|
||||
|
||||
$("#usemap").click(function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
$("#map").show();
|
||||
$("#usemap").hide();
|
||||
|
||||
var params = $("#map").data();
|
||||
var centre = new OpenLayers.LonLat(params.lon, params.lat);
|
||||
var map = createMap("map");
|
||||
|
||||
setMapCenter(centre, params.zoom);
|
||||
|
||||
if ($("#latitude").val() && $("#longitude").val()) {
|
||||
marker = addMarkerToMap(centre, null, I18n.t('diary_entry.edit.marker_text'));
|
||||
}
|
||||
|
||||
map.events.register("click", map, setLocation);
|
||||
});
|
||||
});
|
||||
43
app/assets/javascripts/edit.js
Normal file
43
app/assets/javascripts/edit.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
function maximiseMap() {
|
||||
$("#left").hide();
|
||||
$("#greeting").hide();
|
||||
$("#tabnav").hide();
|
||||
|
||||
$("#content").css("top", "0px");
|
||||
if ($("html").attr("dir") == "ltr") {
|
||||
$("#content").css("left", "0px");
|
||||
} else {
|
||||
$("#content").css("right", "0px");
|
||||
}
|
||||
|
||||
handleResize();
|
||||
}
|
||||
|
||||
function minimiseMap() {
|
||||
$("#left").show();
|
||||
$("#greeting").show();
|
||||
$("#tabnav").show();
|
||||
|
||||
$("#content").css("top", "30px");
|
||||
if ($("html").attr("dir") == "ltr") {
|
||||
$("#content").css("left", "185px");
|
||||
} else {
|
||||
$("#content").css("right", "185px");
|
||||
}
|
||||
|
||||
handleResize();
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$(window).resize(handleResize);
|
||||
handleResize();
|
||||
|
||||
$("#search_form").submit(function () {
|
||||
$("#sidebar_title").html(I18n.t('site.sidebar.search_results'));
|
||||
$("#sidebar_content").load($(this).attr("action"), {
|
||||
query: $("#query").val()
|
||||
}, openSidebar);
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
|
@ -1,318 +0,0 @@
|
|||
function startExport(sidebarHtml) {
|
||||
var vectors,
|
||||
box,
|
||||
transform,
|
||||
markerLayer,
|
||||
markerControl,
|
||||
epsg4326 = new OpenLayers.Projection("EPSG:4326"),
|
||||
epsg900913 = new OpenLayers.Projection("EPSG:900913");
|
||||
|
||||
vectors = new OpenLayers.Layer.Vector("Vector Layer", {
|
||||
displayInLayerSwitcher: false
|
||||
});
|
||||
map.addLayer(vectors);
|
||||
|
||||
box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
|
||||
handlerOptions: {
|
||||
sides: 4,
|
||||
snapAngle: 90,
|
||||
irregular: true,
|
||||
persist: true
|
||||
}
|
||||
});
|
||||
box.handler.callbacks.done = endDrag;
|
||||
map.addControl(box);
|
||||
|
||||
transform = new OpenLayers.Control.TransformFeature(vectors, {
|
||||
rotate: false,
|
||||
irregular: true
|
||||
});
|
||||
transform.events.register("transformcomplete", transform, transformComplete);
|
||||
map.addControl(transform);
|
||||
|
||||
map.events.register("moveend", map, mapMoved);
|
||||
map.events.register("changebaselayer", map, htmlUrlChanged);
|
||||
|
||||
$("#sidebar_title").html(I18n.t('export.start_rjs.export'));
|
||||
$("#sidebar_content").html(sidebarHtml);
|
||||
|
||||
$("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged);
|
||||
|
||||
$("#drag_box").click(startDrag);
|
||||
|
||||
$("#add_marker").click(startMarker);
|
||||
|
||||
$("#format_osm,#format_mapnik,#format_html").click(formatChanged);
|
||||
|
||||
$("#mapnik_scale").change(mapnikSizeChanged);
|
||||
|
||||
openSidebar();
|
||||
|
||||
if (map.baseLayer.name == "Mapnik") {
|
||||
$("#format_mapnik").prop("checked", true);
|
||||
}
|
||||
|
||||
formatChanged();
|
||||
setBounds(map.getExtent());
|
||||
|
||||
$("body").removeClass("site-index").addClass("site-export");
|
||||
|
||||
$("#sidebar").one("closed", function () {
|
||||
$("body").removeClass("site-export").addClass("site-index");
|
||||
|
||||
clearBox();
|
||||
clearMarker();
|
||||
map.events.unregister("moveend", map, mapMoved);
|
||||
map.events.unregister("changebaselayer", map, htmlUrlChanged);
|
||||
map.removeLayer(vectors);
|
||||
});
|
||||
|
||||
function getMercatorBounds() {
|
||||
var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(),
|
||||
$("#maxlon").val(), $("#maxlat").val());
|
||||
|
||||
return bounds.transform(epsg4326, epsg900913);
|
||||
}
|
||||
|
||||
function boundsChanged() {
|
||||
var bounds = getMercatorBounds();
|
||||
|
||||
map.events.unregister("moveend", map, mapMoved);
|
||||
map.zoomToExtent(bounds);
|
||||
|
||||
clearBox();
|
||||
drawBox(bounds);
|
||||
|
||||
validateControls();
|
||||
mapnikSizeChanged();
|
||||
}
|
||||
|
||||
function startDrag() {
|
||||
$("#drag_box").html(I18n.t('export.start_rjs.drag_a_box'));
|
||||
|
||||
clearBox();
|
||||
box.activate();
|
||||
};
|
||||
|
||||
function endDrag(bbox) {
|
||||
var bounds = bbox.getBounds();
|
||||
|
||||
map.events.unregister("moveend", map, mapMoved);
|
||||
setBounds(bounds);
|
||||
drawBox(bounds);
|
||||
box.deactivate();
|
||||
validateControls();
|
||||
|
||||
$("#drag_box").html(I18n.t('export.start_rjs.manually_select'));
|
||||
}
|
||||
|
||||
function transformComplete(event) {
|
||||
setBounds(event.feature.geometry.bounds);
|
||||
validateControls();
|
||||
}
|
||||
|
||||
function startMarker() {
|
||||
$("#add_marker").html(I18n.t('export.start_rjs.click_add_marker'));
|
||||
|
||||
if (!markerLayer) {
|
||||
markerLayer = new OpenLayers.Layer.Vector("",{
|
||||
displayInLayerSwitcher: false,
|
||||
style: {
|
||||
externalGraphic: OpenLayers.Util.getImageLocation("marker.png"),
|
||||
graphicXOffset: -10.5,
|
||||
graphicYOffset: -25,
|
||||
graphicWidth: 21,
|
||||
graphicHeight: 25
|
||||
}
|
||||
});
|
||||
map.addLayer(markerLayer);
|
||||
|
||||
markerControl = new OpenLayers.Control.DrawFeature(markerLayer, OpenLayers.Handler.Point);
|
||||
map.addControl(markerControl);
|
||||
|
||||
markerLayer.events.on({ "featureadded": endMarker });
|
||||
}
|
||||
|
||||
markerLayer.destroyFeatures();
|
||||
markerControl.activate();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function endMarker(event) {
|
||||
markerControl.deactivate();
|
||||
|
||||
$("#add_marker").html(I18n.t('export.start_rjs.change_marker'));
|
||||
$("#marker_inputs").show();
|
||||
|
||||
var geom = event.feature.geometry.clone().transform(epsg900913, epsg4326);
|
||||
|
||||
$("#marker_lon").val(geom.x.toFixed(5));
|
||||
$("#marker_lat").val(geom.y.toFixed(5));
|
||||
|
||||
htmlUrlChanged();
|
||||
}
|
||||
|
||||
function clearMarker() {
|
||||
$("#marker_lon,#marker_lat").val("");
|
||||
$("#marker_inputs").hide();
|
||||
$("#add_marker").html(I18n.t('export.start_rjs.add_marker'));
|
||||
|
||||
if (markerLayer) {
|
||||
markerControl.destroy();
|
||||
markerLayer.destroy();
|
||||
markerLayer = null;
|
||||
markerControl = null;
|
||||
}
|
||||
}
|
||||
|
||||
function mapMoved() {
|
||||
setBounds(map.getExtent());
|
||||
validateControls();
|
||||
}
|
||||
|
||||
function setBounds(bounds) {
|
||||
var toPrecision = zoomPrecision(map.getZoom());
|
||||
|
||||
bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
|
||||
|
||||
$("#minlon").val(toPrecision(bounds.left));
|
||||
$("#minlat").val(toPrecision(bounds.bottom));
|
||||
$("#maxlon").val(toPrecision(bounds.right));
|
||||
$("#maxlat").val(toPrecision(bounds.top));
|
||||
|
||||
mapnikSizeChanged();
|
||||
htmlUrlChanged();
|
||||
}
|
||||
|
||||
function clearBox() {
|
||||
transform.deactivate();
|
||||
vectors.destroyFeatures();
|
||||
}
|
||||
|
||||
function drawBox(bounds) {
|
||||
var feature = new OpenLayers.Feature.Vector(bounds.toGeometry());
|
||||
|
||||
vectors.addFeatures(feature);
|
||||
transform.setFeature(feature);
|
||||
}
|
||||
|
||||
function validateControls() {
|
||||
var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
|
||||
|
||||
if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) {
|
||||
$("#export_osm_too_large").show();
|
||||
} else {
|
||||
$("#export_osm_too_large").hide();
|
||||
}
|
||||
|
||||
var max_scale = maxMapnikScale();
|
||||
var disabled = true;
|
||||
|
||||
if ($("#format_osm").prop("checked")) {
|
||||
disabled = bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA;
|
||||
} else if ($("#format_mapnik").prop("checked")) {
|
||||
disabled = $("#mapnik_scale").val() < max_scale;
|
||||
}
|
||||
|
||||
$("#export_commit").prop("disabled", disabled);
|
||||
$("#mapnik_max_scale").html(roundScale(max_scale));
|
||||
}
|
||||
|
||||
function htmlUrlChanged() {
|
||||
var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
|
||||
var layerName = map.baseLayer.keyid;
|
||||
var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBOX() + "&layer=" + layerName;
|
||||
var markerUrl = "";
|
||||
|
||||
if ($("#marker_lat").val() && $("#marker_lon").val()) {
|
||||
markerUrl = "&mlat=" + $("#marker_lat").val() + "&mlon=" + $("#marker_lon").val();
|
||||
url += "&marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val();
|
||||
}
|
||||
|
||||
var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+url+'" style="border: 1px solid black"></iframe>';
|
||||
|
||||
// Create "larger map" link
|
||||
var center = bounds.getCenterLonLat();
|
||||
|
||||
bounds.transform(epsg4326, epsg900913);
|
||||
var zoom = map.getZoomForExtent(bounds);
|
||||
|
||||
var layers = getMapLayers();
|
||||
|
||||
var text = I18n.t('export.start_rjs.view_larger_map');
|
||||
var escaped = [];
|
||||
|
||||
for (var i = 0; i < text.length; ++i) {
|
||||
var c = text.charCodeAt(i);
|
||||
escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";");
|
||||
}
|
||||
|
||||
html += '<br /><small><a href="http://' + OSM.SERVER_URL + '/?lat='+center.lat+'&lon='+center.lon+'&zoom='+zoom+'&layers='+layers+markerUrl+'">'+escaped.join("")+'</a></small>';
|
||||
|
||||
$("#export_html_text").val(html);
|
||||
|
||||
if ($("#format_html").prop("checked")) {
|
||||
$("#export_html_text").prop("selected", true);
|
||||
}
|
||||
}
|
||||
|
||||
function formatChanged() {
|
||||
$("#export_commit").show();
|
||||
|
||||
if ($("#format_osm").prop("checked")) {
|
||||
$("#export_osm").show();
|
||||
} else {
|
||||
$("#export_osm").hide();
|
||||
}
|
||||
|
||||
if ($("#format_mapnik").prop("checked")) {
|
||||
$("#mapnik_scale").val(roundScale(map.getScale()));
|
||||
$("#export_mapnik").show();
|
||||
|
||||
mapnikSizeChanged();
|
||||
} else {
|
||||
$("#export_mapnik").hide();
|
||||
}
|
||||
|
||||
if ($("#format_html").prop("checked")) {
|
||||
$("#export_html").show();
|
||||
$("#export_commit").hide();
|
||||
$("#export_html_text").prop("selected", true);
|
||||
} else {
|
||||
$("#export_html").hide();
|
||||
|
||||
clearMarker();
|
||||
}
|
||||
|
||||
validateControls();
|
||||
}
|
||||
|
||||
function maxMapnikScale() {
|
||||
var bounds = getMercatorBounds();
|
||||
|
||||
return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136));
|
||||
}
|
||||
|
||||
function mapnikImageSize(scale) {
|
||||
var bounds = getMercatorBounds();
|
||||
|
||||
return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028),
|
||||
Math.round(bounds.getHeight() / scale / 0.00028));
|
||||
}
|
||||
|
||||
function roundScale(scale) {
|
||||
var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
|
||||
|
||||
return precision * Math.ceil(scale / precision);
|
||||
}
|
||||
|
||||
function mapnikSizeChanged() {
|
||||
var size = mapnikImageSize($("#mapnik_scale").val());
|
||||
|
||||
$("#mapnik_image_width").html(size.w);
|
||||
$("#mapnik_image_height").html(size.h);
|
||||
|
||||
validateControls();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
OSM = {
|
||||
<% if defined?(PIWIK_LOCATION) and defined?(PIWIK_SITE) %>
|
||||
PIWIK_LOCATION: <%= PIWIK_LOCATION.to_json %>,
|
||||
PIWIK_SITE: <%= PIWIK_SITE.to_json %>,
|
||||
<% end %>
|
||||
MAX_REQUEST_AREA: <%= MAX_REQUEST_AREA.to_json %>,
|
||||
SERVER_URL: <%= SERVER_URL.to_json %>,
|
||||
API_VERSION: <%= API_VERSION.to_json %>
|
||||
};
|
||||
122
app/assets/javascripts/index.js
Normal file
122
app/assets/javascripts/index.js
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
//= require index/browse
|
||||
//= require index/export
|
||||
//= require index/key
|
||||
|
||||
$(document).ready(function () {
|
||||
var marker;
|
||||
var params = OSM.mapParams();
|
||||
var map = createMap("map");
|
||||
|
||||
map.events.register("moveend", map, updateLocation);
|
||||
map.events.register("changelayer", map, updateLocation);
|
||||
|
||||
if (!params.object_zoom) {
|
||||
if (params.bbox) {
|
||||
var bbox = new OpenLayers.Bounds(params.minlon, params.minlat, params.maxlon, params.maxlat);
|
||||
|
||||
map.zoomToExtent(proj(bbox));
|
||||
|
||||
if (params.box) {
|
||||
addBoxToMap(bbox);
|
||||
}
|
||||
} else {
|
||||
setMapCenter(new OpenLayers.LonLat(params.lon, params.lat), params.zoom);
|
||||
}
|
||||
}
|
||||
|
||||
if (params.layers) {
|
||||
setMapLayers(params.layers);
|
||||
}
|
||||
|
||||
if (params.marker) {
|
||||
marker = addMarkerToMap(new OpenLayers.LonLat(params.mlon, params.mlat));
|
||||
}
|
||||
|
||||
if (params.object) {
|
||||
addObjectToMap(params.object, params.object_zoom);
|
||||
}
|
||||
|
||||
handleResize();
|
||||
|
||||
$("body").on("click", "a.set_position", function () {
|
||||
var data = $(this).data();
|
||||
var centre = new OpenLayers.LonLat(data.lon, data.lat);
|
||||
|
||||
if (data.minLon && data.minLat && data.maxLon && data.maxLat) {
|
||||
var bbox = new OpenLayers.Bounds(data.minLon, data.minLat, data.maxLon, data.maxLat);
|
||||
|
||||
map.zoomToExtent(proj(bbox));
|
||||
} else {
|
||||
setMapCenter(centre, data.zoom);
|
||||
}
|
||||
|
||||
if (marker) {
|
||||
removeMarkerFromMap(marker);
|
||||
}
|
||||
|
||||
marker = addMarkerToMap(centre, getArrowIcon());
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
function updateLocation() {
|
||||
var lonlat = unproj(map.getCenter());
|
||||
var zoom = map.getZoom();
|
||||
var layers = getMapLayers();
|
||||
var extents = unproj(map.getExtent());
|
||||
var expiry = new Date();
|
||||
|
||||
updatelinks(lonlat.lon, lonlat.lat, zoom, layers, extents.left, extents.bottom, extents.right, extents.top, params.object);
|
||||
|
||||
expiry.setYear(expiry.getFullYear() + 10);
|
||||
$.cookie("_osm_location", [lonlat.lon, lonlat.lat, zoom, layers].join("|"), {expires: expiry});
|
||||
}
|
||||
|
||||
function remoteEditHandler(event) {
|
||||
var extent = unproj(map.getExtent());
|
||||
var loaded = false;
|
||||
|
||||
$("#linkloader").load(function () { loaded = true; });
|
||||
$("#linkloader").attr("src", "http://127.0.0.1:8111/load_and_zoom?left=" + extent.left + "&top=" + extent.top + "&right=" + extent.right + "&bottom=" + extent.bottom);
|
||||
|
||||
setTimeout(function () {
|
||||
if (!loaded) alert(I18n.t('site.index.remote_failed'));
|
||||
}, 1000);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
$("a[data-editor=remote]").click(remoteEditHandler);
|
||||
|
||||
if (OSM.preferred_editor == "remote" && $('body').hasClass("site-edit")) {
|
||||
remoteEditHandler();
|
||||
}
|
||||
|
||||
$(window).resize(function() {
|
||||
var centre = map.getCenter();
|
||||
var zoom = map.getZoom();
|
||||
|
||||
handleResize();
|
||||
|
||||
map.setCenter(centre, zoom);
|
||||
});
|
||||
|
||||
$("#search_form").submit(function () {
|
||||
var extent = unproj(map.getExtent());
|
||||
|
||||
$("#sidebar_title").html(I18n.t('site.sidebar.search_results'));
|
||||
$("#sidebar_content").load($(this).attr("action"), {
|
||||
query: $("#query").val(),
|
||||
minlon: extent.left,
|
||||
minlat: extent.bottom,
|
||||
maxlon: extent.right,
|
||||
maxlat: extent.top
|
||||
}, openSidebar);
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
if ($("#query").val()) {
|
||||
$("#search_form").submit();
|
||||
}
|
||||
});
|
||||
467
app/assets/javascripts/index/browse.js
Normal file
467
app/assets/javascripts/index/browse.js
Normal file
|
|
@ -0,0 +1,467 @@
|
|||
//= require templates/browse/feature
|
||||
//= require templates/browse/feature_list
|
||||
//= require templates/browse/feature_history
|
||||
|
||||
$(document).ready(function () {
|
||||
$("#show_data").click(function (e) {
|
||||
$.ajax({ url: $(this).attr('href'), success: function (sidebarHtml) {
|
||||
startBrowse(sidebarHtml);
|
||||
}});
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
function startBrowse(sidebarHtml) {
|
||||
var browseBoxControl;
|
||||
var browseMode = "auto";
|
||||
var browseBounds;
|
||||
var browseFeatureList;
|
||||
var browseActiveFeature;
|
||||
var browseDataLayer;
|
||||
var browseSelectControl;
|
||||
var browseObjectList;
|
||||
var areasHidden = false;
|
||||
|
||||
OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
|
||||
OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
|
||||
|
||||
map.dataLayer.active = true;
|
||||
|
||||
$("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title'));
|
||||
$("#sidebar_content").html(sidebarHtml);
|
||||
|
||||
openSidebar();
|
||||
|
||||
var vectors = new OpenLayers.Layer.Vector();
|
||||
|
||||
browseBoxControl = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
|
||||
handlerOptions: {
|
||||
sides: 4,
|
||||
snapAngle: 90,
|
||||
irregular: true,
|
||||
persist: true
|
||||
}
|
||||
});
|
||||
browseBoxControl.handler.callbacks.done = endDrag;
|
||||
map.addControl(browseBoxControl);
|
||||
|
||||
map.events.register("moveend", map, updateData);
|
||||
map.events.triggerEvent("moveend");
|
||||
|
||||
$("#browse_select_view").click(useMap);
|
||||
|
||||
$("#browse_select_box").click(startDrag);
|
||||
|
||||
$("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
|
||||
$("#browse_hide_areas_box").show();
|
||||
$("#browse_hide_areas_box").click(hideAreas);
|
||||
|
||||
function updateData() {
|
||||
if (browseMode == "auto") {
|
||||
if (map.getZoom() >= 15) {
|
||||
useMap(false);
|
||||
} else {
|
||||
setStatus(I18n.t('browse.start_rjs.zoom_or_select'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$("#sidebar").one("closed", function () {
|
||||
if (map.dataLayer.active) {
|
||||
map.dataLayer.active = false;
|
||||
|
||||
if (browseSelectControl) {
|
||||
browseSelectControl.destroy();
|
||||
browseSelectControl = null;
|
||||
}
|
||||
|
||||
if (browseBoxControl) {
|
||||
browseBoxControl.destroy();
|
||||
browseBoxControl = null;
|
||||
}
|
||||
|
||||
if (browseActiveFeature) {
|
||||
browseActiveFeature.destroy();
|
||||
browseActiveFeature = null;
|
||||
}
|
||||
|
||||
if (browseDataLayer) {
|
||||
browseDataLayer.destroy();
|
||||
browseDataLayer = null;
|
||||
}
|
||||
|
||||
map.dataLayer.setVisibility(false);
|
||||
map.events.unregister("moveend", map, updateData);
|
||||
}
|
||||
});
|
||||
|
||||
function startDrag() {
|
||||
$("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box'));
|
||||
|
||||
browseBoxControl.activate();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function useMap(reload) {
|
||||
var bounds = map.getExtent();
|
||||
var projected = unproj(bounds);
|
||||
|
||||
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),
|
||||
center.lat - (tileHeight / 2),
|
||||
center.lon + (tileWidth / 2),
|
||||
center.lat + (tileHeight / 2));
|
||||
|
||||
browseBounds = tileBounds;
|
||||
getData(tileBounds, reload);
|
||||
|
||||
browseMode = "auto";
|
||||
|
||||
$("#browse_select_view").hide();
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function hideAreas() {
|
||||
$("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas'));
|
||||
$("#browse_hide_areas_box").show();
|
||||
$("#browse_hide_areas_box").click(showAreas);
|
||||
|
||||
areasHidden = true;
|
||||
|
||||
useMap(true);
|
||||
}
|
||||
|
||||
function showAreas() {
|
||||
$("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
|
||||
$("#browse_hide_areas_box").show();
|
||||
$("#browse_hide_areas_box").click(hideAreas);
|
||||
|
||||
areasHidden = false;
|
||||
|
||||
useMap(true);
|
||||
}
|
||||
|
||||
function endDrag(bbox) {
|
||||
var bounds = bbox.getBounds();
|
||||
var projected = unproj(bounds);
|
||||
|
||||
browseBoxControl.deactivate();
|
||||
browseBounds = projected;
|
||||
getData(bounds);
|
||||
|
||||
browseMode = "manual";
|
||||
|
||||
$("#browse_select_box").html(I18n.t('browse.start_rjs.manually_select'));
|
||||
$("#browse_select_view").show();
|
||||
}
|
||||
|
||||
function displayFeatureWarning(count, limit, callback) {
|
||||
clearStatus();
|
||||
|
||||
var div = document.createElement("div");
|
||||
|
||||
var p = document.createElement("p");
|
||||
p.appendChild(document.createTextNode(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit })));
|
||||
div.appendChild(p);
|
||||
|
||||
var input = document.createElement("input");
|
||||
input.type = "submit";
|
||||
input.value = I18n.t('browse.start_rjs.load_data');
|
||||
input.onclick = callback;
|
||||
div.appendChild(input);
|
||||
|
||||
$("#browse_content").html("");
|
||||
$("#browse_content").append(div);
|
||||
}
|
||||
|
||||
function customDataLoader(resp, options) {
|
||||
if (map.dataLayer.active) {
|
||||
var request = resp.priv;
|
||||
var doc = request.responseXML;
|
||||
|
||||
if (!doc || !doc.documentElement) {
|
||||
doc = request.responseText;
|
||||
}
|
||||
|
||||
resp.features = this.format.read(doc);
|
||||
|
||||
if (!this.maxFeatures || resp.features.length <= this.maxFeatures) {
|
||||
options.callback.call(options.scope, resp);
|
||||
} else {
|
||||
displayFeatureWarning(resp.features.length, this.maxFeatures, function () {
|
||||
options.callback.call(options.scope, resp);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getData(bounds, reload) {
|
||||
var projected = unproj(bounds);
|
||||
var size = projected.getWidth() * projected.getHeight();
|
||||
|
||||
if (size > OSM.MAX_REQUEST_AREA) {
|
||||
setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size }));
|
||||
} else {
|
||||
loadData("/api/" + OSM.API_VERSION + "/map?bbox=" + projected.toBBOX(), reload);
|
||||
}
|
||||
}
|
||||
|
||||
function loadData(url, reload) {
|
||||
setStatus(I18n.t('browse.start_rjs.loading'));
|
||||
|
||||
$("#browse_content").empty();
|
||||
|
||||
var formatOptions = {
|
||||
checkTags: true,
|
||||
interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid']
|
||||
};
|
||||
|
||||
if (areasHidden) formatOptions.areaTags = [];
|
||||
|
||||
if (!browseDataLayer || reload) {
|
||||
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' }
|
||||
}
|
||||
})]);
|
||||
|
||||
if (browseDataLayer) browseDataLayer.destroyFeatures();
|
||||
|
||||
/*
|
||||
* Modern browsers are quite happy showing far more than 100 features in
|
||||
* the data browser, so increase the limit to 2000 by default, but keep
|
||||
* it restricted to 500 for IE8 and 100 for older IEs.
|
||||
*/
|
||||
var maxFeatures = 2000;
|
||||
|
||||
/*@cc_on
|
||||
if (navigator.appVersion < 8) {
|
||||
maxFeatures = 100;
|
||||
} else if (navigator.appVersion < 9) {
|
||||
maxFeatures = 500;
|
||||
}
|
||||
@*/
|
||||
|
||||
browseDataLayer = new OpenLayers.Layer.Vector("Data", {
|
||||
strategies: [
|
||||
new OpenLayers.Strategy.Fixed()
|
||||
],
|
||||
protocol: new OpenLayers.Protocol.HTTP({
|
||||
url: url,
|
||||
format: new OpenLayers.Format.OSM(formatOptions),
|
||||
maxFeatures: maxFeatures,
|
||||
handleRead: customDataLoader
|
||||
}),
|
||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
||||
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.handlers.feature.stopDown = false;
|
||||
browseSelectControl.handlers.feature.stopUp = false;
|
||||
map.addControl(browseSelectControl);
|
||||
browseSelectControl.activate();
|
||||
} else {
|
||||
browseDataLayer.destroyFeatures();
|
||||
browseDataLayer.refresh({ url: url });
|
||||
}
|
||||
|
||||
browseActiveFeature = null;
|
||||
}
|
||||
|
||||
function dataLoaded() {
|
||||
if (this.map.dataLayer.active) {
|
||||
clearStatus();
|
||||
|
||||
var features = [];
|
||||
for (var i = 0; i < this.features.length; i++) {
|
||||
var feature = this.features[i];
|
||||
features.push({
|
||||
typeName: featureTypeName(feature),
|
||||
url: "/browse/" + featureType(feature) + "/" + feature.osm_id,
|
||||
name: featureName(feature),
|
||||
id: feature.id
|
||||
});
|
||||
}
|
||||
|
||||
browseObjectList = $(JST["templates/browse/feature_list"]({
|
||||
features: features,
|
||||
url: this.protocol.url
|
||||
}))[0];
|
||||
|
||||
loadObjectList();
|
||||
}
|
||||
}
|
||||
|
||||
function viewFeatureLink() {
|
||||
var feature = browseDataLayer.getFeatureById($(this).data("feature-id"));
|
||||
var layer = 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(feature);
|
||||
|
||||
if (browseMode != "auto") {
|
||||
map.setCenter(feature.geometry.getBounds().getCenterLonLat());
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function loadObjectList() {
|
||||
$("#browse_content").html(browseObjectList);
|
||||
$("#browse_content").find("a[data-feature-id]").click(viewFeatureLink);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onFeatureSelect(feature) {
|
||||
// Unselect previously selected feature
|
||||
if (browseActiveFeature) {
|
||||
browseActiveFeature.layer.drawFeature(
|
||||
browseActiveFeature,
|
||||
browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "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 clear it.
|
||||
if ($("#browse_content").firstChild == browseObjectList) {
|
||||
$("#browse_content").removeChild(browseObjectList);
|
||||
} else {
|
||||
$("#browse_content").empty();
|
||||
}
|
||||
|
||||
$("#browse_content").html(JST["templates/browse/feature"]({
|
||||
name: featureNameSelect(feature),
|
||||
url: "/browse/" + featureType(feature) + "/" + feature.osm_id,
|
||||
attributes: feature.attributes
|
||||
}));
|
||||
|
||||
$("#browse_content").find("a.browse_show_list").click(loadObjectList);
|
||||
$("#browse_content").find("a.browse_show_history").click(loadHistory);
|
||||
|
||||
// Stash the currently drawn feature
|
||||
browseActiveFeature = feature;
|
||||
}
|
||||
|
||||
function loadHistory() {
|
||||
$(this).attr("href", "").text(I18n.t('browse.start_rjs.wait'));
|
||||
|
||||
var feature = browseActiveFeature;
|
||||
|
||||
$.ajax({
|
||||
url: "/api/" + OSM.API_VERSION + "/" + featureType(feature) + "/" + feature.osm_id + "/history",
|
||||
success: function (xml) {
|
||||
if (browseActiveFeature != feature || $("#browse_content").firstChild == browseObjectList) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(this).remove();
|
||||
|
||||
var history = [];
|
||||
var nodes = xml.getElementsByTagName(featureType(feature));
|
||||
for (var i = nodes.length - 1; i >= 0; i--) {
|
||||
history.push({
|
||||
user: nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'),
|
||||
timestamp: nodes[i].getAttribute("timestamp")
|
||||
});
|
||||
}
|
||||
|
||||
$("#browse_content").append(JST["templates/browse/feature_history"]({
|
||||
name: featureNameHistory(feature),
|
||||
url: "/browse/" + featureType(feature) + "/" + feature.osm_id,
|
||||
history: history
|
||||
}));
|
||||
}.bind(this)
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function featureType(feature) {
|
||||
if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
|
||||
return "node";
|
||||
} else {
|
||||
return "way";
|
||||
}
|
||||
}
|
||||
|
||||
function featureTypeName(feature) {
|
||||
if (featureType(feature) == "node") {
|
||||
return I18n.t('browse.start_rjs.object_list.type.node');
|
||||
} else if (featureType(feature) == "way") {
|
||||
return I18n.t('browse.start_rjs.object_list.type.way');
|
||||
}
|
||||
}
|
||||
|
||||
function featureName(feature) {
|
||||
var lang = $('html').attr('lang');
|
||||
if (feature.attributes['name:' + lang]) {
|
||||
return feature.attributes['name:' + lang];
|
||||
} else if (feature.attributes.name) {
|
||||
return feature.attributes.name;
|
||||
} else {
|
||||
return feature.osm_id;
|
||||
}
|
||||
}
|
||||
|
||||
function featureNameSelect(feature) {
|
||||
var lang = $('html').attr('lang');
|
||||
if (feature.attributes['name:' + lang]) {
|
||||
return feature.attributes['name:' + lang];
|
||||
} else if (feature.attributes.name) {
|
||||
return feature.attributes.name;
|
||||
} else if (featureType(feature) == "node") {
|
||||
return I18n.t("browse.start_rjs.object_list.selected.type.node", { id: feature.osm_id });
|
||||
} else if (featureType(feature) == "way") {
|
||||
return I18n.t("browse.start_rjs.object_list.selected.type.way", { id: feature.osm_id });
|
||||
}
|
||||
}
|
||||
|
||||
function featureNameHistory(feature) {
|
||||
var lang = $('html').attr('lang');
|
||||
if (feature.attributes['name:' + lang]) {
|
||||
return feature.attributes['name:' + lang];
|
||||
} else if (feature.attributes.name) {
|
||||
return feature.attributes.name;
|
||||
} else if (featureType(feature) == "node") {
|
||||
return I18n.t("browse.start_rjs.object_list.history.type.node", { id: feature.osm_id });
|
||||
} else if (featureType(feature) == "way") {
|
||||
return I18n.t("browse.start_rjs.object_list.history.type.way", { id: feature.osm_id });
|
||||
}
|
||||
}
|
||||
|
||||
function setStatus(status) {
|
||||
$("#browse_status").html(status);
|
||||
$("#browse_status").show();
|
||||
}
|
||||
|
||||
function clearStatus() {
|
||||
$("#browse_status").html("");
|
||||
$("#browse_status").hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
328
app/assets/javascripts/index/export.js
Normal file
328
app/assets/javascripts/index/export.js
Normal file
|
|
@ -0,0 +1,328 @@
|
|||
$(document).ready(function () {
|
||||
$("#exportanchor").click(function (e) {
|
||||
$.ajax({ url: $(this).data('url'), success: function (sidebarHtml) {
|
||||
startExport(sidebarHtml);
|
||||
}});
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
if (window.location.pathname == "/export") {
|
||||
$("#exportanchor").click();
|
||||
}
|
||||
|
||||
function startExport(sidebarHtml) {
|
||||
var vectors,
|
||||
box,
|
||||
transform,
|
||||
markerLayer,
|
||||
markerControl;
|
||||
|
||||
vectors = new OpenLayers.Layer.Vector("Vector Layer", {
|
||||
displayInLayerSwitcher: false
|
||||
});
|
||||
map.addLayer(vectors);
|
||||
|
||||
box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
|
||||
handlerOptions: {
|
||||
sides: 4,
|
||||
snapAngle: 90,
|
||||
irregular: true,
|
||||
persist: true
|
||||
}
|
||||
});
|
||||
box.handler.callbacks.done = endDrag;
|
||||
map.addControl(box);
|
||||
|
||||
transform = new OpenLayers.Control.TransformFeature(vectors, {
|
||||
rotate: false,
|
||||
irregular: true
|
||||
});
|
||||
transform.events.register("transformcomplete", transform, transformComplete);
|
||||
map.addControl(transform);
|
||||
|
||||
map.events.register("moveend", map, mapMoved);
|
||||
map.events.register("changebaselayer", map, htmlUrlChanged);
|
||||
|
||||
$("#sidebar_title").html(I18n.t('export.start_rjs.export'));
|
||||
$("#sidebar_content").html(sidebarHtml);
|
||||
|
||||
$("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged);
|
||||
|
||||
$("#drag_box").click(startDrag);
|
||||
|
||||
$("#add_marker").click(startMarker);
|
||||
|
||||
$("#format_osm,#format_mapnik,#format_html").click(formatChanged);
|
||||
|
||||
$("#mapnik_scale").change(mapnikSizeChanged);
|
||||
|
||||
openSidebar();
|
||||
|
||||
if (map.baseLayer.name == "Mapnik") {
|
||||
$("#format_mapnik").prop("checked", true);
|
||||
}
|
||||
|
||||
formatChanged();
|
||||
setBounds(map.getExtent());
|
||||
|
||||
$("body").removeClass("site-index").addClass("site-export");
|
||||
|
||||
$("#sidebar").one("closed", function () {
|
||||
$("body").removeClass("site-export").addClass("site-index");
|
||||
|
||||
clearBox();
|
||||
clearMarker();
|
||||
map.events.unregister("moveend", map, mapMoved);
|
||||
map.events.unregister("changebaselayer", map, htmlUrlChanged);
|
||||
map.removeLayer(vectors);
|
||||
});
|
||||
|
||||
function getMercatorBounds() {
|
||||
var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(),
|
||||
$("#maxlon").val(), $("#maxlat").val());
|
||||
|
||||
return proj(bounds);
|
||||
}
|
||||
|
||||
function boundsChanged() {
|
||||
var bounds = getMercatorBounds();
|
||||
|
||||
map.events.unregister("moveend", map, mapMoved);
|
||||
map.zoomToExtent(bounds);
|
||||
|
||||
clearBox();
|
||||
drawBox(bounds);
|
||||
|
||||
validateControls();
|
||||
mapnikSizeChanged();
|
||||
}
|
||||
|
||||
function startDrag() {
|
||||
$("#drag_box").html(I18n.t('export.start_rjs.drag_a_box'));
|
||||
|
||||
clearBox();
|
||||
box.activate();
|
||||
};
|
||||
|
||||
function endDrag(bbox) {
|
||||
var bounds = bbox.getBounds();
|
||||
|
||||
map.events.unregister("moveend", map, mapMoved);
|
||||
setBounds(bounds);
|
||||
drawBox(bounds);
|
||||
box.deactivate();
|
||||
validateControls();
|
||||
|
||||
$("#drag_box").html(I18n.t('export.start_rjs.manually_select'));
|
||||
}
|
||||
|
||||
function transformComplete(event) {
|
||||
setBounds(event.feature.geometry.bounds);
|
||||
validateControls();
|
||||
}
|
||||
|
||||
function startMarker() {
|
||||
$("#add_marker").html(I18n.t('export.start_rjs.click_add_marker'));
|
||||
|
||||
if (!markerLayer) {
|
||||
markerLayer = new OpenLayers.Layer.Vector("",{
|
||||
displayInLayerSwitcher: false,
|
||||
style: {
|
||||
externalGraphic: OpenLayers.Util.getImageLocation("marker.png"),
|
||||
graphicXOffset: -10.5,
|
||||
graphicYOffset: -25,
|
||||
graphicWidth: 21,
|
||||
graphicHeight: 25
|
||||
}
|
||||
});
|
||||
map.addLayer(markerLayer);
|
||||
|
||||
markerControl = new OpenLayers.Control.DrawFeature(markerLayer, OpenLayers.Handler.Point);
|
||||
map.addControl(markerControl);
|
||||
|
||||
markerLayer.events.on({ "featureadded": endMarker });
|
||||
}
|
||||
|
||||
markerLayer.destroyFeatures();
|
||||
markerControl.activate();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function endMarker(event) {
|
||||
markerControl.deactivate();
|
||||
|
||||
$("#add_marker").html(I18n.t('export.start_rjs.change_marker'));
|
||||
$("#marker_inputs").show();
|
||||
|
||||
var geom = unproj(event.feature.geometry);
|
||||
|
||||
$("#marker_lon").val(geom.x.toFixed(5));
|
||||
$("#marker_lat").val(geom.y.toFixed(5));
|
||||
|
||||
htmlUrlChanged();
|
||||
}
|
||||
|
||||
function clearMarker() {
|
||||
$("#marker_lon,#marker_lat").val("");
|
||||
$("#marker_inputs").hide();
|
||||
$("#add_marker").html(I18n.t('export.start_rjs.add_marker'));
|
||||
|
||||
if (markerLayer) {
|
||||
markerControl.destroy();
|
||||
markerLayer.destroy();
|
||||
markerLayer = null;
|
||||
markerControl = null;
|
||||
}
|
||||
}
|
||||
|
||||
function mapMoved() {
|
||||
setBounds(map.getExtent());
|
||||
validateControls();
|
||||
}
|
||||
|
||||
function setBounds(bounds) {
|
||||
var toPrecision = zoomPrecision(map.getZoom());
|
||||
|
||||
bounds = unproj(bounds);
|
||||
|
||||
$("#minlon").val(toPrecision(bounds.left));
|
||||
$("#minlat").val(toPrecision(bounds.bottom));
|
||||
$("#maxlon").val(toPrecision(bounds.right));
|
||||
$("#maxlat").val(toPrecision(bounds.top));
|
||||
|
||||
mapnikSizeChanged();
|
||||
htmlUrlChanged();
|
||||
}
|
||||
|
||||
function clearBox() {
|
||||
transform.deactivate();
|
||||
vectors.destroyFeatures();
|
||||
}
|
||||
|
||||
function drawBox(bounds) {
|
||||
var feature = new OpenLayers.Feature.Vector(bounds.toGeometry());
|
||||
|
||||
vectors.addFeatures(feature);
|
||||
transform.setFeature(feature);
|
||||
}
|
||||
|
||||
function validateControls() {
|
||||
var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
|
||||
|
||||
if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) {
|
||||
$("#export_osm_too_large").show();
|
||||
} else {
|
||||
$("#export_osm_too_large").hide();
|
||||
}
|
||||
|
||||
var max_scale = maxMapnikScale();
|
||||
var disabled = true;
|
||||
|
||||
if ($("#format_osm").prop("checked")) {
|
||||
disabled = bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA;
|
||||
} else if ($("#format_mapnik").prop("checked")) {
|
||||
disabled = $("#mapnik_scale").val() < max_scale;
|
||||
}
|
||||
|
||||
$("#export_commit").prop("disabled", disabled);
|
||||
$("#mapnik_max_scale").html(roundScale(max_scale));
|
||||
}
|
||||
|
||||
function htmlUrlChanged() {
|
||||
var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
|
||||
var layerName = map.baseLayer.keyid;
|
||||
var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBOX() + "&layer=" + layerName;
|
||||
var markerUrl = "";
|
||||
|
||||
if ($("#marker_lat").val() && $("#marker_lon").val()) {
|
||||
markerUrl = "&mlat=" + $("#marker_lat").val() + "&mlon=" + $("#marker_lon").val();
|
||||
url += "&marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val();
|
||||
}
|
||||
|
||||
var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+url+'" style="border: 1px solid black"></iframe>';
|
||||
|
||||
// Create "larger map" link
|
||||
var center = bounds.getCenterLonLat();
|
||||
|
||||
var zoom = map.getZoomForExtent(proj(bounds));
|
||||
|
||||
var layers = getMapLayers();
|
||||
|
||||
var text = I18n.t('export.start_rjs.view_larger_map');
|
||||
var escaped = [];
|
||||
|
||||
for (var i = 0; i < text.length; ++i) {
|
||||
var c = text.charCodeAt(i);
|
||||
escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";");
|
||||
}
|
||||
|
||||
html += '<br /><small><a href="http://' + OSM.SERVER_URL + '/?lat='+center.lat+'&lon='+center.lon+'&zoom='+zoom+'&layers='+layers+markerUrl+'">'+escaped.join("")+'</a></small>';
|
||||
|
||||
$("#export_html_text").val(html);
|
||||
|
||||
if ($("#format_html").prop("checked")) {
|
||||
$("#export_html_text").prop("selected", true);
|
||||
}
|
||||
}
|
||||
|
||||
function formatChanged() {
|
||||
$("#export_commit").show();
|
||||
|
||||
if ($("#format_osm").prop("checked")) {
|
||||
$("#export_osm").show();
|
||||
} else {
|
||||
$("#export_osm").hide();
|
||||
}
|
||||
|
||||
if ($("#format_mapnik").prop("checked")) {
|
||||
$("#mapnik_scale").val(roundScale(map.getScale()));
|
||||
$("#export_mapnik").show();
|
||||
|
||||
mapnikSizeChanged();
|
||||
} else {
|
||||
$("#export_mapnik").hide();
|
||||
}
|
||||
|
||||
if ($("#format_html").prop("checked")) {
|
||||
$("#export_html").show();
|
||||
$("#export_commit").hide();
|
||||
$("#export_html_text").prop("selected", true);
|
||||
} else {
|
||||
$("#export_html").hide();
|
||||
|
||||
clearMarker();
|
||||
}
|
||||
|
||||
validateControls();
|
||||
}
|
||||
|
||||
function maxMapnikScale() {
|
||||
var bounds = getMercatorBounds();
|
||||
|
||||
return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136));
|
||||
}
|
||||
|
||||
function mapnikImageSize(scale) {
|
||||
var bounds = getMercatorBounds();
|
||||
|
||||
return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028),
|
||||
Math.round(bounds.getHeight() / scale / 0.00028));
|
||||
}
|
||||
|
||||
function roundScale(scale) {
|
||||
var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
|
||||
|
||||
return precision * Math.ceil(scale / precision);
|
||||
}
|
||||
|
||||
function mapnikSizeChanged() {
|
||||
var size = mapnikImageSize($("#mapnik_scale").val());
|
||||
|
||||
$("#mapnik_image_width").html(size.w);
|
||||
$("#mapnik_image_height").html(size.h);
|
||||
|
||||
validateControls();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -106,13 +106,13 @@ function addMarkerToMap(position, icon, description) {
|
|||
return marker;
|
||||
}
|
||||
|
||||
function addObjectToMap(url, zoom, callback) {
|
||||
function addObjectToMap(object, zoom, callback) {
|
||||
var layer = new OpenLayers.Layer.Vector("Objects", {
|
||||
strategies: [
|
||||
new OpenLayers.Strategy.Fixed()
|
||||
],
|
||||
protocol: new OpenLayers.Protocol.HTTP({
|
||||
url: url,
|
||||
url: OSM.apiUrl(object),
|
||||
format: new OpenLayers.Format.OSM()
|
||||
}),
|
||||
style: {
|
||||
|
|
@ -196,7 +196,6 @@ function openMapPopup(marker, description) {
|
|||
function closeMapPopup() {
|
||||
if (popup) {
|
||||
map.removePopup(popup);
|
||||
delete popup;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -204,10 +203,6 @@ function removeMarkerFromMap(marker){
|
|||
markers.removeMarker(marker);
|
||||
}
|
||||
|
||||
function removeBoxFromMap(box){
|
||||
vectors.removeFeature(box);
|
||||
}
|
||||
|
||||
function proj(x) {
|
||||
return x.clone().transform(epsg4326, map.getProjectionObject());
|
||||
}
|
||||
|
|
@ -224,7 +219,7 @@ function setMapCenter(center, zoom) {
|
|||
}
|
||||
|
||||
function getEventPosition(event) {
|
||||
return map.getLonLatFromViewPortPx(event.xy).clone().transform(map.getProjectionObject(), epsg4326);
|
||||
return unproj(map.getLonLatFromViewPortPx(event.xy));
|
||||
}
|
||||
|
||||
function getMapLayers() {
|
||||
|
|
|
|||
|
|
@ -1,213 +1,227 @@
|
|||
function addNoteLayer(map, notesUrl, newNoteControls, newNoteForm, minZoom) {
|
||||
var newNotes;
|
||||
$(document).ready(function () {
|
||||
var params = OSM.mapParams();
|
||||
|
||||
var saveNewNotes = function (o) {
|
||||
var layer = o.object;
|
||||
newNotes = layer.getFeaturesByAttribute("status", "new")
|
||||
layer.removeFeatures(newNotes, { silent: true });
|
||||
};
|
||||
// map.noteLayer = addNoteLayer(map, $("#show_notes").attr("href"), $("#createnoteanchor"), $("#new-note"), 11);
|
||||
|
||||
var restoreNewNotes = function (o) {
|
||||
var layer = o.object;
|
||||
layer.addFeatures(newNotes);
|
||||
newNotes = undefined;
|
||||
};
|
||||
$("#show_notes").click(function () {
|
||||
map.noteLayer.setVisibility(true);
|
||||
});
|
||||
|
||||
var describeNote = function (n) {
|
||||
var description = "<h2>Note " + n.id + "</h2>";
|
||||
|
||||
n.comments.forEach(function (c) {
|
||||
description += "<p><small class='deemphasize'>" + c.action + " by ";
|
||||
description += c.user + " at " + c.date + "</small><br/>" + c.text + "</p>";
|
||||
});
|
||||
|
||||
return description;
|
||||
if (params.notes) {
|
||||
map.noteLayer.setVisibility(true);
|
||||
}
|
||||
|
||||
var noteSelected = function (o) {
|
||||
var feature = o.feature;
|
||||
var location = feature.geometry.getBounds().getCenterLonLat();
|
||||
var content;
|
||||
var close;
|
||||
function addNoteLayer(map, notesUrl, newNoteControls, newNoteForm, minZoom) {
|
||||
var newNotes;
|
||||
|
||||
if (feature.attributes.status === "new") {
|
||||
var form = newNoteForm.clone();
|
||||
form.removeClass("hidden");
|
||||
content = form.html();
|
||||
close = false;
|
||||
} else {
|
||||
content = describeNote(feature.attributes);
|
||||
close = true;
|
||||
var saveNewNotes = function (o) {
|
||||
var layer = o.object;
|
||||
newNotes = layer.getFeaturesByAttribute("status", "new")
|
||||
layer.removeFeatures(newNotes, { silent: true });
|
||||
};
|
||||
|
||||
feature.popup = new OpenLayers.Popup.FramedCloud(
|
||||
feature.attributes.id, location, null, content, null, close,
|
||||
function (e) { map.noteSelector.unselect(feature) }
|
||||
);
|
||||
var restoreNewNotes = function (o) {
|
||||
var layer = o.object;
|
||||
layer.addFeatures(newNotes);
|
||||
newNotes = undefined;
|
||||
};
|
||||
|
||||
map.addPopup(feature.popup);
|
||||
// feature.popup.show();
|
||||
var describeNote = function (n) {
|
||||
var description = "<h2>Note " + n.id + "</h2>";
|
||||
|
||||
$(feature.popup.contentDiv).find("textarea").autoGrow();
|
||||
|
||||
$(feature.popup.contentDiv).find("input#note-submit").click(function (e) {
|
||||
var location = unproj(feature.geometry.getBounds().getCenterLonLat());
|
||||
var form = $(e.target).parents("form").first();
|
||||
|
||||
$.ajax(form.prop("action"), {
|
||||
type: form.prop("method"),
|
||||
data: {
|
||||
lon: location.lon,
|
||||
lat: location.lat,
|
||||
text: form.find("textarea#comment").val()
|
||||
},
|
||||
success: function (data) {
|
||||
map.noteSelector.unselect(feature);
|
||||
|
||||
feature.attributes.status = "open";
|
||||
feature.attributes.id = data;
|
||||
|
||||
map.noteLayer.drawFeature(feature);
|
||||
|
||||
map.noteMover.deactivate();
|
||||
}
|
||||
n.comments.forEach(function (c) {
|
||||
description += "<p><small class='deemphasize'>" + c.action + " by ";
|
||||
description += c.user + " at " + c.date + "</small><br/>" + c.text + "</p>";
|
||||
});
|
||||
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$(feature.popup.contentDiv).find("input#note-cancel").click(function (e) {
|
||||
feature.attributes.status = "cancelled";
|
||||
|
||||
map.noteSelector.unselect(feature);
|
||||
map.noteLayer.removeFeatures(feature);
|
||||
|
||||
feature.destroy();
|
||||
|
||||
map.noteMover.deactivate();
|
||||
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
feature.popup.updateSize();
|
||||
};
|
||||
|
||||
var noteUnselected = function (o) {
|
||||
var feature = o.feature;
|
||||
|
||||
map.removePopup(feature.popup);
|
||||
|
||||
delete feature.popup;
|
||||
};
|
||||
|
||||
var allowNoteReports = function () {
|
||||
if (map.getZoom() > minZoom) {
|
||||
newNoteControls.show();
|
||||
} else {
|
||||
newNoteControls.hide();
|
||||
return description;
|
||||
}
|
||||
};
|
||||
|
||||
var addNote = function () {
|
||||
var lonlat = map.getCenter();
|
||||
var layer = map.noteLayer;
|
||||
var geometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
|
||||
var feature = new OpenLayers.Feature.Vector(geometry, {
|
||||
status: "new"
|
||||
var noteSelected = function (o) {
|
||||
var feature = o.feature;
|
||||
var location = feature.geometry.getBounds().getCenterLonLat();
|
||||
var content;
|
||||
var close;
|
||||
|
||||
if (feature.attributes.status === "new") {
|
||||
var form = newNoteForm.clone();
|
||||
form.removeClass("hidden");
|
||||
content = form.html();
|
||||
close = false;
|
||||
} else {
|
||||
content = describeNote(feature.attributes);
|
||||
close = true;
|
||||
};
|
||||
|
||||
feature.popup = new OpenLayers.Popup.FramedCloud(
|
||||
feature.attributes.id, location, null, content, null, close,
|
||||
function (e) { map.noteSelector.unselect(feature) }
|
||||
);
|
||||
|
||||
map.addPopup(feature.popup);
|
||||
// feature.popup.show();
|
||||
|
||||
$(feature.popup.contentDiv).find("textarea").autoGrow();
|
||||
|
||||
$(feature.popup.contentDiv).find("input#note-submit").click(function (e) {
|
||||
var location = unproj(feature.geometry.getBounds().getCenterLonLat());
|
||||
var form = $(e.target).parents("form").first();
|
||||
|
||||
$.ajax(form.prop("action"), {
|
||||
type: form.prop("method"),
|
||||
data: {
|
||||
lon: location.lon,
|
||||
lat: location.lat,
|
||||
text: form.find("textarea#comment").val()
|
||||
},
|
||||
success: function (data) {
|
||||
map.noteSelector.unselect(feature);
|
||||
|
||||
feature.attributes.status = "open";
|
||||
feature.attributes.id = data;
|
||||
|
||||
map.noteLayer.drawFeature(feature);
|
||||
|
||||
map.noteMover.deactivate();
|
||||
}
|
||||
});
|
||||
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$(feature.popup.contentDiv).find("input#note-cancel").click(function (e) {
|
||||
feature.attributes.status = "cancelled";
|
||||
|
||||
map.noteSelector.unselect(feature);
|
||||
map.noteLayer.removeFeatures(feature);
|
||||
|
||||
feature.destroy();
|
||||
|
||||
map.noteMover.deactivate();
|
||||
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
feature.popup.updateSize();
|
||||
};
|
||||
|
||||
var noteUnselected = function (o) {
|
||||
var feature = o.feature;
|
||||
|
||||
map.removePopup(feature.popup);
|
||||
|
||||
delete feature.popup;
|
||||
};
|
||||
|
||||
var allowNoteReports = function () {
|
||||
if (map.getZoom() > minZoom) {
|
||||
newNoteControls.show();
|
||||
} else {
|
||||
newNoteControls.hide();
|
||||
}
|
||||
};
|
||||
|
||||
var addNote = function () {
|
||||
var lonlat = map.getCenter();
|
||||
var layer = map.noteLayer;
|
||||
var geometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
|
||||
var feature = new OpenLayers.Feature.Vector(geometry, {
|
||||
status: "new"
|
||||
});
|
||||
|
||||
layer.addFeatures(feature);
|
||||
map.noteSelector.unselectAll();
|
||||
map.noteSelector.select(feature);
|
||||
map.noteMover.activate();
|
||||
map.noteLayer.setVisibility(true);
|
||||
};
|
||||
|
||||
map.noteLayer = new OpenLayers.Layer.Vector("Notes", {
|
||||
visibility: false,
|
||||
displayInLayerSwitcher: false,
|
||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
||||
styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
|
||||
graphicWidth: 22,
|
||||
graphicHeight: 22,
|
||||
graphicOpacity: 0.7,
|
||||
graphicXOffset: -11,
|
||||
graphicYOffset: -11
|
||||
}, {
|
||||
rules: [
|
||||
new OpenLayers.Rule({
|
||||
filter: new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.EQUAL_TO,
|
||||
property: "status",
|
||||
value: "new"
|
||||
}),
|
||||
symbolizer: {
|
||||
externalGraphic: "<%= image_path 'new_note_marker.png' %>"
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Rule({
|
||||
filter: new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.EQUAL_TO,
|
||||
property: "status",
|
||||
value: "open"
|
||||
}),
|
||||
symbolizer: {
|
||||
externalGraphic: "<%= image_path 'open_note_marker.png' %>"
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Rule({
|
||||
filter: new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.EQUAL_TO,
|
||||
property: "status",
|
||||
value: "closed"
|
||||
}),
|
||||
symbolizer: {
|
||||
externalGraphic: "<%= image_path 'closed_note_marker.png' %>"
|
||||
}
|
||||
})
|
||||
]
|
||||
})),
|
||||
strategies: [
|
||||
new OpenLayers.Strategy.BBOX()
|
||||
],
|
||||
protocol: new OpenLayers.Protocol.HTTP({
|
||||
url: notesUrl,
|
||||
format: new OpenLayers.Format.GeoJSON()
|
||||
})
|
||||
});
|
||||
|
||||
layer.addFeatures(feature);
|
||||
map.noteSelector.unselectAll();
|
||||
map.noteSelector.select(feature);
|
||||
map.noteMover.activate();
|
||||
map.noteLayer.setVisibility(true);
|
||||
};
|
||||
map.noteLayer.events.register("beforefeaturesremoved", map, saveNewNotes);
|
||||
map.noteLayer.events.register("featuresremoved", map, restoreNewNotes);
|
||||
map.noteLayer.events.register("featureselected", map, noteSelected);
|
||||
map.noteLayer.events.register("featureunselected", map, noteUnselected);
|
||||
|
||||
map.noteLayer = new OpenLayers.Layer.Vector("Notes", {
|
||||
visibility: false,
|
||||
displayInLayerSwitcher: false,
|
||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
||||
styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
|
||||
graphicWidth: 22,
|
||||
graphicHeight: 22,
|
||||
graphicOpacity: 0.7,
|
||||
graphicXOffset: -11,
|
||||
graphicYOffset: -11
|
||||
}, {
|
||||
rules: [
|
||||
new OpenLayers.Rule({
|
||||
filter: new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.EQUAL_TO,
|
||||
property: "status",
|
||||
value: "new"
|
||||
}),
|
||||
symbolizer: {
|
||||
externalGraphic: "<%= image_path 'new_note_marker.png' %>"
|
||||
map.addLayer(map.noteLayer);
|
||||
|
||||
map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, {
|
||||
autoActivate: true
|
||||
});
|
||||
|
||||
map.addControl(map.noteSelector);
|
||||
|
||||
map.noteMover = new OpenLayers.Control.DragFeature(map.noteLayer, {
|
||||
onDrag: function (feature, pixel) {
|
||||
feature.popup.lonlat = feature.geometry.getBounds().getCenterLonLat();
|
||||
feature.popup.updatePosition();
|
||||
},
|
||||
featureCallbacks: {
|
||||
over: function (feature) {
|
||||
if (feature.attributes.status === "new") {
|
||||
map.noteMover.overFeature.apply(map.noteMover, [feature]);
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Rule({
|
||||
filter: new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.EQUAL_TO,
|
||||
property: "status",
|
||||
value: "open"
|
||||
}),
|
||||
symbolizer: {
|
||||
externalGraphic: "<%= image_path 'open_note_marker.png' %>"
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Rule({
|
||||
filter: new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.EQUAL_TO,
|
||||
property: "status",
|
||||
value: "closed"
|
||||
}),
|
||||
symbolizer: {
|
||||
externalGraphic: "<%= image_path 'closed_note_marker.png' %>"
|
||||
}
|
||||
})
|
||||
]
|
||||
})),
|
||||
strategies: [
|
||||
new OpenLayers.Strategy.BBOX()
|
||||
],
|
||||
protocol: new OpenLayers.Protocol.HTTP({
|
||||
url: notesUrl,
|
||||
format: new OpenLayers.Format.GeoJSON()
|
||||
})
|
||||
});
|
||||
|
||||
map.noteLayer.events.register("beforefeaturesremoved", map, saveNewNotes);
|
||||
map.noteLayer.events.register("featuresremoved", map, restoreNewNotes);
|
||||
map.noteLayer.events.register("featureselected", map, noteSelected);
|
||||
map.noteLayer.events.register("featureunselected", map, noteUnselected);
|
||||
|
||||
map.addLayer(map.noteLayer);
|
||||
|
||||
map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, {
|
||||
autoActivate: true
|
||||
});
|
||||
|
||||
map.addControl(map.noteSelector);
|
||||
|
||||
map.noteMover = new OpenLayers.Control.DragFeature(map.noteLayer, {
|
||||
onDrag: function (feature, pixel) {
|
||||
feature.popup.lonlat = feature.geometry.getBounds().getCenterLonLat();
|
||||
feature.popup.updatePosition();
|
||||
},
|
||||
featureCallbacks: {
|
||||
over: function (feature) {
|
||||
if (feature.attributes.status === "new") {
|
||||
map.noteMover.overFeature.apply(map.noteMover, [feature]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
map.addControl(map.noteMover);
|
||||
map.addControl(map.noteMover);
|
||||
|
||||
newNoteControls.click(addNote);
|
||||
newNoteControls.click(addNote);
|
||||
|
||||
map.events.register("zoomend", map, allowNoteReports);
|
||||
map.events.register("zoomend", map, allowNoteReports);
|
||||
|
||||
return map.noteLayer;
|
||||
}
|
||||
return map.noteLayer;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
121
app/assets/javascripts/osm.js.erb
Normal file
121
app/assets/javascripts/osm.js.erb
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
OSM = {
|
||||
<% if defined?(PIWIK_LOCATION) and defined?(PIWIK_SITE) %>
|
||||
PIWIK_LOCATION: <%= PIWIK_LOCATION.to_json %>,
|
||||
PIWIK_SITE: <%= PIWIK_SITE.to_json %>,
|
||||
<% end %>
|
||||
|
||||
MAX_REQUEST_AREA: <%= MAX_REQUEST_AREA.to_json %>,
|
||||
SERVER_URL: <%= SERVER_URL.to_json %>,
|
||||
API_VERSION: <%= API_VERSION.to_json %>,
|
||||
|
||||
apiUrl: function (object) {
|
||||
var url = "/api/" + OSM.API_VERSION + "/" + object.type + "/" + object.id;
|
||||
|
||||
if (object.type != "node") {
|
||||
url += "/full";
|
||||
} else if (object.version) {
|
||||
url += "/" + object.version;
|
||||
}
|
||||
|
||||
return url;
|
||||
},
|
||||
|
||||
mapParams: function (search) {
|
||||
var params = {}, mapParams = {}, loc;
|
||||
|
||||
search = (search || window.location.search).replace('?', '').split('&');
|
||||
|
||||
for (var i = 0; i < search.length; ++i) {
|
||||
var pair = search[i],
|
||||
j = pair.indexOf('='),
|
||||
key = pair.slice(0, j),
|
||||
val = pair.slice(++j);
|
||||
params[key] = decodeURIComponent(val);
|
||||
}
|
||||
|
||||
if (params.mlon && params.mlat) {
|
||||
mapParams.marker = true;
|
||||
mapParams.mlon = parseFloat(params.mlon);
|
||||
mapParams.mlat = parseFloat(params.mlat);
|
||||
}
|
||||
|
||||
if (params.layers) {
|
||||
mapParams.layers = params.layers;
|
||||
}
|
||||
|
||||
if (params.node || params.way || params.relation) {
|
||||
mapParams.object_zoom = true;
|
||||
|
||||
if (params.node) {
|
||||
mapParams.object = {type: 'node', id: parseInt(params.node)};
|
||||
} else if (params.way) {
|
||||
mapParams.object = {type: 'way', id: parseInt(params.way)};
|
||||
} else if (params.relation) {
|
||||
mapParams.object = {type: 'relation', id: parseInt(params.relation)};
|
||||
}
|
||||
}
|
||||
|
||||
// Decide on a lat lon to initialise the map with. Various ways of doing this
|
||||
if (params.bbox) {
|
||||
var bbox = params.bbox.split(",");
|
||||
mapParams.bbox = true;
|
||||
mapParams.minlon = parseFloat(bbox[0]);
|
||||
mapParams.minlat = parseFloat(bbox[1]);
|
||||
mapParams.maxlon = parseFloat(bbox[2]);
|
||||
mapParams.maxlat = parseFloat(bbox[3]);
|
||||
mapParams.object_zoom = false;
|
||||
} else if (params.minlon && params.minlat && params.maxlon && params.maxlat) {
|
||||
mapParams.bbox = true;
|
||||
mapParams.minlon = parseFloat(params.minlon);
|
||||
mapParams.minlat = parseFloat(params.minlat);
|
||||
mapParams.maxlon = parseFloat(params.maxlon);
|
||||
mapParams.maxlat = parseFloat(params.maxlat);
|
||||
mapParams.object_zoom = false;
|
||||
} else if (params.lon && params.lat) {
|
||||
mapParams.lon = parseFloat(params.lon);
|
||||
mapParams.lat = parseFloat(params.lat);
|
||||
mapParams.zoom = parseInt(params.zoom || 5);
|
||||
mapParams.object_zoom = false;
|
||||
} else if (params.mlon && params.mlat) {
|
||||
mapParams.lon = parseFloat(params.mlon);
|
||||
mapParams.lat = parseFloat(params.mlat);
|
||||
mapParams.zoom = parseInt(params.zoom || 12);
|
||||
mapParams.object_zoom = false;
|
||||
} else if (loc = $.cookie('_osm_location')) {
|
||||
loc = loc.split("|");
|
||||
mapParams.lon = parseFloat(loc[0]);
|
||||
mapParams.lat = parseFloat(loc[1]);
|
||||
mapParams.zoom = parseInt(loc[2]);
|
||||
mapParams.layers = loc[3];
|
||||
} else if (OSM.home) {
|
||||
mapParams.lon = OSM.home.lon;
|
||||
mapParams.lat = OSM.home.lat;
|
||||
mapParams.zoom = 10;
|
||||
} else if (OSM.location) {
|
||||
mapParams.bbox = true;
|
||||
mapParams.minlon = OSM.location.minlon;
|
||||
mapParams.minlat = OSM.location.minlat;
|
||||
mapParams.maxlon = OSM.location.maxlon;
|
||||
mapParams.maxlat = OSM.location.maxlat;
|
||||
} else {
|
||||
mapParams.lon = -0.1;
|
||||
mapParams.lat = 51.5;
|
||||
mapParams.zoom = parseInt(params.zoom || 5);
|
||||
}
|
||||
|
||||
if (mapParams.bbox) {
|
||||
mapParams.box = params.box == "yes";
|
||||
mapParams.lon = (mapParams.minlon + mapParams.maxlon) / 2;
|
||||
mapParams.lat = (mapParams.minlat + mapParams.maxlat) / 2;
|
||||
}
|
||||
|
||||
mapParams.notes = params.notes == "yes";
|
||||
|
||||
var scale = parseFloat(params.scale);
|
||||
if (scale > 0) {
|
||||
mapParams.zoom = Math.log(360.0 / (scale * 512.0)) / Math.log(2.0);
|
||||
}
|
||||
|
||||
return mapParams;
|
||||
}
|
||||
};
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
OSM.mapParams = function (search) {
|
||||
var params = {}, mapParams = {}, loc;
|
||||
|
||||
search = (search || window.location.search).replace('?', '').split('&');
|
||||
|
||||
for (var i = 0; i < search.length; ++i) {
|
||||
var pair = search[i],
|
||||
j = pair.indexOf('='),
|
||||
key = pair.slice(0, j),
|
||||
val = pair.slice(++j);
|
||||
params[key] = decodeURIComponent(val);
|
||||
}
|
||||
|
||||
if (params.mlon && params.mlat) {
|
||||
mapParams.marker = true;
|
||||
mapParams.mlon = parseFloat(params.mlon);
|
||||
mapParams.mlat = parseFloat(params.mlat);
|
||||
}
|
||||
|
||||
if (params.layers) {
|
||||
mapParams.layers = params.layers;
|
||||
}
|
||||
|
||||
if (params.node || params.way || params.relation) {
|
||||
mapParams.object = true;
|
||||
mapParams.object_zoom = true;
|
||||
|
||||
if (params.node) {
|
||||
mapParams.object_type = 'node';
|
||||
mapParams.object_id = parseInt(params.node);
|
||||
} else if (params.way) {
|
||||
mapParams.object_type = 'way';
|
||||
mapParams.object_id = parseInt(params.way);
|
||||
} else if (params.relation) {
|
||||
mapParams.object_type = 'relation';
|
||||
mapParams.object_id = parseInt(params.relation);
|
||||
}
|
||||
}
|
||||
|
||||
// Decide on a lat lon to initialise the map with. Various ways of doing this
|
||||
if (params.bbox) {
|
||||
var bbox = params.bbox.split(",");
|
||||
mapParams.bbox = true;
|
||||
mapParams.minlon = parseFloat(bbox[0]);
|
||||
mapParams.minlat = parseFloat(bbox[1]);
|
||||
mapParams.maxlon = parseFloat(bbox[2]);
|
||||
mapParams.maxlat = parseFloat(bbox[3]);
|
||||
mapParams.object_zoom = false;
|
||||
} else if (params.minlon && params.minlat && params.maxlon && params.maxlat) {
|
||||
mapParams.bbox = true;
|
||||
mapParams.minlon = parseFloat(params.minlon);
|
||||
mapParams.minlat = parseFloat(params.minlat);
|
||||
mapParams.maxlon = parseFloat(params.maxlon);
|
||||
mapParams.maxlat = parseFloat(params.maxlat);
|
||||
mapParams.object_zoom = false;
|
||||
} else if (params.lon && params.lat) {
|
||||
mapParams.lon = parseFloat(params.lon);
|
||||
mapParams.lat = parseFloat(params.lat);
|
||||
mapParams.zoom = parseInt(params.zoom || 5);
|
||||
mapParams.object_zoom = false;
|
||||
} else if (params.mlon && params.mlat) {
|
||||
mapParams.lon = parseFloat(params.mlon);
|
||||
mapParams.lat = parseFloat(params.mlat);
|
||||
mapParams.zoom = parseInt(params.zoom || 12);
|
||||
mapParams.object_zoom = false;
|
||||
} else if (loc = $.cookie('_osm_location')) {
|
||||
loc = loc.split("|");
|
||||
mapParams.lon = parseFloat(loc[0]);
|
||||
mapParams.lat = parseFloat(loc[1]);
|
||||
mapParams.zoom = parseInt(loc[2]);
|
||||
mapParams.layers = loc[3];
|
||||
} else if (OSM.home) {
|
||||
mapParams.lon = OSM.home.lon;
|
||||
mapParams.lat = OSM.home.lat;
|
||||
mapParams.zoom = 10;
|
||||
} else if (OSM.location) {
|
||||
mapParams.bbox = true;
|
||||
mapParams.minlon = OSM.location.minlon;
|
||||
mapParams.minlat = OSM.location.minlat;
|
||||
mapParams.maxlon = OSM.location.maxlon;
|
||||
mapParams.maxlat = OSM.location.maxlat;
|
||||
} else {
|
||||
mapParams.lon = -0.1;
|
||||
mapParams.lat = 51.5;
|
||||
mapParams.zoom = parseInt(params.zoom || 5);
|
||||
}
|
||||
|
||||
if (mapParams.bbox) {
|
||||
mapParams.box = params.box == "yes";
|
||||
mapParams.lon = (mapParams.minlon + mapParams.maxlon) / 2;
|
||||
mapParams.lat = (mapParams.minlat + mapParams.maxlat) / 2;
|
||||
}
|
||||
|
||||
var scale = parseFloat(params.scale);
|
||||
if (scale > 0) {
|
||||
mapParams.zoom = Math.log(360.0 / (scale * 512.0)) / Math.log(2.0);
|
||||
}
|
||||
|
||||
return mapParams;
|
||||
};
|
||||
19
app/assets/javascripts/templates/browse/feature.jst.ejs
Normal file
19
app/assets/javascripts/templates/browse/feature.jst.ejs
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
<a href="#" class="browse_show_list"><%- I18n.t('browse.start_rjs.object_list.back') %></a>
|
||||
</div>
|
||||
<table width="100%" class="browse_heading">
|
||||
<tr>
|
||||
<td><%- name %></td>
|
||||
<td align="right">
|
||||
<a href="<%- url %>"><%- I18n.t('browse.start_rjs.object_list.details') %></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="browse_details">
|
||||
<ul>
|
||||
<% for (var key in attributes) { %>
|
||||
<li><b><%- key %></b>: <%- attributes[key] %></li>
|
||||
<% } %>
|
||||
</ul>
|
||||
<a href="<%- url %>/history" class="browse_show_history"><%- I18n.t('browse.start_rjs.show_history') %></a>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<table width="100%" class="browse_heading">
|
||||
<tr>
|
||||
<td><%- I18n.t("browse.start_rjs.history_for_feature", {feature: name}) %></td>
|
||||
<td align="right">
|
||||
<a href="<%- url %>/history"><%- I18n.t('browse.start_rjs.details') %></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="browse_details">
|
||||
<ul>
|
||||
<% for (var i = 0; i < history.length; i++) { %>
|
||||
<li><%- I18n.t("browse.start_rjs.edited_by_user_at_timestamp", history[i]) %></li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<div>
|
||||
<p class="browse_heading"><%- I18n.t('browse.start_rjs.object_list.heading') %></p>
|
||||
<ul>
|
||||
<% for (var i = 0; i < features.length; i++) { %>
|
||||
<li><%- features[i].typeName %> <a href="<%- features[i].url %>" data-feature-id="<%- features[i].id %>"><%- features[i].name %></a></li>
|
||||
<% } %>
|
||||
</ul>
|
||||
<a href="<%- url %>"><%- I18n.t('browse.start_rjs.object_list.api') %></a>
|
||||
</div>
|
||||
42
app/assets/javascripts/user.js
Normal file
42
app/assets/javascripts/user.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
$(document).ready(function () {
|
||||
var map = createMap("map");
|
||||
|
||||
if (OSM.home) {
|
||||
setMapCenter(new OpenLayers.LonLat(OSM.home.lon, OSM.home.lat), 12);
|
||||
} else {
|
||||
setMapCenter(new OpenLayers.LonLat(0, 0), 0);
|
||||
}
|
||||
|
||||
if ($("#map").hasClass("set_location")) {
|
||||
var marker;
|
||||
|
||||
if (OSM.home) {
|
||||
marker = addMarkerToMap(new OpenLayers.LonLat(OSM.home.lon, OSM.home.lat));
|
||||
}
|
||||
|
||||
map.events.register("click", map, function (e) {
|
||||
if ($('#updatehome').is(':checked')) {
|
||||
var lonlat = getEventPosition(e);
|
||||
|
||||
$('#homerow').removeClass();
|
||||
$('#home_lat').val(lonlat.lat);
|
||||
$('#home_lon').val(lonlat.lon);
|
||||
|
||||
if (marker) {
|
||||
removeMarkerFromMap(marker);
|
||||
}
|
||||
|
||||
marker = addMarkerToMap(lonlat);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$("[data-user]").each(function () {
|
||||
var user = $(this).data('user');
|
||||
if (user.lon && user.lat) {
|
||||
var icon = OpenLayers.Marker.defaultIcon();
|
||||
icon.url = OpenLayers.Util.getImageLocation(user.icon);
|
||||
addMarkerToMap(new OpenLayers.LonLat(user.lon, user.lat), icon, user.description);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue