//= 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();
+ var areasHidden = false;
+
+ var dataLayer = new L.OSM.DataLayer(null, {
+ styles: {
+ way: {
+ weight: 3,
+ color: "#000000",
+ opacity: 0.4
+ },
+ area: {
+ weight: 3,
+ color: "#ff0000"
+ },
+ node: {
+ color: "#00ff00"
+ }
+ }
+ });
+
+ dataLayer.isWayArea = function () {
+ return !areasHidden && L.OSM.DataLayer.prototype.isWayArea.apply(this, arguments);
+ };
+
+ if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
+ map.layersControl.addOverlay(dataLayer, I18n.t("browse.start_rjs.data_layer_name"));
+ }
+
+ map.on('layeradd', function (e) {
+ if (e.layer === dataLayer) {
+ $.ajax({ url: "/browse/start", success: function (sidebarHtml) {
+ startBrowse(sidebarHtml);
+ }});
+ }
+ });
+
+ map.on('layerremove', function (e) {
+ if (e.layer === dataLayer) {
+ closeSidebar();
+ }
});
function startBrowse(sidebarHtml) {
- var browseMode = "auto";
var browseBounds;
var layersById;
var selectedLayer;
var browseObjectList;
- var areasHidden = false;
-
- var dataLayer = new L.OSM(null, {
- styles: {
- way: {
- weight: 3,
- color: "#000000",
- opacity: 0.4
- },
- area: {
- weight: 3,
- color: "#ff0000"
- },
- node: {
- color: "#00ff00"
- }
- }
- });
-
- dataLayer.addTo(map);
- dataLayer.isWayArea = function () {
- return !areasHidden && L.OSM.prototype.isWayArea.apply(this, arguments);
- };
+ var locationFilter = new L.LocationFilter({
+ enableButton: false,
+ adjustButton: false
+ }).addTo(map);
- var drawHandler = new L.Rectangle.Draw(map, {title: I18n.t('browse.start_rjs.drag_a_box')});
- map.on('draw:rectangle-created', endDrag);
+ locationFilter.on("change", getData);
$("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title'));
$("#sidebar_content").html(sidebarHtml);
map.on("moveend", updateData);
updateData();
- $("#browse_select_view").click(useMap);
+ $("#browse_filter_toggle").toggle(enableFilter, disableFilter);
$("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
$("#browse_hide_areas_box").toggle(hideAreas, showAreas);
function updateData() {
- if (browseMode == "auto") {
+ if (!locationFilter.isEnabled()) {
if (map.getZoom() >= 15) {
- useMap();
+ var bounds = map.getBounds();
+ if (!browseBounds || !browseBounds.contains(bounds)) {
+ browseBounds = bounds;
+ getData();
+ }
} else {
setStatus(I18n.t('browse.start_rjs.zoom_or_select'));
}
$("#sidebar").one("closed", function () {
map.removeLayer(dataLayer);
+ map.removeLayer(locationFilter);
map.off("moveend", updateData);
- map.off('draw:rectangle-created', endDrag);
- drawHandler.disable();
+ locationFilter.off("change", getData);
});
- $("#browse_select_box").click(function () {
- $("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box'));
-
- drawHandler.enable();
-
- return false;
- });
-
- function useMap() {
- var bounds = map.getBounds();
-
- if (!browseBounds || !browseBounds.contains(bounds)) {
- browseBounds = bounds;
- browseMode = "auto";
-
- getData();
-
- $("#browse_select_view").hide();
- }
+ function enableFilter() {
+ $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.view_data'));
+ locationFilter.setBounds(map.getBounds().pad(-0.2));
+ locationFilter.enable();
+ getData();
+ }
- return false;
+ function disableFilter() {
+ $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.manually_select'));
+ locationFilter.disable();
+ getData();
}
function hideAreas() {
$("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas'));
-
areasHidden = true;
-
getData();
}
function showAreas() {
$("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
-
areasHidden = false;
-
- getData();
- }
-
- function endDrag(e) {
- browseBounds = e.rect.getBounds();
- browseMode = "manual";
-
getData();
-
- $("#browse_select_box").html(I18n.t('browse.start_rjs.manually_select'));
- $("#browse_select_view").show();
-
- drawHandler.disable();
}
function displayFeatureWarning(count, limit, callback) {
}
function getData() {
- var size = browseBounds.getSize();
+ var bounds = locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds();
+ var size = bounds.getSize();
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 }));
setStatus(I18n.t('browse.start_rjs.loading'));
- $("#browse_content").empty();
- dataLayer.clearLayers();
- selectedLayer = null;
-
- var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + browseBounds.toBBOX();
+ var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBOX();
/*
* Modern browsers are quite happy showing far more than 100 features in
success: function (xml) {
clearStatus();
- dataLayer.addData(xml);
+ $("#browse_content").empty();
+ dataLayer.clearLayers();
+ selectedLayer = null;
- layersById = {};
- var features = [];
+ var features = dataLayer.buildFeatures(xml);
- dataLayer.eachLayer(function (layer) {
- var feature = layer.feature;
- layersById[feature.id] = layer;
- features.push({
- typeName: featureTypeName(feature),
- url: "/browse/" + feature.type + "/" + feature.id,
- name: featureName(feature),
- id: feature.id
+ function addFeatures() {
+ dataLayer.addData(features);
+
+ layersById = {};
+
+ dataLayer.eachLayer(function (layer) {
+ var feature = layer.feature;
+ layersById[feature.id] = layer;
+ $.extend(feature, {
+ typeName: featureTypeName(feature),
+ url: "/browse/" + feature.type + "/" + feature.id,
+ name: featureName(feature)
+ });
});
- });
- browseObjectList = $(JST["templates/browse/feature_list"]({
- features: features,
- url: url
- }))[0];
+ browseObjectList = $(JST["templates/browse/feature_list"]({
+ features: features,
+ url: url
+ }))[0];
- loadObjectList();
+ loadObjectList();
+ }
+
+ if (features.length < maxFeatures) {
+ addFeatures();
+ } else {
+ displayFeatureWarning(features.length, maxFeatures, addFeatures);
+ }
}
});
}
onSelect(layer);
- if (browseMode != "auto") {
+ if (locationFilter.isEnabled()) {
map.panTo(layer.getBounds().getCenter());
}
projects / rails.git / blobdiff