Merge branch 'leaflet'
This commit is contained in:
Tom Hughes
commit
7d92ec7047
61 changed files with 10245 additions and 1696 deletions
28
Vendorfile
Normal file
28
Vendorfile
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
folder 'vendor/assets' do
|
||||
folder 'leaflet' do
|
||||
from 'https://github.com/CloudMade/Leaflet.git' do
|
||||
file 'leaflet.css', 'dist/leaflet.css'
|
||||
file 'leaflet.ie.css', 'dist/leaflet.ie.css'
|
||||
file 'leaflet.js', 'dist/leaflet-src.js'
|
||||
folder 'images', 'dist/images'
|
||||
end
|
||||
|
||||
from 'https://github.com/tripbirds/leaflet-locationfilter.git' do
|
||||
file 'leaflet.locationfilter.css', 'src/locationfilter.css'
|
||||
file 'leaflet.locationfilter.js', 'src/locationfilter.js'
|
||||
folder 'img', 'src/img'
|
||||
end
|
||||
|
||||
from 'https://github.com/kartena/Leaflet.Pancontrol.git' do
|
||||
file 'leaflet.pan.js', 'src/L.Control.Pan.js'
|
||||
end
|
||||
|
||||
from 'https://github.com/kartena/Leaflet.zoomslider.git' do
|
||||
file 'leaflet.zoom.js', 'src/L.Control.Zoomslider.js'
|
||||
end
|
||||
|
||||
from 'https://github.com/jfirebaugh/leaflet-osm.git' do
|
||||
file 'leaflet.osm.js', 'leaflet-osm.js'
|
||||
end
|
||||
end
|
||||
end
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
BIN
app/assets/images/marker-blue.png
Normal file
BIN
app/assets/images/marker-blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
app/assets/images/marker-green.png
Normal file
BIN
app/assets/images/marker-green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
app/assets/images/marker-red.png
Normal file
BIN
app/assets/images/marker-red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
app/assets/images/marker-yellow.png
Normal file
BIN
app/assets/images/marker-yellow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -4,7 +4,11 @@
|
|||
//= require jquery.timers
|
||||
//= require jquery.cookie
|
||||
//= require augment
|
||||
//= require openlayers
|
||||
//= require leaflet
|
||||
//= require leaflet.osm
|
||||
//= require leaflet.locationfilter
|
||||
//= require leaflet.pan
|
||||
//= require leaflet.zoom
|
||||
//= require i18n/translations
|
||||
//= require osm
|
||||
//= require piwik
|
||||
|
|
|
|||
|
|
@ -22,15 +22,17 @@ $(document).ready(function () {
|
|||
}
|
||||
|
||||
var map = createMap("small_map", {
|
||||
controls: [ new OpenLayers.Control.Navigation() ]
|
||||
layerControl: false,
|
||||
panZoomControl: false,
|
||||
attributionControl: false
|
||||
});
|
||||
|
||||
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();
|
||||
var bbox = L.latLngBounds([params.minlat, params.minlon],
|
||||
[params.maxlat, params.maxlon]);
|
||||
|
||||
map.zoomToExtent(proj(bbox));
|
||||
map.fitBounds(bbox);
|
||||
addBoxToMap(bbox);
|
||||
|
||||
$("#loading").hide();
|
||||
|
|
@ -40,7 +42,8 @@ $(document).ready(function () {
|
|||
return remoteEditHandler(bbox);
|
||||
});
|
||||
|
||||
updatelinks(centre.lon, centre.lat, 16, null, params.minlon, params.minlat, params.maxlon, params.maxlat);
|
||||
var centre = bbox.getCenter();
|
||||
updatelinks(centre.lng, centre.lat, 16, null, params.minlon, params.minlat, params.maxlon, params.maxlat);
|
||||
} else {
|
||||
$("#object_larger_map").hide();
|
||||
$("#object_edit").hide();
|
||||
|
|
@ -56,10 +59,6 @@ $(document).ready(function () {
|
|||
$("#browse_map .geolink").show();
|
||||
|
||||
if (extent) {
|
||||
extent = unproj(extent);
|
||||
|
||||
var centre = extent.getCenterLonLat();
|
||||
|
||||
$("a.bbox[data-editor=remote]").click(function () {
|
||||
return remoteEditHandler(extent);
|
||||
});
|
||||
|
|
@ -71,7 +70,15 @@ $(document).ready(function () {
|
|||
$("#object_larger_map").show();
|
||||
$("#object_edit").show();
|
||||
|
||||
updatelinks(centre.lon, centre.lat, 16, null, extent.left, extent.bottom, extent.right, extent.top, object);
|
||||
var centre = extent.getCenter();
|
||||
updatelinks(centre.lng,
|
||||
centre.lat,
|
||||
16, null,
|
||||
extent.getWestLng(),
|
||||
extent.getSouthLat(),
|
||||
extent.getEastLng(),
|
||||
extent.getNorthLat(),
|
||||
object);
|
||||
} else {
|
||||
$("#small_map").hide();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,83 +1,53 @@
|
|||
$(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();
|
||||
var rects = {};
|
||||
var map = createMap("changeset_list_map");
|
||||
var group = L.featureGroup().addTo(map);
|
||||
|
||||
$("[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);
|
||||
var rect = L.rectangle([[changeset.bbox.minlat, changeset.bbox.minlon],
|
||||
[changeset.bbox.maxlat, changeset.bbox.maxlon]],
|
||||
{weight: 2, color: "#ee9900", fillColor: "#ffff55", fillOpacity: 0});
|
||||
rect.id = changeset.id;
|
||||
rects[changeset.id] = rect;
|
||||
rect.addTo(group);
|
||||
}
|
||||
});
|
||||
|
||||
vectors.events.on({
|
||||
"featureselected": function(feature) {
|
||||
highlightChangeset(feature.feature.fid);
|
||||
function highlightChangeset(id) {
|
||||
rects[id].setStyle({fillOpacity: 0.5});
|
||||
$("#tr-changeset-" + id).addClass("selected");
|
||||
}
|
||||
|
||||
function unHighlightChangeset(id) {
|
||||
rects[id].setStyle({fillOpacity: 0});
|
||||
$("#tr-changeset-" + id).removeClass("selected");
|
||||
}
|
||||
|
||||
group.on({
|
||||
mouseover: function (e) {
|
||||
highlightChangeset(e.layer.id);
|
||||
},
|
||||
"featureunselected": function(feature) {
|
||||
unHighlightChangeset(feature.feature.fid);
|
||||
mouseout: function (e) {
|
||||
unHighlightChangeset(e.layer.id);
|
||||
}
|
||||
});
|
||||
|
||||
var selectControl = new OpenLayers.Control.SelectFeature(vectors, {
|
||||
multiple: false,
|
||||
hover: true
|
||||
$("[data-changeset]").on({
|
||||
mouseover: function () {
|
||||
highlightChangeset($(this).data("changeset").id);
|
||||
},
|
||||
mouseout: function () {
|
||||
unHighlightChangeset($(this).data("changeset").id);
|
||||
}
|
||||
});
|
||||
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)));
|
||||
map.fitBounds([[params.minlat, params.minlon],
|
||||
[params.maxlat, params.maxlon]]);
|
||||
} else {
|
||||
map.zoomToExtent(proj(bounds));
|
||||
map.fitBounds(group.getBounds());
|
||||
}
|
||||
|
||||
$("[data-changeset]").mouseover(function() {
|
||||
highlightChangeset($(this).data("changeset").id);
|
||||
});
|
||||
|
||||
$("[data-changeset]").mouseout(function() {
|
||||
unHighlightChangeset($(this).data("changeset").id);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,18 +2,15 @@ $(document).ready(function () {
|
|||
var marker;
|
||||
|
||||
function setLocation(e) {
|
||||
closeMapPopup();
|
||||
|
||||
var lonlat = getEventPosition(e);
|
||||
|
||||
$("#latitude").val(lonlat.lat);
|
||||
$("#longitude").val(lonlat.lon);
|
||||
$("#latitude").val(e.latlng.lat);
|
||||
$("#longitude").val(e.latlng.lng);
|
||||
|
||||
if (marker) {
|
||||
removeMarkerFromMap(marker);
|
||||
map.removeLayer(marker);
|
||||
}
|
||||
|
||||
marker = addMarkerToMap(lonlat, null, I18n.t('diary_entry.edit.marker_text'));
|
||||
marker = L.marker(e.latlng, {icon: getUserIcon()}).addTo(map)
|
||||
.bindPopup(I18n.t('diary_entry.edit.marker_text'));
|
||||
}
|
||||
|
||||
$("#usemap").click(function (e) {
|
||||
|
|
@ -23,15 +20,16 @@ $(document).ready(function () {
|
|||
$("#usemap").hide();
|
||||
|
||||
var params = $("#map").data();
|
||||
var centre = new OpenLayers.LonLat(params.lon, params.lat);
|
||||
var centre = [params.lat, params.lon];
|
||||
var map = createMap("map");
|
||||
|
||||
setMapCenter(centre, params.zoom);
|
||||
map.setView(centre, params.zoom);
|
||||
|
||||
if ($("#latitude").val() && $("#longitude").val()) {
|
||||
marker = addMarkerToMap(centre, null, I18n.t('diary_entry.edit.marker_text'));
|
||||
marker = L.marker(centre, {icon: getUserIcon()}).addTo(map)
|
||||
.bindPopup(I18n.t('diary_entry.edit.marker_text'));
|
||||
}
|
||||
|
||||
map.events.register("click", map, setLocation);
|
||||
map.on("click", setLocation);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
38
app/assets/javascripts/embed.js
Normal file
38
app/assets/javascripts/embed.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
//= require leaflet
|
||||
//= require leaflet.osm
|
||||
|
||||
window.onload = function () {
|
||||
var query = (window.location.search || '?').substr(1),
|
||||
args = {};
|
||||
|
||||
query.replace(/([^&=]+)=?([^&]*)(?:&+|$)/g, function(match, key, value) {
|
||||
value = value.split(",");
|
||||
if (value.length == 1)
|
||||
value = value[0];
|
||||
args[key] = value;
|
||||
});
|
||||
|
||||
var map = L.map("map");
|
||||
map.attributionControl.setPrefix('');
|
||||
|
||||
if (!args.layer || args.layer == "mapnik" || args.layer == "osmarender") {
|
||||
new L.OSM.Mapnik().addTo(map);
|
||||
} else if (args.layer == "cyclemap" || args.layer == "cycle map") {
|
||||
new L.OSM.CycleMap().addTo(map);
|
||||
} else if (args.layer == "transportmap") {
|
||||
new L.OSM.TransportMap().addTo(map);
|
||||
} else if (args.layer == "mapquest") {
|
||||
new L.OSM.MapQuestOpen().addTo(map);
|
||||
}
|
||||
|
||||
if (args.marker) {
|
||||
L.marker(args.marker).addTo(map);
|
||||
}
|
||||
|
||||
if (args.bbox) {
|
||||
map.fitBounds([L.latLng(args.bbox[1], args.bbox[0]),
|
||||
L.latLng(args.bbox[3], args.bbox[2])])
|
||||
} else {
|
||||
map.fitWorld();
|
||||
}
|
||||
};
|
||||
|
|
@ -3,24 +3,29 @@
|
|||
//= require index/key
|
||||
|
||||
$(document).ready(function () {
|
||||
var permalinks = $("#permalink").html();
|
||||
var marker;
|
||||
var params = OSM.mapParams();
|
||||
var map = createMap("map");
|
||||
|
||||
map.events.register("moveend", map, updateLocation);
|
||||
map.events.register("changelayer", map, updateLocation);
|
||||
L.control.scale().addTo(map);
|
||||
|
||||
map.attributionControl.setPrefix(permalinks);
|
||||
|
||||
map.on("moveend baselayerchange", updateLocation);
|
||||
|
||||
if (!params.object_zoom) {
|
||||
if (params.bbox) {
|
||||
var bbox = new OpenLayers.Bounds(params.minlon, params.minlat, params.maxlon, params.maxlat);
|
||||
var bbox = L.latLngBounds([params.minlat, params.minlon],
|
||||
[params.maxlat, params.maxlon]);
|
||||
|
||||
map.zoomToExtent(proj(bbox));
|
||||
map.fitBounds(bbox);
|
||||
|
||||
if (params.box) {
|
||||
addBoxToMap(bbox);
|
||||
}
|
||||
} else {
|
||||
setMapCenter(new OpenLayers.LonLat(params.lon, params.lat), params.zoom);
|
||||
map.setView([params.lat, params.lon], params.zoom);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29,7 +34,7 @@ $(document).ready(function () {
|
|||
}
|
||||
|
||||
if (params.marker) {
|
||||
marker = addMarkerToMap(new OpenLayers.LonLat(params.mlon, params.mlat));
|
||||
marker = L.marker([params.mlat, params.mlon], {icon: getUserIcon()}).addTo(map);
|
||||
}
|
||||
|
||||
if (params.object) {
|
||||
|
|
@ -38,46 +43,56 @@ $(document).ready(function () {
|
|||
|
||||
handleResize();
|
||||
|
||||
$("body").on("click", "a.set_position", function () {
|
||||
$("body").on("click", "a.set_position", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var data = $(this).data();
|
||||
var centre = new OpenLayers.LonLat(data.lon, data.lat);
|
||||
var centre = L.latLng(data.lat, data.lon);
|
||||
|
||||
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));
|
||||
map.fitBounds([[data.minLat, data.minLon],
|
||||
[data.maxLat, data.maxLon]]);
|
||||
} else {
|
||||
setMapCenter(centre, data.zoom);
|
||||
map.setView(centre, data.zoom);
|
||||
}
|
||||
|
||||
if (marker) {
|
||||
removeMarkerFromMap(marker);
|
||||
map.removeLayer(marker);
|
||||
}
|
||||
|
||||
marker = addMarkerToMap(centre, getArrowIcon());
|
||||
|
||||
return false;
|
||||
marker = L.marker(centre, {icon: getUserIcon()}).addTo(map);
|
||||
});
|
||||
|
||||
function updateLocation() {
|
||||
var lonlat = unproj(map.getCenter());
|
||||
var center = map.getCenter();
|
||||
var zoom = map.getZoom();
|
||||
var layers = getMapLayers();
|
||||
var extents = unproj(map.getExtent());
|
||||
var extents = map.getBounds();
|
||||
|
||||
updatelinks(center.lng,
|
||||
center.lat,
|
||||
zoom,
|
||||
layers,
|
||||
extents.getWestLng(),
|
||||
extents.getSouthLat(),
|
||||
extents.getEastLng(),
|
||||
extents.getNorthLat(),
|
||||
params.object);
|
||||
|
||||
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});
|
||||
$.cookie("_osm_location", [center.lng, center.lat, zoom, layers].join("|"), {expires: expiry});
|
||||
}
|
||||
|
||||
function remoteEditHandler(event) {
|
||||
var extent = unproj(map.getExtent());
|
||||
function remoteEditHandler() {
|
||||
var extent = map.getBounds();
|
||||
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);
|
||||
$("#linkloader").attr("src", "http://127.0.0.1:8111/load_and_zoom?left=" + extent.getWestLng()
|
||||
+ "&bottom=" + extent.getSouthLat()
|
||||
+ "&right=" + extent.getEastLng()
|
||||
+ "&top=" + extent.getNorthLat());
|
||||
|
||||
setTimeout(function () {
|
||||
if (!loaded) alert(I18n.t('site.index.remote_failed'));
|
||||
|
|
@ -92,25 +107,18 @@ $(document).ready(function () {
|
|||
remoteEditHandler();
|
||||
}
|
||||
|
||||
$(window).resize(function() {
|
||||
var centre = map.getCenter();
|
||||
var zoom = map.getZoom();
|
||||
|
||||
handleResize();
|
||||
|
||||
map.setCenter(centre, zoom);
|
||||
});
|
||||
$(window).resize(handleResize);
|
||||
|
||||
$("#search_form").submit(function () {
|
||||
var extent = unproj(map.getExtent());
|
||||
var bounds = map.getBounds();
|
||||
|
||||
$("#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
|
||||
minlon: bounds.getWestLng(),
|
||||
minlat: bounds.getSouthLat(),
|
||||
maxlon: bounds.getEastLng(),
|
||||
maxlat: bounds.getNorthLat()
|
||||
}, openSidebar);
|
||||
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -11,153 +11,99 @@ $(document).ready(function () {
|
|||
});
|
||||
|
||||
function startBrowse(sidebarHtml) {
|
||||
var browseBoxControl;
|
||||
var browseMode = "auto";
|
||||
var browseBounds;
|
||||
var browseFeatureList;
|
||||
var browseActiveFeature;
|
||||
var browseDataLayer;
|
||||
var browseSelectControl;
|
||||
var layersById;
|
||||
var selectedLayer;
|
||||
var browseObjectList;
|
||||
var areasHidden = false;
|
||||
|
||||
OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
|
||||
OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
|
||||
var dataLayer = new L.OSM.DataLayer(null, {
|
||||
styles: {
|
||||
way: {
|
||||
weight: 3,
|
||||
color: "#000000",
|
||||
opacity: 0.4
|
||||
},
|
||||
area: {
|
||||
weight: 3,
|
||||
color: "#ff0000"
|
||||
},
|
||||
node: {
|
||||
color: "#00ff00"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
map.dataLayer.active = true;
|
||||
dataLayer.addTo(map);
|
||||
|
||||
dataLayer.isWayArea = function () {
|
||||
return !areasHidden && L.OSM.DataLayer.prototype.isWayArea.apply(this, arguments);
|
||||
};
|
||||
|
||||
var locationFilter = new L.LocationFilter({
|
||||
enableButton: false,
|
||||
adjustButton: false
|
||||
}).addTo(map);
|
||||
|
||||
locationFilter.on("change", getData);
|
||||
|
||||
$("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title'));
|
||||
$("#sidebar_content").html(sidebarHtml);
|
||||
|
||||
openSidebar();
|
||||
|
||||
var vectors = new OpenLayers.Layer.Vector();
|
||||
map.on("moveend", updateData);
|
||||
updateData();
|
||||
|
||||
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_filter_toggle").toggle(enableFilter, disableFilter);
|
||||
|
||||
$("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
|
||||
$("#browse_hide_areas_box").show();
|
||||
$("#browse_hide_areas_box").click(hideAreas);
|
||||
$("#browse_hide_areas_box").toggle(hideAreas, showAreas);
|
||||
|
||||
function updateData() {
|
||||
if (browseMode == "auto") {
|
||||
if (!locationFilter.isEnabled()) {
|
||||
if (map.getZoom() >= 15) {
|
||||
useMap(false);
|
||||
var bounds = map.getBounds();
|
||||
if (!browseBounds || !browseBounds.contains(bounds)) {
|
||||
browseBounds = bounds;
|
||||
getData();
|
||||
}
|
||||
} else {
|
||||
setStatus(I18n.t('browse.start_rjs.zoom_or_select'));
|
||||
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);
|
||||
}
|
||||
map.removeLayer(dataLayer);
|
||||
map.removeLayer(locationFilter);
|
||||
map.off("moveend", updateData);
|
||||
locationFilter.off("change", getData);
|
||||
});
|
||||
|
||||
function startDrag() {
|
||||
$("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box'));
|
||||
|
||||
browseBoxControl.activate();
|
||||
|
||||
return false;
|
||||
function enableFilter() {
|
||||
$("#browse_filter_toggle").html(I18n.t('browse.start_rjs.view_data'));
|
||||
locationFilter.setBounds(map.getBounds().pad(-0.2));
|
||||
locationFilter.enable();
|
||||
getData();
|
||||
}
|
||||
|
||||
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 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'));
|
||||
$("#browse_hide_areas_box").show();
|
||||
$("#browse_hide_areas_box").click(showAreas);
|
||||
|
||||
areasHidden = true;
|
||||
|
||||
useMap(true);
|
||||
getData();
|
||||
}
|
||||
|
||||
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();
|
||||
getData();
|
||||
}
|
||||
|
||||
function displayFeatureWarning(count, limit, callback) {
|
||||
|
|
@ -179,148 +125,84 @@ $(document).ready(function () {
|
|||
$("#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();
|
||||
function getData() {
|
||||
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 }));
|
||||
} else {
|
||||
loadData("/api/" + OSM.API_VERSION + "/map?bbox=" + projected.toBBOX(), reload);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function loadData(url, reload) {
|
||||
setStatus(I18n.t('browse.start_rjs.loading'));
|
||||
|
||||
$("#browse_content").empty();
|
||||
var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBOX();
|
||||
|
||||
var formatOptions = {
|
||||
checkTags: true,
|
||||
interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid']
|
||||
};
|
||||
/*
|
||||
* 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;
|
||||
|
||||
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
|
||||
});
|
||||
/*@cc_on
|
||||
if (navigator.appVersion < 8) {
|
||||
maxFeatures = 100;
|
||||
} else if (navigator.appVersion < 9) {
|
||||
maxFeatures = 500;
|
||||
}
|
||||
@*/
|
||||
|
||||
browseObjectList = $(JST["templates/browse/feature_list"]({
|
||||
features: features,
|
||||
url: this.protocol.url
|
||||
}))[0];
|
||||
$.ajax({
|
||||
url: url,
|
||||
success: function (xml) {
|
||||
clearStatus();
|
||||
|
||||
loadObjectList();
|
||||
}
|
||||
$("#browse_content").empty();
|
||||
dataLayer.clearLayers();
|
||||
selectedLayer = null;
|
||||
|
||||
var features = dataLayer.buildFeatures(xml);
|
||||
|
||||
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];
|
||||
|
||||
loadObjectList();
|
||||
}
|
||||
|
||||
if (features.length < maxFeatures) {
|
||||
addFeatures();
|
||||
} else {
|
||||
displayFeatureWarning(features.length, maxFeatures, addFeatures);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function viewFeatureLink() {
|
||||
var feature = browseDataLayer.getFeatureById($(this).data("feature-id"));
|
||||
var layer = feature.layer;
|
||||
var layer = layersById[$(this).data("feature-id")];
|
||||
|
||||
for (var i = 0; i < layer.selectedFeatures.length; i++) {
|
||||
var f = layer.selectedFeatures[i];
|
||||
layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
|
||||
}
|
||||
onSelect(layer);
|
||||
|
||||
onFeatureSelect(feature);
|
||||
|
||||
if (browseMode != "auto") {
|
||||
map.setCenter(feature.geometry.getBounds().getCenterLonLat());
|
||||
if (locationFilter.isEnabled()) {
|
||||
map.panTo(layer.getBounds().getCenter());
|
||||
}
|
||||
|
||||
return false;
|
||||
|
|
@ -333,19 +215,15 @@ $(document).ready(function () {
|
|||
return false;
|
||||
}
|
||||
|
||||
function onFeatureSelect(feature) {
|
||||
function onSelect(layer) {
|
||||
// Unselect previously selected feature
|
||||
if (browseActiveFeature) {
|
||||
browseActiveFeature.layer.drawFeature(
|
||||
browseActiveFeature,
|
||||
browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default")
|
||||
);
|
||||
if (selectedLayer) {
|
||||
selectedLayer.setStyle(selectedLayer.originalStyle);
|
||||
}
|
||||
|
||||
// Redraw in selected style
|
||||
feature.layer.drawFeature(
|
||||
feature, feature.layer.styleMap.createSymbolizer(feature, "select")
|
||||
);
|
||||
layer.originalStyle = layer.options;
|
||||
layer.setStyle({color: '#0000ff', weight: 8});
|
||||
|
||||
// If the current object is the list, don't innerHTML="", since that could clear it.
|
||||
if ($("#browse_content").firstChild == browseObjectList) {
|
||||
|
|
@ -354,35 +232,41 @@ $(document).ready(function () {
|
|||
$("#browse_content").empty();
|
||||
}
|
||||
|
||||
var feature = layer.feature;
|
||||
|
||||
$("#browse_content").html(JST["templates/browse/feature"]({
|
||||
name: featureNameSelect(feature),
|
||||
url: "/browse/" + featureType(feature) + "/" + feature.osm_id,
|
||||
attributes: feature.attributes
|
||||
url: "/browse/" + feature.type + "/" + feature.id,
|
||||
attributes: feature.tags
|
||||
}));
|
||||
|
||||
$("#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;
|
||||
selectedLayer = layer;
|
||||
}
|
||||
|
||||
dataLayer.on("click", function (e) {
|
||||
onSelect(e.layer);
|
||||
});
|
||||
|
||||
function loadHistory() {
|
||||
$(this).attr("href", "").text(I18n.t('browse.start_rjs.wait'));
|
||||
|
||||
var feature = browseActiveFeature;
|
||||
var feature = selectedLayer.feature;
|
||||
|
||||
$.ajax({
|
||||
url: "/api/" + OSM.API_VERSION + "/" + featureType(feature) + "/" + feature.osm_id + "/history",
|
||||
url: "/api/" + OSM.API_VERSION + "/" + feature.type + "/" + feature.id + "/history",
|
||||
success: function (xml) {
|
||||
if (browseActiveFeature != feature || $("#browse_content").firstChild == browseObjectList) {
|
||||
if (selectedLayer.feature != feature || $("#browse_content").firstChild == browseObjectList) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(this).remove();
|
||||
|
||||
var history = [];
|
||||
var nodes = xml.getElementsByTagName(featureType(feature));
|
||||
var nodes = xml.getElementsByTagName(feature.type);
|
||||
for (var i = nodes.length - 1; i >= 0; i--) {
|
||||
history.push({
|
||||
user: nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'),
|
||||
|
|
@ -392,7 +276,7 @@ $(document).ready(function () {
|
|||
|
||||
$("#browse_content").append(JST["templates/browse/feature_history"]({
|
||||
name: featureNameHistory(feature),
|
||||
url: "/browse/" + featureType(feature) + "/" + feature.osm_id,
|
||||
url: "/browse/" + feature.type + "/" + feature.id,
|
||||
history: history
|
||||
}));
|
||||
}.bind(this)
|
||||
|
|
@ -401,57 +285,26 @@ $(document).ready(function () {
|
|||
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');
|
||||
}
|
||||
return I18n.t('browse.start_rjs.object_list.type.' + feature.type);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
return feature.tags['name:' + $('html').attr('lang')] ||
|
||||
feature.tags.name ||
|
||||
feature.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 });
|
||||
}
|
||||
return feature.tags['name:' + $('html').attr('lang')] ||
|
||||
feature.tags.name ||
|
||||
I18n.t("browse.start_rjs.object_list.selected.type." + feature.type, { id: feature.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 });
|
||||
}
|
||||
return feature.tags['name:' + $('html').attr('lang')] ||
|
||||
feature.tags.name ||
|
||||
I18n.t("browse.start_rjs.object_list.history.type." + feature.type, { id: feature.id });
|
||||
}
|
||||
|
||||
function setStatus(status) {
|
||||
|
|
@ -464,4 +317,4 @@ $(document).ready(function () {
|
|||
$("#browse_status").hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,44 +11,24 @@ $(document).ready(function () {
|
|||
}
|
||||
|
||||
function startExport(sidebarHtml) {
|
||||
var vectors,
|
||||
box,
|
||||
transform,
|
||||
markerLayer,
|
||||
markerControl;
|
||||
var marker;
|
||||
|
||||
vectors = new OpenLayers.Layer.Vector("Vector Layer", {
|
||||
displayInLayerSwitcher: false
|
||||
});
|
||||
map.addLayer(vectors);
|
||||
var locationFilter = new L.LocationFilter({
|
||||
enableButton: false,
|
||||
adjustButton: false
|
||||
}).addTo(map);
|
||||
|
||||
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);
|
||||
locationFilter.on("change", filterChanged);
|
||||
|
||||
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);
|
||||
map.on("moveend", mapMoved);
|
||||
map.on("baselayerchange", htmlUrlChanged);
|
||||
|
||||
$("#sidebar_title").html(I18n.t('export.start_rjs.export'));
|
||||
$("#sidebar_content").html(sidebarHtml);
|
||||
|
||||
$("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged);
|
||||
|
||||
$("#drag_box").click(startDrag);
|
||||
$("#drag_box").click(enableFilter);
|
||||
|
||||
$("#add_marker").click(startMarker);
|
||||
|
||||
|
|
@ -58,107 +38,96 @@ $(document).ready(function () {
|
|||
|
||||
openSidebar();
|
||||
|
||||
if (map.baseLayer.name == "Mapnik") {
|
||||
if (getMapBaseLayer().keyid == "mapnik") {
|
||||
$("#format_mapnik").prop("checked", true);
|
||||
}
|
||||
|
||||
setBounds(map.getBounds());
|
||||
formatChanged();
|
||||
setBounds(map.getExtent());
|
||||
|
||||
$("body").removeClass("site-index").addClass("site-export");
|
||||
|
||||
$("#sidebar").one("closed", function () {
|
||||
$("body").removeClass("site-export").addClass("site-index");
|
||||
|
||||
clearBox();
|
||||
map.removeLayer(locationFilter);
|
||||
clearMarker();
|
||||
map.events.unregister("moveend", map, mapMoved);
|
||||
map.events.unregister("changebaselayer", map, htmlUrlChanged);
|
||||
map.removeLayer(vectors);
|
||||
|
||||
map.off("moveend", mapMoved);
|
||||
map.off("baselayerchange", htmlUrlChanged);
|
||||
locationFilter.off("change", filterChanged);
|
||||
});
|
||||
|
||||
function getMercatorBounds() {
|
||||
var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(),
|
||||
$("#maxlon").val(), $("#maxlat").val());
|
||||
function getBounds() {
|
||||
return L.latLngBounds(L.latLng($("#minlat").val(), $("#minlon").val()),
|
||||
L.latLng($("#maxlat").val(), $("#maxlon").val()));
|
||||
}
|
||||
|
||||
return proj(bounds);
|
||||
function getScale() {
|
||||
var bounds = map.getBounds(),
|
||||
centerLat = bounds.getCenter().lat,
|
||||
halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
|
||||
meters = halfWorldMeters * (bounds.getNorthEast().lng - bounds.getSouthWest().lng) / 180,
|
||||
pixelsPerMeter = map.getSize().x / meters,
|
||||
metersPerPixel = 1 / (92 * 39.3701);
|
||||
return Math.round(1 / (pixelsPerMeter * metersPerPixel));
|
||||
}
|
||||
|
||||
function getMercatorBounds() {
|
||||
var bounds = getBounds();
|
||||
return L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
|
||||
L.CRS.EPSG3857.project(bounds.getNorthEast()));
|
||||
}
|
||||
|
||||
function boundsChanged() {
|
||||
var bounds = getMercatorBounds();
|
||||
var bounds = getBounds();
|
||||
|
||||
map.events.unregister("moveend", map, mapMoved);
|
||||
map.zoomToExtent(bounds);
|
||||
|
||||
clearBox();
|
||||
drawBox(bounds);
|
||||
map.fitBounds(bounds);
|
||||
locationFilter.setBounds(bounds);
|
||||
|
||||
enableFilter();
|
||||
validateControls();
|
||||
mapnikSizeChanged();
|
||||
}
|
||||
|
||||
function startDrag() {
|
||||
$("#drag_box").html(I18n.t('export.start_rjs.drag_a_box'));
|
||||
function enableFilter() {
|
||||
if (!locationFilter.getBounds().isValid()) {
|
||||
locationFilter.setBounds(map.getBounds().pad(-0.2));
|
||||
}
|
||||
|
||||
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'));
|
||||
$("#drag_box").hide();
|
||||
locationFilter.enable();
|
||||
}
|
||||
|
||||
function transformComplete(event) {
|
||||
setBounds(event.feature.geometry.bounds);
|
||||
function filterChanged() {
|
||||
setBounds(locationFilter.getBounds());
|
||||
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();
|
||||
map.on("click", endMarker);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function endMarker(event) {
|
||||
markerControl.deactivate();
|
||||
map.off("click", endMarker);
|
||||
|
||||
$("#add_marker").html(I18n.t('export.start_rjs.change_marker'));
|
||||
$("#marker_inputs").show();
|
||||
|
||||
var geom = unproj(event.feature.geometry);
|
||||
var latlng = event.latlng;
|
||||
|
||||
$("#marker_lon").val(geom.x.toFixed(5));
|
||||
$("#marker_lat").val(geom.y.toFixed(5));
|
||||
if (marker) {
|
||||
map.removeLayer(marker);
|
||||
}
|
||||
|
||||
marker = L.marker(latlng).addTo(map);
|
||||
|
||||
$("#marker_lon").val(latlng.lng.toFixed(5));
|
||||
$("#marker_lat").val(latlng.lat.toFixed(5));
|
||||
|
||||
htmlUrlChanged();
|
||||
}
|
||||
|
|
@ -168,49 +137,35 @@ $(document).ready(function () {
|
|||
$("#marker_inputs").hide();
|
||||
$("#add_marker").html(I18n.t('export.start_rjs.add_marker'));
|
||||
|
||||
if (markerLayer) {
|
||||
markerControl.destroy();
|
||||
markerLayer.destroy();
|
||||
markerLayer = null;
|
||||
markerControl = null;
|
||||
if (marker) {
|
||||
map.removeLayer(marker);
|
||||
}
|
||||
}
|
||||
|
||||
function mapMoved() {
|
||||
setBounds(map.getExtent());
|
||||
validateControls();
|
||||
if (!locationFilter.isEnabled()) {
|
||||
setBounds(map.getBounds());
|
||||
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));
|
||||
$("#minlon").val(toPrecision(bounds.getWestLng()));
|
||||
$("#minlat").val(toPrecision(bounds.getSouthLat()));
|
||||
$("#maxlon").val(toPrecision(bounds.getEastLng()));
|
||||
$("#maxlat").val(toPrecision(bounds.getNorthLat()));
|
||||
|
||||
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());
|
||||
var bounds = getBounds();
|
||||
|
||||
if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) {
|
||||
var tooLarge = bounds.getSize() > OSM.MAX_REQUEST_AREA;
|
||||
if (tooLarge) {
|
||||
$("#export_osm_too_large").show();
|
||||
} else {
|
||||
$("#export_osm_too_large").hide();
|
||||
|
|
@ -220,7 +175,7 @@ $(document).ready(function () {
|
|||
var disabled = true;
|
||||
|
||||
if ($("#format_osm").prop("checked")) {
|
||||
disabled = bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA;
|
||||
disabled = tooLarge;
|
||||
} else if ($("#format_mapnik").prop("checked")) {
|
||||
disabled = $("#mapnik_scale").val() < max_scale;
|
||||
}
|
||||
|
|
@ -230,8 +185,9 @@ $(document).ready(function () {
|
|||
}
|
||||
|
||||
function htmlUrlChanged() {
|
||||
var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
|
||||
var layerName = map.baseLayer.keyid;
|
||||
var bounds = getBounds();
|
||||
var layerName = getMapBaseLayer().keyid;
|
||||
|
||||
var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBOX() + "&layer=" + layerName;
|
||||
var markerUrl = "";
|
||||
|
||||
|
|
@ -243,9 +199,9 @@ $(document).ready(function () {
|
|||
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 center = bounds.getCenter();
|
||||
|
||||
var zoom = map.getZoomForExtent(proj(bounds));
|
||||
var zoom = map.getBoundsZoom(bounds);
|
||||
|
||||
var layers = getMapLayers();
|
||||
|
||||
|
|
@ -257,7 +213,7 @@ $(document).ready(function () {
|
|||
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>';
|
||||
html += '<br /><small><a href="http://' + OSM.SERVER_URL + '/?lat='+center.lat+'&lon='+center.lng+'&zoom='+zoom+'&layers='+layers+markerUrl+'">'+escaped.join("")+'</a></small>';
|
||||
|
||||
$("#export_html_text").val(html);
|
||||
|
||||
|
|
@ -276,7 +232,7 @@ $(document).ready(function () {
|
|||
}
|
||||
|
||||
if ($("#format_mapnik").prop("checked")) {
|
||||
$("#mapnik_scale").val(roundScale(map.getScale()));
|
||||
$("#mapnik_scale").val(getScale());
|
||||
$("#export_mapnik").show();
|
||||
|
||||
mapnikSizeChanged();
|
||||
|
|
@ -306,8 +262,8 @@ $(document).ready(function () {
|
|||
function mapnikImageSize(scale) {
|
||||
var bounds = getMercatorBounds();
|
||||
|
||||
return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028),
|
||||
Math.round(bounds.getHeight() / scale / 0.00028));
|
||||
return {w: Math.round(bounds.getWidth() / scale / 0.00028),
|
||||
h: Math.round(bounds.getHeight() / scale / 0.00028)};
|
||||
}
|
||||
|
||||
function roundScale(scale) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
$(document).ready(function () {
|
||||
$("#open_map_key").click(function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var url = $(this).attr('href'),
|
||||
title = $(this).text();
|
||||
|
||||
function updateMapKey() {
|
||||
var mapLayer = map.baseLayer.keyid,
|
||||
var mapLayer = getMapBaseLayer().keyid,
|
||||
mapZoom = map.getZoom();
|
||||
|
||||
$(".mapkey-table-entry").each(function () {
|
||||
|
|
@ -24,13 +26,9 @@ $(document).ready(function () {
|
|||
openSidebar({ title: title });
|
||||
|
||||
$("#sidebar").one("closed", function () {
|
||||
map.events.unregister("zoomend", map, updateMapKey);
|
||||
map.events.unregister("changelayer", map, updateMapKey);
|
||||
map.off("zoomend baselayerchange", updateMapKey);
|
||||
});
|
||||
|
||||
map.events.register("zoomend", map, updateMapKey);
|
||||
map.events.register("changelayer", map, updateMapKey);
|
||||
|
||||
e.preventDefault();
|
||||
map.on("zoomend baselayerchange", updateMapKey);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,265 +1,194 @@
|
|||
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
|
||||
// Leaflet extensions
|
||||
L.LatLngBounds.include({
|
||||
getSouthLat: function () {
|
||||
return this._southWest.lat;
|
||||
},
|
||||
|
||||
getWestLng: function () {
|
||||
return this._southWest.lng;
|
||||
},
|
||||
|
||||
getNorthLat: function () {
|
||||
return this._northEast.lat;
|
||||
},
|
||||
|
||||
getEastLng: function () {
|
||||
return this._northEast.lng;
|
||||
},
|
||||
|
||||
toBBOX: function () {
|
||||
var decimal = 6;
|
||||
var mult = Math.pow(10, decimal);
|
||||
var xmin = Math.round(this.getWestLng() * mult) / mult;
|
||||
var ymin = Math.round(this.getSouthLat() * mult) / mult;
|
||||
var xmax = Math.round(this.getEastLng() * mult) / mult;
|
||||
var ymax = Math.round(this.getNorthLat() * mult) / mult;
|
||||
return xmin + "," + ymin + "," + xmax + "," + ymax;
|
||||
},
|
||||
|
||||
getSize: function () {
|
||||
return (this._northEast.lat - this._southWest.lat) *
|
||||
(this._northEast.lng - this._southWest.lng);
|
||||
}
|
||||
});
|
||||
|
||||
L.Bounds.include({
|
||||
getWidth: function () {
|
||||
return this.max.x - this.min.x;
|
||||
},
|
||||
|
||||
getHeight: function () {
|
||||
return this.max.y - this.min.y;
|
||||
}
|
||||
});
|
||||
|
||||
L.Icon.Default.imagePath = <%= "#{asset_prefix}/images".to_json %>;
|
||||
|
||||
var map;
|
||||
var markers;
|
||||
var vectors;
|
||||
var popup;
|
||||
|
||||
var layers = [
|
||||
{
|
||||
klass: L.OSM.Mapnik,
|
||||
attribution: "",
|
||||
keyid: "mapnik",
|
||||
layerCode: "M",
|
||||
name: I18n.t("javascripts.map.base.standard")
|
||||
},
|
||||
{
|
||||
klass: L.OSM.CycleMap,
|
||||
attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
|
||||
keyid: "cyclemap",
|
||||
layerCode: "C",
|
||||
name: I18n.t("javascripts.map.base.cycle_map")
|
||||
},
|
||||
{
|
||||
klass: L.OSM.TransportMap,
|
||||
attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
|
||||
keyid: "transportmap",
|
||||
layerCode: "T",
|
||||
name: I18n.t("javascripts.map.base.transport_map")
|
||||
},
|
||||
{
|
||||
klass: L.OSM.MapQuestOpen,
|
||||
attribution: "Tiles courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>",
|
||||
keyid: "mapquest",
|
||||
layerCode: "Q",
|
||||
name: I18n.t("javascripts.map.base.mapquest")
|
||||
}
|
||||
];
|
||||
|
||||
function createMap(divName, options) {
|
||||
options = options || {};
|
||||
options = $.extend({zoomControl: true, panZoomControl: true, layerControl: true}, options);
|
||||
|
||||
map = new OpenLayers.Map(divName, {
|
||||
controls: options.controls || [
|
||||
new OpenLayers.Control.ArgParser(),
|
||||
new OpenLayers.Control.Attribution(),
|
||||
new SimpleLayerSwitcher(),
|
||||
new OpenLayers.Control.Navigation(),
|
||||
new OpenLayers.Control.Zoom(),
|
||||
new OpenLayers.Control.SimplePanZoom(),
|
||||
new OpenLayers.Control.ScaleLine({geodesic: true})
|
||||
],
|
||||
numZoomLevels: 20,
|
||||
displayProjection: new OpenLayers.Projection("EPSG:4326"),
|
||||
theme: "<%= asset_path 'theme/openstreetmap/style.css' %>"
|
||||
});
|
||||
map = L.map(divName, $.extend({}, options, {panControl: false, zoomsliderControl: false, maxZoom: 18}));
|
||||
|
||||
var mapnik = new OpenLayers.Layer.OSM.Mapnik(I18n.t("javascripts.map.base.standard"), {
|
||||
attribution: "",
|
||||
keyid: "mapnik",
|
||||
displayOutsideMaxExtent: true,
|
||||
wrapDateLine: true,
|
||||
layerCode: "M"
|
||||
});
|
||||
map.addLayer(mapnik);
|
||||
if (map.attributionControl) {
|
||||
map.attributionControl.setPrefix('');
|
||||
}
|
||||
|
||||
var cyclemap = new OpenLayers.Layer.OSM.CycleMap(I18n.t("javascripts.map.base.cycle_map"), {
|
||||
attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
|
||||
keyid: "cyclemap",
|
||||
displayOutsideMaxExtent: true,
|
||||
wrapDateLine: true,
|
||||
layerCode: "C"
|
||||
});
|
||||
map.addLayer(cyclemap);
|
||||
if (options.panZoomControl) {
|
||||
new L.Control.Pan().addTo(map);
|
||||
new L.Control.Zoomslider({stepHeight: 7}).addTo(map);
|
||||
}
|
||||
|
||||
var transportmap = new OpenLayers.Layer.OSM.TransportMap(I18n.t("javascripts.map.base.transport_map"), {
|
||||
attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
|
||||
keyid: "transportmap",
|
||||
displayOutsideMaxExtent: true,
|
||||
wrapDateLine: true,
|
||||
layerCode: "T"
|
||||
});
|
||||
map.addLayer(transportmap);
|
||||
var layersControl = L.control.layers();
|
||||
|
||||
var mapquest = new OpenLayers.Layer.OSM(I18n.t("javascripts.map.base.mapquest"), [
|
||||
"http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
|
||||
"http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
|
||||
"http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
|
||||
"http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"
|
||||
], {
|
||||
attribution: "Tiles courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>",
|
||||
keyid: "mapquest",
|
||||
displayOutsideMaxExtent: true,
|
||||
wrapDateLine: true,
|
||||
numZoomLevels: 19,
|
||||
layerCode: "Q"
|
||||
});
|
||||
map.addLayer(mapquest);
|
||||
if (options.layerControl) {
|
||||
layersControl.addTo(map);
|
||||
}
|
||||
|
||||
markers = new OpenLayers.Layer.Markers("Markers", {
|
||||
displayInLayerSwitcher: false,
|
||||
numZoomLevels: 20,
|
||||
projection: "EPSG:900913"
|
||||
});
|
||||
map.addLayer(markers);
|
||||
for (var i = 0; i < layers.length; i++) {
|
||||
layers[i].layer = new (layers[i].klass)(layers[i]);
|
||||
layersControl.addBaseLayer(layers[i].layer, layers[i].name);
|
||||
}
|
||||
|
||||
map.dataLayer = new OpenLayers.Layer(I18n.t('browse.start_rjs.data_layer_name'), {
|
||||
visibility: false,
|
||||
displayInLayerSwitcher: false
|
||||
});
|
||||
map.addLayer(map.dataLayer);
|
||||
layers[0].layer.addTo(map);
|
||||
|
||||
$("#" + divName).on("resized", function () {
|
||||
map.updateSize();
|
||||
});
|
||||
$("#" + divName).on("resized", function () {
|
||||
map.invalidateSize();
|
||||
});
|
||||
|
||||
return map;
|
||||
return map;
|
||||
}
|
||||
|
||||
function getArrowIcon() {
|
||||
var size = new OpenLayers.Size(25, 22);
|
||||
var offset = new OpenLayers.Pixel(-22, -20);
|
||||
var icon = new OpenLayers.Icon("<%= asset_path 'arrow.png' %>", size, offset);
|
||||
|
||||
return icon;
|
||||
}
|
||||
|
||||
function addMarkerToMap(position, icon, description) {
|
||||
var marker = new OpenLayers.Marker(proj(position), icon);
|
||||
|
||||
markers.addMarker(marker);
|
||||
|
||||
if (description) {
|
||||
marker.events.register("mouseover", marker, function() {
|
||||
openMapPopup(marker, description);
|
||||
});
|
||||
}
|
||||
|
||||
return marker;
|
||||
function getUserIcon(url) {
|
||||
return L.icon({
|
||||
iconUrl: url || <%= asset_path('marker-red.png').to_json %>,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowUrl: <%= asset_path('images/marker-shadow.png').to_json %>,
|
||||
shadowSize: [41, 41]
|
||||
});
|
||||
}
|
||||
|
||||
function addObjectToMap(object, zoom, callback) {
|
||||
var layer = new OpenLayers.Layer.Vector("Objects", {
|
||||
strategies: [
|
||||
new OpenLayers.Strategy.Fixed()
|
||||
],
|
||||
protocol: new OpenLayers.Protocol.HTTP({
|
||||
url: OSM.apiUrl(object),
|
||||
format: new OpenLayers.Format.OSM()
|
||||
}),
|
||||
style: {
|
||||
$.ajax({
|
||||
url: OSM.apiUrl(object),
|
||||
dataType: "xml",
|
||||
success: function (xml) {
|
||||
var layer = new L.OSM.DataLayer(xml, {
|
||||
style: {
|
||||
strokeColor: "blue",
|
||||
strokeWidth: 3,
|
||||
strokeOpacity: 0.5,
|
||||
fillOpacity: 0.2,
|
||||
fillColor: "lightblue",
|
||||
pointRadius: 6
|
||||
},
|
||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
||||
displayInLayerSwitcher: false
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
layer.events.register("loadend", layer, function() {
|
||||
var extent;
|
||||
var bounds = layer.getBounds();
|
||||
|
||||
if (this.features.length) {
|
||||
extent = this.features[0].geometry.getBounds();
|
||||
|
||||
for (var i = 1; i < this.features.length; i++) {
|
||||
extent.extend(this.features[i].geometry.getBounds());
|
||||
}
|
||||
|
||||
if (zoom) {
|
||||
if (extent) {
|
||||
this.map.zoomToExtent(extent);
|
||||
} else {
|
||||
this.map.zoomToMaxExtent();
|
||||
}
|
||||
}
|
||||
if (zoom) {
|
||||
map.fitBounds(bounds);
|
||||
}
|
||||
|
||||
if (callback) {
|
||||
callback(extent);
|
||||
callback(bounds);
|
||||
}
|
||||
});
|
||||
|
||||
map.addLayer(layer);
|
||||
layer.addTo(map);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addBoxToMap(boxbounds, id, outline) {
|
||||
if (!vectors) {
|
||||
// Be aware that IE requires Vector layers be initialised on page load, and not under deferred script conditions
|
||||
vectors = new OpenLayers.Layer.Vector("Boxes", {
|
||||
displayInLayerSwitcher: false
|
||||
});
|
||||
map.addLayer(vectors);
|
||||
}
|
||||
var geometry;
|
||||
if (outline) {
|
||||
vertices = boxbounds.toGeometry().getVertices();
|
||||
vertices.push(new OpenLayers.Geometry.Point(vertices[0].x, vertices[0].y));
|
||||
geometry = proj(new OpenLayers.Geometry.LineString(vertices));
|
||||
} else {
|
||||
geometry = proj(boxbounds.toGeometry());
|
||||
}
|
||||
var box = new OpenLayers.Feature.Vector(geometry, {}, {
|
||||
strokeWidth: 2,
|
||||
strokeColor: '#ee9900',
|
||||
fillOpacity: 0
|
||||
});
|
||||
box.fid = id;
|
||||
function addBoxToMap(bounds) {
|
||||
var box = L.rectangle(bounds, {
|
||||
weight: 2,
|
||||
color: '#e90',
|
||||
fillOpacity: 0
|
||||
});
|
||||
|
||||
vectors.addFeatures(box);
|
||||
box.addTo(map);
|
||||
|
||||
return box;
|
||||
return box;
|
||||
}
|
||||
|
||||
function openMapPopup(marker, description) {
|
||||
closeMapPopup();
|
||||
|
||||
popup = new OpenLayers.Popup.FramedCloud("popup", marker.lonlat, null,
|
||||
description, marker.icon, true);
|
||||
popup.setBackgroundColor("#E3FFC5");
|
||||
map.addPopup(popup);
|
||||
|
||||
return popup;
|
||||
}
|
||||
|
||||
function closeMapPopup() {
|
||||
if (popup) {
|
||||
map.removePopup(popup);
|
||||
}
|
||||
}
|
||||
|
||||
function removeMarkerFromMap(marker){
|
||||
markers.removeMarker(marker);
|
||||
}
|
||||
|
||||
function proj(x) {
|
||||
return x.clone().transform(epsg4326, map.getProjectionObject());
|
||||
}
|
||||
|
||||
function unproj(x) {
|
||||
return x.clone().transform(map.getProjectionObject(), epsg4326);
|
||||
}
|
||||
|
||||
function setMapCenter(center, zoom) {
|
||||
zoom = parseInt(zoom, 10);
|
||||
var numzoom = map.getNumZoomLevels();
|
||||
if (zoom >= numzoom) zoom = numzoom - 1;
|
||||
map.setCenter(proj(center), zoom);
|
||||
}
|
||||
|
||||
function getEventPosition(event) {
|
||||
return unproj(map.getLonLatFromViewPortPx(event.xy));
|
||||
function getMapBaseLayer() {
|
||||
for (var i = 0; i < layers.length; i++) {
|
||||
if (map.hasLayer(layers[i].layer)) {
|
||||
return layers[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getMapLayers() {
|
||||
var layerConfig = "";
|
||||
for (var i = 0; i < layers.length; i++) {
|
||||
if (map.hasLayer(layers[i].layer)) {
|
||||
return layers[i].layerCode;
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < map.layers.length; i++) {
|
||||
if (map.layers[i].layerCode && map.layers[i].getVisibility()) {
|
||||
layerConfig += map.layers[i].layerCode;
|
||||
}
|
||||
}
|
||||
|
||||
return layerConfig;
|
||||
return "";
|
||||
}
|
||||
|
||||
function setMapLayers(layerConfig) {
|
||||
if (layerConfig.charAt(0) == "B" || layerConfig.charAt(0) == "0") {
|
||||
var l = 0;
|
||||
|
||||
for (var layers = map.getLayersBy("isBaseLayer", true), i = 0; i < layers.length; i++) {
|
||||
var c = layerConfig.charAt(l++);
|
||||
|
||||
if (c == "B") {
|
||||
map.setBaseLayer(layers[i]);
|
||||
} else {
|
||||
map.layers[i].setVisibility(false);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (var i = 0; i < map.layers.length; i++) {
|
||||
if (map.layers[i].layerCode) {
|
||||
if (layerConfig.indexOf(map.layers[i].layerCode) >= 0) {
|
||||
if (map.layers[i].isBaseLayer) {
|
||||
map.setBaseLayer(map.layers[i]);
|
||||
} else {
|
||||
map.layers[i].setVisibility(true);
|
||||
}
|
||||
} else if (!map.layers[i].isBaseLayer) {
|
||||
map.layers[i].setVisibility(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < layers.length; i++) {
|
||||
if (layerConfig.indexOf(layers[i].layerCode) >= 0) {
|
||||
map.addLayer(layers[i].layer);
|
||||
} else {
|
||||
map.removeLayer(layers[i].layer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
//= require OpenLayers
|
||||
//= require OpenStreetMap
|
||||
//= require SimpleLayerSwitcher
|
||||
//= require SimplePanZoom
|
||||
|
||||
OpenLayers.Util.imageURLs = {
|
||||
"404.png": "<%= asset_path 'img/404.png' %>",
|
||||
"blank.gif": "<%= asset_path 'img/blank.gif' %>",
|
||||
"cloud-popup-relative.png": "<%= asset_path 'img/cloud-popup-relative.png' %>",
|
||||
"drag-rectangle-off.png": "<%= asset_path 'img/drag-rectangle-off.png' %>",
|
||||
"drag-rectangle-on.png": "<%= asset_path 'img/drag-rectangle-on.png' %>",
|
||||
"east-mini.png": "<%= asset_path 'img/east-mini.png' %>",
|
||||
"layer-switcher-maximize.png": "<%= asset_path 'img/layer-switcher-maximize.png' %>",
|
||||
"layer-switcher-minimize.png": "<%= asset_path 'img/layer-switcher-minimize.png' %>",
|
||||
"marker-blue.png": "<%= asset_path 'img/marker-blue.png' %>",
|
||||
"marker-gold.png": "<%= asset_path 'img/marker-gold.png' %>",
|
||||
"marker-green.png": "<%= asset_path 'img/marker-green.png' %>",
|
||||
"marker.png": "<%= asset_path 'img/marker.png' %>",
|
||||
"measuring-stick-off.png": "<%= asset_path 'img/measuring-stick-off.png' %>",
|
||||
"measuring-stick-on.png": "<%= asset_path 'img/measuring-stick-on.png' %>",
|
||||
"north-mini.png": "<%= asset_path 'img/north-mini.png' %>",
|
||||
"panning-hand-off.png": "<%= asset_path 'img/panning-hand-off.png' %>",
|
||||
"panning-hand-on.png": "<%= asset_path 'img/panning-hand-on.png' %>",
|
||||
"slider.png": "<%= asset_path 'img/slider.png' %>",
|
||||
"south-mini.png": "<%= asset_path 'img/south-mini.png' %>",
|
||||
"west-mini.png": "<%= asset_path 'img/west-mini.png' %>",
|
||||
"zoombar.png": "<%= asset_path 'img/zoombar.png' %>",
|
||||
"zoom-minus-mini.png": "<%= asset_path 'img/zoom-minus-mini.png' %>",
|
||||
"zoom-plus-mini.png": "<%= asset_path 'img/zoom-plus-mini.png' %>",
|
||||
"zoom-world-mini.png": "<%= asset_path 'img/zoom-world-mini.png' %>"
|
||||
};
|
||||
|
||||
OpenLayers.Util.origGetImageLocation = OpenLayers.Util.getImageLocation;
|
||||
|
||||
OpenLayers.Util.getImageLocation = function(image) {
|
||||
return OpenLayers.Util.imageURLs[image] || OpenLayers.Util.origGetImageLocation(image);
|
||||
};
|
||||
|
||||
OpenLayers.Lang.setCode($('html').attr('lang'));
|
||||
|
|
@ -1,41 +1,39 @@
|
|||
$(document).ready(function () {
|
||||
var map = createMap("map");
|
||||
var map = createMap("map", {
|
||||
zoomControl: true,
|
||||
panZoomControl: false
|
||||
});
|
||||
|
||||
if (OSM.home) {
|
||||
setMapCenter(new OpenLayers.LonLat(OSM.home.lon, OSM.home.lat), 12);
|
||||
map.setView([OSM.home.lat, OSM.home.lon], 12);
|
||||
} else {
|
||||
setMapCenter(new OpenLayers.LonLat(0, 0), 0);
|
||||
map.setView([0, 0], 0);
|
||||
}
|
||||
|
||||
if ($("#map").hasClass("set_location")) {
|
||||
var marker;
|
||||
var marker = L.marker([0, 0], {icon: getUserIcon()});
|
||||
|
||||
if (OSM.home) {
|
||||
marker = addMarkerToMap(new OpenLayers.LonLat(OSM.home.lon, OSM.home.lat));
|
||||
marker.setLatLng([OSM.home.lat, OSM.home.lon]);
|
||||
marker.addTo(map);
|
||||
}
|
||||
|
||||
map.events.register("click", map, function (e) {
|
||||
map.on("click", function (e) {
|
||||
if ($('#updatehome').is(':checked')) {
|
||||
var lonlat = getEventPosition(e);
|
||||
|
||||
$('#homerow').removeClass();
|
||||
$('#home_lat').val(lonlat.lat);
|
||||
$('#home_lon').val(lonlat.lon);
|
||||
$('#home_lat').val(e.latlng.lat);
|
||||
$('#home_lon').val(e.latlng.lng);
|
||||
|
||||
if (marker) {
|
||||
removeMarkerFromMap(marker);
|
||||
}
|
||||
|
||||
marker = addMarkerToMap(lonlat);
|
||||
marker.setLatLng(e.latlng);
|
||||
marker.addTo(map);
|
||||
}
|
||||
});
|
||||
} 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);
|
||||
L.marker([user.lat, user.lon], {icon: getUserIcon(user.icon)}).addTo(map)
|
||||
.bindPopup(user.description);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,175 +0,0 @@
|
|||
var SimpleLayerSwitcher = OpenLayers.Class(OpenLayers.Control, {
|
||||
layerStates: null,
|
||||
layersDiv: null,
|
||||
ascending: true,
|
||||
|
||||
initialize: function(options) {
|
||||
OpenLayers.Control.prototype.initialize.apply(this, arguments);
|
||||
this.layerStates = [];
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
OpenLayers.Event.stopObservingElement(this.div);
|
||||
|
||||
//clear out layers info and unregister their events
|
||||
this.map.events.un({
|
||||
"addlayer": this.redraw,
|
||||
"changelayer": this.redraw,
|
||||
"removelayer": this.redraw,
|
||||
"changebaselayer": this.redraw,
|
||||
scope: this
|
||||
});
|
||||
OpenLayers.Control.prototype.destroy.apply(this, arguments);
|
||||
},
|
||||
|
||||
setMap: function(map) {
|
||||
OpenLayers.Control.prototype.setMap.apply(this, arguments);
|
||||
|
||||
this.map.events.on({
|
||||
"addlayer": this.redraw,
|
||||
"changelayer": this.redraw,
|
||||
"removelayer": this.redraw,
|
||||
"changebaselayer": this.redraw,
|
||||
scope: this
|
||||
});
|
||||
},
|
||||
|
||||
draw: function() {
|
||||
OpenLayers.Control.prototype.draw.apply(this);
|
||||
this.loadContents();
|
||||
this.redraw();
|
||||
return this.div;
|
||||
},
|
||||
|
||||
checkRedraw: function() {
|
||||
var redraw = false;
|
||||
if ( !this.layerStates.length ||
|
||||
(this.map.layers.length != this.layerStates.length) ) {
|
||||
redraw = true;
|
||||
} else {
|
||||
for (var i=0, len=this.layerStates.length; i<len; i++) {
|
||||
var layerState = this.layerStates[i];
|
||||
var layer = this.map.layers[i];
|
||||
if ( (layerState.name != layer.name) ||
|
||||
(layerState.inRange != layer.inRange) ||
|
||||
(layerState.id != layer.id) ||
|
||||
(layerState.visibility != layer.visibility) ) {
|
||||
redraw = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return redraw;
|
||||
},
|
||||
|
||||
redraw: function() {
|
||||
if (!this.checkRedraw()) {
|
||||
return this.div;
|
||||
}
|
||||
|
||||
this.div.innerHTML = '';
|
||||
var len = this.map.layers.length;
|
||||
this.layerStates = [];
|
||||
for (var i = 0; i < this.map.layers.length; i++) {
|
||||
var layer = this.map.layers[i];
|
||||
this.layerStates[i] = {
|
||||
'name': layer.name,
|
||||
'visibility': layer.visibility,
|
||||
'inRange': layer.inRange,
|
||||
'id': layer.id
|
||||
};
|
||||
}
|
||||
|
||||
var layers = this.map.layers.slice();
|
||||
if (!this.ascending) { layers.reverse(); }
|
||||
for (var i = 0; i < layers.length; i++) {
|
||||
var layer = layers[i];
|
||||
var baseLayer = layer.isBaseLayer;
|
||||
|
||||
if (layer.displayInLayerSwitcher && baseLayer) {
|
||||
var on = (baseLayer) ? (layer == this.map.baseLayer)
|
||||
: layer.getVisibility();
|
||||
var layerElem = document.createElement('a');
|
||||
layerElem.id = this.id + '_input_' + layer.name;
|
||||
layerElem.innerHTML = layer.name;
|
||||
layerElem.href = '#';
|
||||
|
||||
OpenLayers.Element.addClass(layerElem, 'basey');
|
||||
OpenLayers.Element.addClass(layerElem,
|
||||
'basey-' + (on ? 'on' : 'off'));
|
||||
|
||||
if (!baseLayer && !layer.inRange) {
|
||||
layerElem.disabled = true;
|
||||
}
|
||||
var context = {
|
||||
'layer': layer
|
||||
};
|
||||
OpenLayers.Event.observe(layerElem, 'mouseup',
|
||||
OpenLayers.Function.bindAsEventListener(
|
||||
this.onInputClick,
|
||||
context)
|
||||
);
|
||||
|
||||
this.div.appendChild(layerElem);
|
||||
}
|
||||
}
|
||||
|
||||
return this.div;
|
||||
},
|
||||
|
||||
onInputClick: function(e) {
|
||||
if (this.layer.isBaseLayer) {
|
||||
this.layer.map.setBaseLayer(this.layer);
|
||||
} else {
|
||||
this.layer.setVisibility(!this.layer.getVisibility());
|
||||
}
|
||||
OpenLayers.Event.stop(e);
|
||||
},
|
||||
|
||||
updateMap: function() {
|
||||
|
||||
// set the newly selected base layer
|
||||
for(var i=0, len=this.baseLayers.length; i<len; i++) {
|
||||
var layerEntry = this.baseLayers[i];
|
||||
if (layerEntry.inputElem.checked) {
|
||||
this.map.setBaseLayer(layerEntry.layer, false);
|
||||
}
|
||||
}
|
||||
|
||||
// set the correct visibilities for the overlays
|
||||
for(var i=0, len=this.dataLayers.length; i<len; i++) {
|
||||
var layerEntry = this.dataLayers[i];
|
||||
layerEntry.layer.setVisibility(layerEntry.inputElem.checked);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
loadContents: function() {
|
||||
//configure main div
|
||||
OpenLayers.Event.observe(this.div, 'mouseup',
|
||||
OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
|
||||
OpenLayers.Event.observe(this.div, 'click',
|
||||
this.ignoreEvent);
|
||||
OpenLayers.Event.observe(this.div, 'mousedown',
|
||||
OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
|
||||
OpenLayers.Event.observe(this.div, 'dblclick', this.ignoreEvent);
|
||||
},
|
||||
|
||||
ignoreEvent: function(evt) {
|
||||
OpenLayers.Event.stop(evt);
|
||||
},
|
||||
|
||||
mouseDown: function(evt) {
|
||||
this.isMouseDown = true;
|
||||
this.ignoreEvent(evt);
|
||||
},
|
||||
|
||||
mouseUp: function(evt) {
|
||||
if (this.isMouseDown) {
|
||||
this.isMouseDown = false;
|
||||
this.ignoreEvent(evt);
|
||||
}
|
||||
},
|
||||
|
||||
CLASS_NAME: "SimpleLayerSwitcher"
|
||||
});
|
||||
|
|
@ -1,356 +0,0 @@
|
|||
/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for
|
||||
* full list of contributors). Published under the 2-clause BSD license.
|
||||
* See license.txt in the OpenLayers distribution or repository for the
|
||||
* full text of the license. */
|
||||
|
||||
|
||||
/**
|
||||
* @requires OpenLayers/Control/PanZoom.js
|
||||
*/
|
||||
|
||||
/**
|
||||
* Class: OpenLayers.Control.PanZoomBar
|
||||
* The PanZoomBar is a visible control composed of a
|
||||
* <OpenLayers.Control.PanPanel> and a <OpenLayers.Control.ZoomBar>.
|
||||
* By default it is displayed in the upper left corner of the map as 4
|
||||
* directional arrows above a vertical slider.
|
||||
*
|
||||
* Inherits from:
|
||||
* - <OpenLayers.Control.PanZoom>
|
||||
*/
|
||||
OpenLayers.Control.SimplePanZoom = OpenLayers.Class(OpenLayers.Control.PanZoom, {
|
||||
|
||||
/**
|
||||
* APIProperty: zoomStopWidth
|
||||
*/
|
||||
zoomStopWidth: 18,
|
||||
|
||||
/**
|
||||
* APIProperty: zoomStopHeight
|
||||
*/
|
||||
zoomStopHeight: 7,
|
||||
|
||||
/**
|
||||
* Property: slider
|
||||
*/
|
||||
slider: null,
|
||||
|
||||
/**
|
||||
* Property: sliderEvents
|
||||
* {<OpenLayers.Events>}
|
||||
*/
|
||||
sliderEvents: null,
|
||||
|
||||
/**
|
||||
* Property: zoombarDiv
|
||||
* {DOMElement}
|
||||
*/
|
||||
zoombarDiv: null,
|
||||
|
||||
/**
|
||||
* APIProperty: zoomWorldIcon
|
||||
* {Boolean}
|
||||
*/
|
||||
zoomWorldIcon: false,
|
||||
|
||||
/**
|
||||
* APIProperty: panIcons
|
||||
* {Boolean} Set this property to false not to display the pan icons. If
|
||||
* false the zoom world icon is placed under the zoom bar. Defaults to
|
||||
* true.
|
||||
*/
|
||||
panIcons: true,
|
||||
|
||||
/**
|
||||
* APIProperty: forceFixedZoomLevel
|
||||
* {Boolean} Force a fixed zoom level even though the map has
|
||||
* fractionalZoom
|
||||
*/
|
||||
forceFixedZoomLevel: false,
|
||||
|
||||
/**
|
||||
* Property: mouseDragStart
|
||||
* {<OpenLayers.Pixel>}
|
||||
*/
|
||||
mouseDragStart: null,
|
||||
|
||||
/**
|
||||
* Property: deltaY
|
||||
* {Number} The cumulative vertical pixel offset during a zoom bar drag.
|
||||
*/
|
||||
deltaY: null,
|
||||
|
||||
/**
|
||||
* Property: zoomStart
|
||||
* {<OpenLayers.Pixel>}
|
||||
*/
|
||||
zoomStart: null,
|
||||
|
||||
/**
|
||||
* Constructor: OpenLayers.Control.PanZoomBar
|
||||
*/
|
||||
buttons: null,
|
||||
|
||||
/**
|
||||
* APIMethod: destroy
|
||||
*/
|
||||
destroy: function() {
|
||||
|
||||
this._removeZoomBar();
|
||||
|
||||
this.map.events.un({
|
||||
"changebaselayer": this.redraw,
|
||||
"updatesize": this.redraw,
|
||||
scope: this
|
||||
});
|
||||
|
||||
OpenLayers.Control.PanZoom.prototype.destroy.apply(this, arguments);
|
||||
|
||||
delete this.mouseDragStart;
|
||||
delete this.zoomStart;
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: setMap
|
||||
*
|
||||
* Parameters:
|
||||
* map - {<OpenLayers.Map>}
|
||||
*/
|
||||
setMap: function(map) {
|
||||
OpenLayers.Control.PanZoom.prototype.setMap.apply(this, arguments);
|
||||
this.map.events.on({
|
||||
"changebaselayer": this.redraw,
|
||||
"updatesize": this.redraw,
|
||||
scope: this
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: redraw
|
||||
* clear the div and start over.
|
||||
*/
|
||||
redraw: function() {
|
||||
if (this.div !== null) {
|
||||
this.removeButtons();
|
||||
this._removeZoomBar();
|
||||
}
|
||||
this.draw();
|
||||
this.moveZoomBar();
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: draw
|
||||
*
|
||||
* Parameters:
|
||||
* px - {<OpenLayers.Pixel>}
|
||||
*/
|
||||
draw: function(px) {
|
||||
// initialize our internal div
|
||||
OpenLayers.Control.prototype.draw.apply(this, arguments);
|
||||
px = this.position.clone();
|
||||
|
||||
// place the controls
|
||||
this.buttons = [];
|
||||
var ids = ['panup', 'panleft', 'panright', 'pandown', 'zoomout', 'zoomin'];
|
||||
|
||||
for (var i = 0; i < ids.length; i++) {
|
||||
var b = document.createElement('div');
|
||||
b.id = ids[i];
|
||||
b.action = ids[i];
|
||||
b.className = 'button olButton';
|
||||
this.div.appendChild(b);
|
||||
this.buttons.push(b);
|
||||
}
|
||||
|
||||
this._addZoomBar();
|
||||
return this.div;
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: _addZoomBar
|
||||
*
|
||||
* Parameters:
|
||||
* centered - {<OpenLayers.Pixel>} where zoombar drawing is to start.
|
||||
*/
|
||||
_addZoomBar:function() {
|
||||
var id = this.id + "_" + this.map.id;
|
||||
var zoomsToEnd = this.map.getNumZoomLevels() - 1 - this.map.getZoom();
|
||||
var slider = document.createElement('div');
|
||||
slider.id = 'slider';
|
||||
slider.className = 'button';
|
||||
slider.style.cursor = 'move';
|
||||
this.slider = slider;
|
||||
|
||||
this.sliderEvents = new OpenLayers.Events(this, slider, null, true,
|
||||
{ includeXY: true });
|
||||
this.sliderEvents.on({
|
||||
"touchstart": this.zoomBarDown,
|
||||
"touchmove": this.zoomBarDrag,
|
||||
"touchend": this.zoomBarUp,
|
||||
"mousedown": this.zoomBarDown,
|
||||
"mousemove": this.zoomBarDrag,
|
||||
"mouseup": this.zoomBarUp
|
||||
});
|
||||
|
||||
var height = this.zoomStopHeight * (this.map.getNumZoomLevels());
|
||||
|
||||
// this is the background image
|
||||
var div = document.createElement('div');
|
||||
div.className = 'button olButton';
|
||||
div.id = 'zoombar';
|
||||
this.zoombarDiv = div;
|
||||
|
||||
this.div.appendChild(div);
|
||||
this.startTop = 75;
|
||||
this.div.appendChild(slider);
|
||||
|
||||
this.map.events.register("zoomend", this, this.moveZoomBar);
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: _removeZoomBar
|
||||
*/
|
||||
_removeZoomBar: function() {
|
||||
this.sliderEvents.un({
|
||||
"touchstart": this.zoomBarDown,
|
||||
"touchmove": this.zoomBarDrag,
|
||||
"touchend": this.zoomBarUp,
|
||||
"mousedown": this.zoomBarDown,
|
||||
"mousemove": this.zoomBarDrag,
|
||||
"mouseup": this.zoomBarUp
|
||||
});
|
||||
this.sliderEvents.destroy();
|
||||
|
||||
this.div.removeChild(this.zoombarDiv);
|
||||
this.zoombarDiv = null;
|
||||
this.div.removeChild(this.slider);
|
||||
this.slider = null;
|
||||
|
||||
this.map.events.unregister("zoomend", this, this.moveZoomBar);
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: onButtonClick
|
||||
*
|
||||
* Parameters:
|
||||
* evt - {Event}
|
||||
*/
|
||||
onButtonClick: function(evt) {
|
||||
OpenLayers.Control.PanZoom.prototype.onButtonClick.apply(this, arguments);
|
||||
if (evt.buttonElement === this.zoombarDiv) {
|
||||
var levels = evt.buttonXY.y / this.zoomStopHeight;
|
||||
if (this.forceFixedZoomLevel || !this.map.fractionalZoom) {
|
||||
levels = Math.floor(levels);
|
||||
}
|
||||
var zoom = (this.map.getNumZoomLevels() - 1) - levels;
|
||||
zoom = Math.min(Math.max(zoom, 0), this.map.getNumZoomLevels() - 1);
|
||||
this.map.zoomTo(zoom);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: passEventToSlider
|
||||
* This function is used to pass events that happen on the div, or the map,
|
||||
* through to the slider, which then does its moving thing.
|
||||
*
|
||||
* Parameters:
|
||||
* evt - {<OpenLayers.Event>}
|
||||
*/
|
||||
passEventToSlider:function(evt) {
|
||||
this.sliderEvents.handleBrowserEvent(evt);
|
||||
},
|
||||
|
||||
/*
|
||||
* Method: zoomBarDown
|
||||
* event listener for clicks on the slider
|
||||
*
|
||||
* Parameters:
|
||||
* evt - {<OpenLayers.Event>}
|
||||
*/
|
||||
zoomBarDown:function(evt) {
|
||||
if (!OpenLayers.Event.isLeftClick(evt) && !OpenLayers.Event.isSingleTouch(evt)) {
|
||||
return;
|
||||
}
|
||||
this.map.events.on({
|
||||
"touchmove": this.passEventToSlider,
|
||||
"mousemove": this.passEventToSlider,
|
||||
"mouseup": this.passEventToSlider,
|
||||
scope: this
|
||||
});
|
||||
this.mouseDragStart = evt.xy.clone();
|
||||
this.zoomStart = evt.xy.clone();
|
||||
this.div.style.cursor = "move";
|
||||
// reset the div offsets just in case the div moved
|
||||
this.zoombarDiv.offsets = null;
|
||||
OpenLayers.Event.stop(evt);
|
||||
},
|
||||
|
||||
/*
|
||||
* Method: zoomBarDrag
|
||||
* This is what happens when a click has occurred, and the client is
|
||||
* dragging. Here we must ensure that the slider doesn't go beyond the
|
||||
* bottom/top of the zoombar div, as well as moving the slider to its new
|
||||
* visual location
|
||||
*
|
||||
* Parameters:
|
||||
* evt - {<OpenLayers.Event>}
|
||||
*/
|
||||
zoomBarDrag: function(evt) {
|
||||
if (this.mouseDragStart !== null) {
|
||||
var deltaY = this.mouseDragStart.y - evt.xy.y;
|
||||
var offsets = OpenLayers.Util.pagePosition(this.zoombarDiv);
|
||||
if ((evt.clientY - offsets[1]) > 0 &&
|
||||
(evt.clientY - offsets[1]) < 140) {
|
||||
var newTop = parseInt(this.slider.style.top, 10) - deltaY;
|
||||
this.slider.style.top = newTop + "px";
|
||||
this.mouseDragStart = evt.xy.clone();
|
||||
}
|
||||
// set cumulative displacement
|
||||
this.deltaY = this.zoomStart.y - evt.xy.y;
|
||||
OpenLayers.Event.stop(evt);
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Method: zoomBarUp
|
||||
* Perform cleanup when a mouseup event is received -- discover new zoom
|
||||
* level and switch to it.
|
||||
*
|
||||
* Parameters:
|
||||
* evt - {<OpenLayers.Event>}
|
||||
*/
|
||||
zoomBarUp: function(evt) {
|
||||
if (!OpenLayers.Event.isLeftClick(evt) && evt.type !== "touchend") {
|
||||
return;
|
||||
}
|
||||
if (this.mouseDragStart) {
|
||||
this.div.style.cursor = "";
|
||||
this.map.events.un({
|
||||
"touchmove": this.passEventToSlider,
|
||||
"mouseup": this.passEventToSlider,
|
||||
"mousemove": this.passEventToSlider,
|
||||
scope: this
|
||||
});
|
||||
var zoomLevel = this.map.zoom;
|
||||
zoomLevel += this.deltaY/this.zoomStopHeight;
|
||||
zoomLevel = Math.max(Math.round(zoomLevel), 0);
|
||||
this.map.zoomTo(zoomLevel);
|
||||
this.mouseDragStart = null;
|
||||
this.zoomStart = null;
|
||||
this.deltaY = 0;
|
||||
OpenLayers.Event.stop(evt);
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Method: moveZoomBar
|
||||
* Change the location of the slider to match the current zoom level.
|
||||
*/
|
||||
moveZoomBar:function() {
|
||||
var newTop =
|
||||
((this.map.getNumZoomLevels()-1) - this.map.getZoom()) *
|
||||
this.zoomStopHeight + this.startTop;
|
||||
this.slider.style.top = newTop + "px";
|
||||
},
|
||||
CLASS_NAME: "OpenLayers.Control.SimplePanZoom"
|
||||
});
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
.SimpleLayerSwitcher {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
min-width: 150px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher a.basey {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #838383;
|
||||
padding: 2px 5px 2px 20px;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher a.basey-on {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
background-image: image-url("theme/openstreetmap/img/carat.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 7px 9px;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher a.basey-off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher:hover a {
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher a:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher:hover a:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher:hover a.basey-off {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
.olControlSimplePanZoom {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.olControlSimplePanZoom .button {
|
||||
background-image: image-url("theme/openstreetmap/img/map_sprite.png");
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
cursor: hand;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.olControlSimplePanZoom #panup {
|
||||
left: 10px;
|
||||
width: 25px;
|
||||
height: 13px;
|
||||
background-position: -15px -5px;
|
||||
}
|
||||
|
||||
.olControlSimplePanZoom #pandown {
|
||||
left: 10px;
|
||||
top: 36px;
|
||||
width: 25px;
|
||||
height: 15px;
|
||||
background-position: -15px -40px;
|
||||
}
|
||||
|
||||
.olControlSimplePanZoom #panleft {
|
||||
top: 13px;
|
||||
width: 25px;
|
||||
height: 24px;
|
||||
left: 0px;
|
||||
background-position: -5px -17px;
|
||||
}
|
||||
|
||||
.olControlSimplePanZoom #panright {
|
||||
top: 13px;
|
||||
width: 25px;
|
||||
height: 24px;
|
||||
left: 25px;
|
||||
background-position: -30px -17px;
|
||||
}
|
||||
|
||||
.olControlSimplePanZoom #zoomin {
|
||||
top: 50px;
|
||||
width: 26px;
|
||||
height: 20px;
|
||||
left: 10px;
|
||||
background-position: -15px -61px;
|
||||
}
|
||||
|
||||
.olControlSimplePanZoom #zoomout {
|
||||
top: 210px;
|
||||
width: 26px;
|
||||
height: 20px;
|
||||
left: 10px;
|
||||
background-position: -15px -220px;
|
||||
}
|
||||
|
||||
.olControlSimplePanZoom #slider {
|
||||
top: 75px;
|
||||
width: 25px;
|
||||
height: 10px;
|
||||
left: 10px;
|
||||
-webkit-transition: top 100ms linear;
|
||||
-moz-transition: top 100ms linear;
|
||||
-o-transition: top 100ms linear;
|
||||
background-position: -77px -58px;
|
||||
pointer: move;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.olControlSimplePanZoom #zoombar {
|
||||
top: 70px;
|
||||
width: 26px;
|
||||
height: 140px;
|
||||
left: 10px;
|
||||
background-position: -15px -80px;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 279 B |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
|
|
@ -1,66 +0,0 @@
|
|||
/*
|
||||
*= require theme/default/style
|
||||
*= require theme/openstreetmap/SimpleLayerSwitcher
|
||||
*= require theme/openstreetmap/SimplePanZoom
|
||||
*/
|
||||
|
||||
.olControlOverviewMapExtentRectangle {
|
||||
background-image: image-url("theme/default/img/blank.gif");
|
||||
}
|
||||
|
||||
.olControlOverviewMapRectReplacement {
|
||||
background-image: image-url("theme/default/img/overview_replacement.gif");
|
||||
}
|
||||
|
||||
.olControlNavigationHistory {
|
||||
background-image: image-url("theme/default/img/navigation_history.png");
|
||||
}
|
||||
|
||||
div.olControlSaveFeaturesItemActive {
|
||||
background-image: image-url("theme/default/img/save_features_on.png");
|
||||
}
|
||||
|
||||
div.olControlSaveFeaturesItemInactive {
|
||||
background-image: image-url("theme/default/img/save_features_off.png");
|
||||
}
|
||||
|
||||
.olControlPanPanel div {
|
||||
background-image: image-url("theme/default/img/pan-panel.png");
|
||||
}
|
||||
|
||||
.olControlZoomPanel div {
|
||||
background-image: image-url("theme/default/img/zoom-panel.png");
|
||||
}
|
||||
|
||||
.olPopupCloseBox {
|
||||
background: image-url("theme/default/img/close.gif") no-repeat;
|
||||
}
|
||||
|
||||
.olImageLoadError {
|
||||
// remove opacity?
|
||||
// remove filter?
|
||||
background: image-url("theme/openstreetmap/img/missing-tile.png") no-repeat;
|
||||
}
|
||||
|
||||
.olControlNavToolbar div,
|
||||
.olControlEditingToolbar div {
|
||||
background-image: image-url("theme/default/img/editing_tool_bar.png");
|
||||
}
|
||||
|
||||
div.olControlZoom a {
|
||||
color: black;
|
||||
background: #ffffff;
|
||||
border: 1px solid #cccccc;
|
||||
margin: 0 !important;
|
||||
// remove filter
|
||||
}
|
||||
|
||||
div.olControlZoom a.olControlZoomIn {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
div.olControlZoom a:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
// remove max-width hover?
|
||||
|
|
@ -430,7 +430,7 @@ body.site-export #tabnav a#exportanchor {
|
|||
left: 15px;
|
||||
}
|
||||
|
||||
/* Rules for OpenLayers maps */
|
||||
/* Rules for Leaflet maps */
|
||||
|
||||
#map {
|
||||
margin: 0px;
|
||||
|
|
@ -438,13 +438,6 @@ body.site-export #tabnav a#exportanchor {
|
|||
padding: 0px;
|
||||
}
|
||||
|
||||
.olControlAttribution {
|
||||
bottom: 15px !important;
|
||||
left: 0px !important;
|
||||
right: 0px !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#permalink {
|
||||
z-index: 10000;
|
||||
position: absolute;
|
||||
|
|
@ -460,11 +453,13 @@ body.site-export #tabnav a#exportanchor {
|
|||
padding: 5px;
|
||||
}
|
||||
|
||||
.site-index #map .SimpleLayerSwitcher,
|
||||
.site-index #map .olControlSimplePanZoom,
|
||||
.site-export #map .SimpleLayerSwitcher,
|
||||
.site-export #map .olControlSimplePanZoom {
|
||||
.site-index .leaflet-top,
|
||||
.site-export .leaflet-top {
|
||||
top: 40px !important;
|
||||
|
||||
.leaflet-control {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.site-index #map .olControlScaleLine,
|
||||
|
|
@ -1098,16 +1093,21 @@ p#contributorGuidance {
|
|||
|
||||
/* Rules for the user map */
|
||||
|
||||
.user_map .olControlSimplePanZoom {
|
||||
.user_map .leaflet-control-pan,
|
||||
.user_map .leaflet-control-zoomslider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user_map .olControlZoom {
|
||||
.user_map .leaflet-control-zoom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Rules for user popups on maps */
|
||||
|
||||
.user_popup {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.user_popup p {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
|
|
|
|||
27
app/assets/stylesheets/embed.css.scss
Normal file
27
app/assets/stylesheets/embed.css.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/*
|
||||
*= require leaflet
|
||||
*/
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom-in {
|
||||
background-image: image-url("images/zoom-in.png");
|
||||
}
|
||||
|
||||
.leaflet-control-zoom-out {
|
||||
background-image: image-url("images/zoom-out.png");
|
||||
}
|
||||
|
|
@ -8,6 +8,6 @@
|
|||
|
||||
/* Rules for OpenLayers maps */
|
||||
|
||||
.olControlZoom {
|
||||
.leaflet-control-zoom {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
44
app/assets/stylesheets/leaflet-all.css.scss
Normal file
44
app/assets/stylesheets/leaflet-all.css.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/*
|
||||
*= require leaflet
|
||||
*= require leaflet.locationfilter
|
||||
*= require leaflet.pan
|
||||
*= require leaflet.zoom
|
||||
*/
|
||||
|
||||
/* Override to serve images through the asset pipeline. */
|
||||
.leaflet-control-zoom-in {
|
||||
background-image: image-url("images/zoom-in.png");
|
||||
}
|
||||
|
||||
.leaflet-control-zoom-out {
|
||||
background-image: image-url("images/zoom-out.png");
|
||||
}
|
||||
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: image-url("images/layers.png");
|
||||
}
|
||||
|
||||
div.leaflet-marker-icon.location-filter.resize-marker {
|
||||
background-image: image-url("img/resize-handle.png");
|
||||
}
|
||||
|
||||
div.leaflet-marker-icon.location-filter.move-marker {
|
||||
background-image: image-url("img/move-handle.png");
|
||||
}
|
||||
|
||||
/* Override to better match the pan/zoom control. */
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0px 0px 3px #666;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Override some conflicting styles.
|
||||
https://github.com/openstreetmap/openstreetmap-website/pull/121#issuecomment-10206946 */
|
||||
.leaflet-popup-content img.user_thumbnail {
|
||||
max-width: 50px !important;
|
||||
}
|
||||
|
||||
.user_popup p {
|
||||
margin: 0px 2px 0px 55px !important;
|
||||
}
|
||||
41
app/assets/stylesheets/leaflet.pan.css.scss
Normal file
41
app/assets/stylesheets/leaflet.pan.css.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
.leaflet-control-pan-up,
|
||||
.leaflet-control-pan-down,
|
||||
.leaflet-control-pan-left,
|
||||
.leaflet-control-pan-right {
|
||||
background-image: image-url("map_sprite.png");
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
cursor: hand;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.leaflet-control-pan-up {
|
||||
left: 10px;
|
||||
width: 25px;
|
||||
height: 13px;
|
||||
background-position: -15px -5px;
|
||||
}
|
||||
|
||||
.leaflet-control-pan-down {
|
||||
left: 10px;
|
||||
top: 36px;
|
||||
width: 25px;
|
||||
height: 15px;
|
||||
background-position: -15px -40px;
|
||||
}
|
||||
|
||||
.leaflet-control-pan-left {
|
||||
left: 0px;
|
||||
top: 13px;
|
||||
width: 25px;
|
||||
height: 24px;
|
||||
background-position: -5px -17px;
|
||||
}
|
||||
|
||||
.leaflet-control-pan-right {
|
||||
left: 25px;
|
||||
top: 13px;
|
||||
width: 25px;
|
||||
height: 24px;
|
||||
background-position: -30px -17px;
|
||||
}
|
||||
46
app/assets/stylesheets/leaflet.zoom.css.scss
Normal file
46
app/assets/stylesheets/leaflet.zoom.css.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
.leaflet-control-zoomslider-in,
|
||||
.leaflet-control-zoomslider-out,
|
||||
.leaflet-control-zoomslider-slider,
|
||||
.leaflet-control-zoomslider-slider-knob {
|
||||
background-image: image-url("map_sprite.png");
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
cursor: hand;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.leaflet-control-zoomslider-in {
|
||||
top: 50px;
|
||||
width: 26px;
|
||||
height: 20px;
|
||||
left: 10px;
|
||||
background-position: -15px -61px;
|
||||
}
|
||||
|
||||
.leaflet-control-zoomslider-out {
|
||||
top: 202px;
|
||||
width: 26px;
|
||||
height: 20px;
|
||||
left: 10px;
|
||||
background-position: -15px -220px;
|
||||
}
|
||||
|
||||
.leaflet-control-zoomslider-slider {
|
||||
top: 70px;
|
||||
width: 26px;
|
||||
height: 132px;
|
||||
left: 10px;
|
||||
background-position: -15px -84px;
|
||||
}
|
||||
|
||||
.leaflet-control-zoomslider-slider-knob {
|
||||
top: 0px;
|
||||
width: 25px;
|
||||
height: 10px;
|
||||
-webkit-transition: top 100ms linear;
|
||||
-moz-transition: top 100ms linear;
|
||||
-o-transition: top 100ms linear;
|
||||
background-position: -77px -58px;
|
||||
pointer: move;
|
||||
cursor: move;
|
||||
}
|
||||
|
|
@ -26,26 +26,10 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.olControlZoom {
|
||||
.leaflet-control {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.olControlSimplePanZoom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.olControlScaleLine {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.olControlAttribution {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#map {
|
||||
border: 1px solid black;
|
||||
margin: auto !important;
|
||||
|
|
|
|||
|
|
@ -95,14 +95,12 @@ h1 {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.olControlSimplePanZoom {
|
||||
.leaflet-control-pan, .leaflet-control-zoomslider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-index #map .olControlZoom,
|
||||
.site-index #map .SimpleLayerSwitcher,
|
||||
.site-export #map .olControlZoom,
|
||||
.site-export #map .SimpleLayerSwitcher {
|
||||
.site-index .leaflet-top,
|
||||
.site-export .leaflet-top {
|
||||
top: 8px !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ class ExportController < ApplicationController
|
|||
before_filter :authorize_web
|
||||
before_filter :set_locale
|
||||
|
||||
caches_page :embed
|
||||
|
||||
def start
|
||||
end
|
||||
|
||||
|
|
@ -23,4 +25,7 @@ class ExportController < ApplicationController
|
|||
redirect_to "http://parent.tile.openstreetmap.org/cgi-bin/export?bbox=#{bbox}&scale=#{scale}&format=#{format}"
|
||||
end
|
||||
end
|
||||
|
||||
def embed
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<div>
|
||||
<div style="text-align: center">
|
||||
<p style="margin-top: 10px; margin-bottom: 20px">
|
||||
<a id="browse_select_view" href="#"><%= t'browse.start.view_data' %></a>
|
||||
<a id="browse_filter_toggle" href="#"><%= t'browse.start_rjs.manually_select' %></a>
|
||||
<br />
|
||||
<a id="browse_select_box" href="#"><%= t'browse.start.manually_select' %></a>
|
||||
<br />
|
||||
<a id="browse_hide_areas_box" href="#"><%= t'browse.start.hide_areas' %></a>
|
||||
<a id="browse_hide_areas_box" href="#"><%= t'browse.start_rjs.hide_areas' %></a>
|
||||
</p>
|
||||
</div>
|
||||
<div id="browse_status" style="text-align: center; display: none">
|
||||
|
|
|
|||
15
app/views/export/embed.html.erb
Normal file
15
app/views/export/embed.html.erb
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OpenStreetMap Embedded</title>
|
||||
<%= stylesheet_link_tag "embed", :media=> "screen" %>
|
||||
<!--[if IE]>
|
||||
<%= stylesheet_link_tag "leaflet.ie", :media=> "screen" %>
|
||||
<![endif]-->
|
||||
<%= javascript_include_tag "embed" %>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,7 +5,11 @@
|
|||
<%= stylesheet_link_tag "small-#{dir}", :media => "only screen and (max-width:641px)" %>
|
||||
<%= stylesheet_link_tag "large-#{dir}", :media => "screen and (min-width: 642px)" %>
|
||||
<%= stylesheet_link_tag "print-#{dir}", :media => "print" %>
|
||||
<!--[if IE]><%= stylesheet_link_tag "large-#{dir}", :media => "screen" %><![endif]--> <!-- IE is totally broken with CSS media queries -->
|
||||
<%= stylesheet_link_tag "leaflet-all", :media => "screen, print" %>
|
||||
<!--[if IE]>
|
||||
<%= stylesheet_link_tag "leaflet.ie" %>
|
||||
<%= stylesheet_link_tag "large-#{dir}", :media => "screen" %>
|
||||
<![endif]-->
|
||||
<%= favicon_link_tag "favicon.ico" %>
|
||||
<%= favicon_link_tag "osm_logo.png", :rel => "apple-touch-icon", :type => "image/png" %>
|
||||
<%= tag("link", { :rel => "publisher", :href => "https://plus.google.com/111953119785824514010" }) %>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
user_data = {
|
||||
:lon => contact.home_lon,
|
||||
:lat => contact.home_lat,
|
||||
:icon => type == "friend" ? "marker-blue.png" : "marker-green.png",
|
||||
:icon => image_path(type == "friend" ? "marker-blue.png" : "marker-green.png"),
|
||||
:description => render(:partial => "popup", :object => contact, :locals => {:type => type})
|
||||
}
|
||||
%>
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
user_data = {
|
||||
:lon => @user.home_lon,
|
||||
:lat => @user.home_lat,
|
||||
:icon => "marker.png",
|
||||
:icon => image_path("marker-red.png"),
|
||||
:description => render(:partial => "popup", :object => @user, :locals => {:type => "your location"})
|
||||
}
|
||||
%>
|
||||
|
|
|
|||
|
|
@ -61,6 +61,8 @@ OpenStreetMap::Application.configure do
|
|||
config.assets.precompile += %w( large-ltr.css small-ltr.css print-ltr.css )
|
||||
config.assets.precompile += %w( large-rtl.css small-rtl.css print-rtl.css )
|
||||
config.assets.precompile += %w( browse.css theme/openstreetmap/style.css )
|
||||
config.assets.precompile += %w( leaflet-all.css leaflet.ie.css )
|
||||
config.assets.precompile += %w( embed.js embed.css )
|
||||
|
||||
# Disable delivery errors, bad email addresses will be ignored
|
||||
# config.action_mailer.raise_delivery_errors = false
|
||||
|
|
|
|||
|
|
@ -219,14 +219,11 @@ en:
|
|||
relation_title: "Relation: %{relation_name}"
|
||||
download_xml: "Download XML"
|
||||
view_history: "View history"
|
||||
start:
|
||||
view_data: "View data for current map view"
|
||||
manually_select: "Manually select a different area"
|
||||
start_rjs:
|
||||
data_layer_name: "Browse Map Data"
|
||||
data_frame_title: "Data"
|
||||
zoom_or_select: "Zoom in or select an area of the map to view"
|
||||
drag_a_box: "Drag a box on the map to select an area"
|
||||
view_data: "View data for current map view"
|
||||
manually_select: "Manually select a different area"
|
||||
hide_areas: "Hide areas"
|
||||
show_areas: "Show areas"
|
||||
|
|
|
|||
|
|
@ -203,6 +203,7 @@ OpenStreetMap::Application.routes.draw do
|
|||
# export
|
||||
match '/export/start' => 'export#start', :via => :get
|
||||
match '/export/finish' => 'export#finish', :via => :post
|
||||
match '/export/embed' => 'export#embed', :via => :get
|
||||
|
||||
# messages
|
||||
match '/user/:display_name/inbox' => 'message#inbox', :via => :get, :as => "inbox"
|
||||
|
|
|
|||
|
|
@ -1,99 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OpenStreetMap Embedded</title>
|
||||
<style type="text/css">
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.olControlAttribution {
|
||||
bottom: 3px!important;
|
||||
}
|
||||
</style>
|
||||
<script src="/openlayers/OpenLayers.js" type="text/javascript"></script>
|
||||
<script src="/openlayers/OpenStreetMap.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
var map, layer;
|
||||
function init(){
|
||||
map = new OpenLayers.Map ("map", {
|
||||
controls: [
|
||||
new OpenLayers.Control.Attribution(),
|
||||
new OpenLayers.Control.Navigation()
|
||||
],
|
||||
numZoomLevels: 20,
|
||||
displayProjection: new OpenLayers.Projection("EPSG:4326")
|
||||
});
|
||||
|
||||
var attribution = '© <a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a> and contributors, under an <a target="_parent" href="http://www.openstreetmap.org/copyright">open license</a>';
|
||||
var args = OpenLayers.Util.getParameters();
|
||||
if (!args.layer || args.layer == "mapnik" || args.layer == "osmarender") {
|
||||
var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
|
||||
wrapDateLine: true,
|
||||
attribution: attribution
|
||||
});
|
||||
map.addLayer(mapnik);
|
||||
} else if (args.layer == "cyclemap" || args.layer == "cycle map") {
|
||||
var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle Map", {
|
||||
wrapDateLine: true,
|
||||
attribution: attribution
|
||||
});
|
||||
map.addLayer(cyclemap);
|
||||
} else if (args.layer == "transportmap") {
|
||||
var transportmap = new OpenLayers.Layer.OSM.TransportMap("Transport Map", {
|
||||
wrapDateLine: true,
|
||||
attribution: attribution
|
||||
});
|
||||
map.addLayer(transportmap);
|
||||
} else if (args.layer == "mapquest") {
|
||||
var mapquestmap = new OpenLayers.Layer.OSM("MapQuest Open Map", [
|
||||
"http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
|
||||
"http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
|
||||
"http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
|
||||
"http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"], {
|
||||
wrapDateLine: true,
|
||||
attribution: "Tiles courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
|
||||
});
|
||||
map.addLayer(mapquestmap);
|
||||
}
|
||||
|
||||
if (args.marker) {
|
||||
var markers = new OpenLayers.Layer.Markers();
|
||||
map.addLayer(markers);
|
||||
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(args.marker[1], args.marker[0]).transform(map.displayProjection, map.getProjectionObject())));
|
||||
map.marker = true;
|
||||
}
|
||||
|
||||
if (args.bbox) {
|
||||
var bounds = OpenLayers.Bounds.fromArray(args.bbox).transform(map.displayProjection, map.getProjectionObject());
|
||||
map.zoomToExtent(bounds)
|
||||
} else {
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
|
||||
var size = map.getSize();
|
||||
if (size.h > 320) {
|
||||
map.addControl(new OpenLayers.Control.PanZoomBar());
|
||||
} else {
|
||||
map.addControl(new OpenLayers.Control.Zoom());
|
||||
}
|
||||
}
|
||||
// -->
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="init()">
|
||||
<div id="map"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -13,6 +13,10 @@ class ExportControllerTest < ActionController::TestCase
|
|||
{ :path => "/export/finish", :method => :post },
|
||||
{ :controller => "export", :action => "finish" }
|
||||
)
|
||||
assert_routing(
|
||||
{ :path => "/export/embed", :method => :get },
|
||||
{ :controller => "export", :action => "embed" }
|
||||
)
|
||||
end
|
||||
|
||||
def test_start
|
||||
|
|
|
|||
BIN
vendor/assets/leaflet/images/layers.png
vendored
Normal file
BIN
vendor/assets/leaflet/images/layers.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
vendor/assets/leaflet/images/marker-icon.png
vendored
Normal file
BIN
vendor/assets/leaflet/images/marker-icon.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
vendor/assets/leaflet/images/marker-shadow.png
vendored
Normal file
BIN
vendor/assets/leaflet/images/marker-shadow.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
vendor/assets/leaflet/images/zoom-in.png
vendored
Normal file
BIN
vendor/assets/leaflet/images/zoom-in.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 955 B |
BIN
vendor/assets/leaflet/images/zoom-out.png
vendored
Normal file
BIN
vendor/assets/leaflet/images/zoom-out.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 955 B |
BIN
vendor/assets/leaflet/img/filter-icon.png
vendored
Normal file
BIN
vendor/assets/leaflet/img/filter-icon.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
vendor/assets/leaflet/img/move-handle.png
vendored
Normal file
BIN
vendor/assets/leaflet/img/move-handle.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
vendor/assets/leaflet/img/resize-handle.png
vendored
Normal file
BIN
vendor/assets/leaflet/img/resize-handle.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,017 B |
401
vendor/assets/leaflet/leaflet.css
vendored
Normal file
401
vendor/assets/leaflet/leaflet.css
vendored
Normal file
|
|
@ -0,0 +1,401 @@
|
|||
/* required styles */
|
||||
|
||||
.leaflet-map-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-pane,
|
||||
.leaflet-overlay-pane,
|
||||
.leaflet-shadow-pane,
|
||||
.leaflet-marker-pane,
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-overlay-pane svg,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container img {
|
||||
max-width: none !important;
|
||||
}
|
||||
/* stupid Android 2 doesn't understand "max-width: none" properly */
|
||||
.leaflet-container img.leaflet-image-layer {
|
||||
max-width: 15000px !important;
|
||||
}
|
||||
.leaflet-tile {
|
||||
filter: inherit;
|
||||
visibility: hidden;
|
||||
}
|
||||
.leaflet-tile-loaded {
|
||||
visibility: inherit;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.leaflet-tile-pane { z-index: 2; }
|
||||
.leaflet-objects-pane { z-index: 3; }
|
||||
.leaflet-overlay-pane { z-index: 4; }
|
||||
.leaflet-shadow-pane { z-index: 5; }
|
||||
.leaflet-marker-pane { z-index: 6; }
|
||||
.leaflet-popup-pane { z-index: 7; }
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.leaflet-control {
|
||||
position: relative;
|
||||
z-index: 7;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-top {
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-right {
|
||||
right: 0;
|
||||
}
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-control {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
float: right;
|
||||
}
|
||||
.leaflet-top .leaflet-control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
.leaflet-fade-anim .leaflet-tile,
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
-o-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-tile-loaded,
|
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile,
|
||||
.leaflet-touching .leaflet-zoom-animated {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* cursors */
|
||||
|
||||
.leaflet-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-container {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
}
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-control {
|
||||
cursor: auto;
|
||||
}
|
||||
.leaflet-dragging,
|
||||
.leaflet-dragging .leaflet-clickable,
|
||||
.leaflet-dragging .leaflet-container {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
}
|
||||
|
||||
|
||||
/* visual tweaks */
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline: 0;
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: #0078A8;
|
||||
}
|
||||
.leaflet-container a.leaflet-active {
|
||||
outline: 2px solid orange;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 2px dotted #05f;
|
||||
background: white;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom {
|
||||
-webkit-border-radius: 7px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.leaflet-control-zoom {
|
||||
padding: 5px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.leaflet-control-zoom a {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-control-zoom a,
|
||||
.leaflet-control-layers-toggle {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-zoom a:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-zoom a {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
}
|
||||
.leaflet-control-zoom-in {
|
||||
background-image: url(images/zoom-in.png);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-zoom-out {
|
||||
background-image: url(images/zoom-out.png);
|
||||
}
|
||||
|
||||
|
||||
/* layers control */
|
||||
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0 1px 7px #999;
|
||||
background: #f8f8f9;
|
||||
-webkit-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.leaflet-control-layers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
box-shadow: 0 0 5px #bbb;
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-scale-line {
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution,
|
||||
.leaflet-container .leaflet-control-scale {
|
||||
font-size: 11px;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control-scale {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-scale-line {
|
||||
border: 2px solid #777;
|
||||
border-top: none;
|
||||
color: black;
|
||||
line-height: 1;
|
||||
font-size: 10px;
|
||||
padding-bottom: 2px;
|
||||
text-shadow: 1px 1px 1px #fff;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
padding-top: 1px;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers {
|
||||
border: 5px solid #bbb;
|
||||
}
|
||||
|
||||
|
||||
/* popup */
|
||||
|
||||
.leaflet-popup {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
-webkit-border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 14px 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 18px 0;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
margin: 0 auto;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding: 1px;
|
||||
|
||||
margin: -8px auto 0;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
|
||||
background: white;
|
||||
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.35);
|
||||
-webkit-box-shadow: 0 3px 18px rgba(0,0,0,0.33);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 4px 5px 0 0;
|
||||
text-align: center;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
font: 16px/14px Tahoma, Verdana, sans-serif;
|
||||
color: #c3c3c3;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
.leaflet-editing-icon {
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
47
vendor/assets/leaflet/leaflet.ie.css
vendored
Normal file
47
vendor/assets/leaflet/leaflet.ie.css
vendored
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
.leaflet-vml-shape {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.leaflet-control {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.leaflet-popup-tip {
|
||||
width: 21px;
|
||||
_width: 27px;
|
||||
margin: 0 auto;
|
||||
_margin-top: -3px;
|
||||
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom {
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3F000000',EndColorStr='#3F000000');
|
||||
}
|
||||
.leaflet-control-zoom a {
|
||||
background-color: #eee;
|
||||
}
|
||||
.leaflet-control-zoom a:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
}
|
||||
.leaflet-control-attribution, .leaflet-control-layers {
|
||||
background: white;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
8008
vendor/assets/leaflet/leaflet.js
vendored
Normal file
8008
vendor/assets/leaflet/leaflet.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
78
vendor/assets/leaflet/leaflet.locationfilter.css
vendored
Normal file
78
vendor/assets/leaflet/leaflet.locationfilter.css
vendored
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
div.leaflet-marker-icon.location-filter.resize-marker {
|
||||
background: url( img/resize-handle.png ) no-repeat;
|
||||
cursor: move;
|
||||
}
|
||||
div.leaflet-marker-icon.location-filter.move-marker {
|
||||
background: url( img/move-handle.png ) no-repeat;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
div.location-filter.button-container {
|
||||
background: #bfbfbf;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
-moz-border-radius: 7px;
|
||||
-webkit-border-radius: 7px;
|
||||
border-radius: 7px;
|
||||
padding: 5px;
|
||||
}
|
||||
.leaflet-container div.location-filter.button-container a {
|
||||
display: inline-block;
|
||||
color: #0F2416;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
text-shadow: #A1BB9C 0 1px;
|
||||
padding: 6px 7px;
|
||||
border: 1px solid #9CC5A4;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px;
|
||||
-moz-box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px;
|
||||
box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px;
|
||||
background: #c4e3b9;
|
||||
background: rgba(218, 252, 205, 0.9);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(218, 252, 205, 0.9)), color-stop(100%, rgba(173, 226, 176, 0.9)));
|
||||
background: -webkit-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
|
||||
background: -moz-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
|
||||
background: -o-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
|
||||
background: linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
|
||||
}
|
||||
.leaflet-container div.location-filter.button-container a:hover {
|
||||
color: #263F1C;
|
||||
background: #dde6d8;
|
||||
background: rgba(245, 255, 240, 0.9);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 255, 240, 0.9)), color-stop(100%, rgba(203, 228, 205, 0.9)));
|
||||
background: -webkit-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
|
||||
background: -moz-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
|
||||
background: -o-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
|
||||
background: linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
|
||||
}
|
||||
|
||||
.leaflet-container div.location-filter.button-container a.enable-button {
|
||||
padding: 6px 7px 6px 25px;
|
||||
background-image: url( img/filter-icon.png ), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(218, 252, 205, 0.9)), color-stop(100%, rgba(173, 226, 176, 0.9)));
|
||||
background-image: url( img/filter-icon.png ), -webkit-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
|
||||
background-image: url( img/filter-icon.png ), -moz-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
|
||||
background-image: url( img/filter-icon.png ), -ms-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
|
||||
background-image: url( img/filter-icon.png ), -o-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
|
||||
background-image: url( img/filter-icon.png ), linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
}
|
||||
.leaflet-container div.location-filter.button-container a.enable-button:hover,
|
||||
.leaflet-container div.location-filter.button-container.enabled a.enable-button {
|
||||
background-image: url( img/filter-icon.png ), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 255, 240, 0.9)), color-stop(100%, rgba(203, 228, 205, 0.9)));
|
||||
background-image: url( img/filter-icon.png ), -webkit-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
|
||||
background-image: url( img/filter-icon.png ), -moz-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
|
||||
background-image: url( img/filter-icon.png ), -ms-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
|
||||
background-image: url( img/filter-icon.png ), -o-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
|
||||
background-image: url( img/filter-icon.png ), linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
}
|
||||
|
||||
.leaflet-container div.location-filter.button-container a.adjust-button {
|
||||
margin-left: 2px;
|
||||
}
|
||||
493
vendor/assets/leaflet/leaflet.locationfilter.js
vendored
Normal file
493
vendor/assets/leaflet/leaflet.locationfilter.js
vendored
Normal file
|
|
@ -0,0 +1,493 @@
|
|||
/*
|
||||
* Leaflet.locationfilter - leaflet location filter plugin
|
||||
* Copyright (C) 2012, Tripbirds.com
|
||||
* http://tripbirds.com
|
||||
*
|
||||
* Licensed under the MIT License.
|
||||
*
|
||||
* Date: 2012-09-24
|
||||
* Version: 0.1
|
||||
*/
|
||||
L.LatLngBounds.prototype.modify = function(map, amount) {
|
||||
var sw = this.getSouthWest(),
|
||||
ne = this.getNorthEast(),
|
||||
swPoint = map.latLngToLayerPoint(sw),
|
||||
nePoint = map.latLngToLayerPoint(ne);
|
||||
|
||||
sw = map.layerPointToLatLng(new L.Point(swPoint.x-amount, swPoint.y+amount));
|
||||
ne = map.layerPointToLatLng(new L.Point(nePoint.x+amount, nePoint.y-amount));
|
||||
|
||||
return new L.LatLngBounds(sw, ne);
|
||||
};
|
||||
|
||||
L.Control.Button = L.Class.extend({
|
||||
initialize: function(options) {
|
||||
L.Util.setOptions(this, options);
|
||||
},
|
||||
|
||||
addTo: function(container) {
|
||||
container.addButton(this);
|
||||
return this;
|
||||
},
|
||||
|
||||
onAdd: function (buttonContainer) {
|
||||
this._buttonContainer = buttonContainer;
|
||||
this._button = L.DomUtil.create('a', this.options.className, this._buttonContainer.getContainer());
|
||||
this._button.href = '#';
|
||||
this.setText(this.options.text);
|
||||
|
||||
var that = this;
|
||||
this._onClick = function(event) {
|
||||
that.options.onClick.call(that, event);
|
||||
};
|
||||
|
||||
L.DomEvent
|
||||
.on(this._button, 'click', L.DomEvent.stopPropagation)
|
||||
.on(this._button, 'mousedown', L.DomEvent.stopPropagation)
|
||||
.on(this._button, 'dblclick', L.DomEvent.stopPropagation)
|
||||
.on(this._button, 'click', L.DomEvent.preventDefault)
|
||||
.on(this._button, 'click', this._onClick, this);
|
||||
},
|
||||
|
||||
remove: function() {
|
||||
L.DomEvent.off(this._button, "click", this._onClick);
|
||||
this._buttonContainer.getContainer().removeChild(this._button);
|
||||
},
|
||||
|
||||
setText: function(text) {
|
||||
this._button.title = text;
|
||||
this._button.innerHTML = text;
|
||||
}
|
||||
});
|
||||
|
||||
L.Control.ButtonContainer = L.Control.extend({
|
||||
options: {
|
||||
position: 'topleft'
|
||||
},
|
||||
|
||||
getContainer: function() {
|
||||
if (!this._container) {
|
||||
this._container = L.DomUtil.create('div', this.options.className);
|
||||
}
|
||||
return this._container;
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
this._map = map;
|
||||
return this.getContainer();
|
||||
},
|
||||
|
||||
addButton: function(button) {
|
||||
button.onAdd(this);
|
||||
},
|
||||
|
||||
addClass: function(className) {
|
||||
L.DomUtil.addClass(this.getContainer(), className);
|
||||
},
|
||||
|
||||
removeClass: function(className) {
|
||||
L.DomUtil.removeClass(this.getContainer(), className);
|
||||
}
|
||||
});
|
||||
|
||||
L.LocationFilter = L.Class.extend({
|
||||
includes: L.Mixin.Events,
|
||||
|
||||
options: {
|
||||
enableButton: {
|
||||
enableText: "Select area",
|
||||
disableText: "Remove selection"
|
||||
},
|
||||
adjustButton: {
|
||||
text: "Select area within current zoom"
|
||||
}
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
L.Util.setOptions(this, options);
|
||||
},
|
||||
|
||||
addTo: function(map) {
|
||||
map.addLayer(this);
|
||||
return this;
|
||||
},
|
||||
|
||||
onAdd: function(map) {
|
||||
this._map = map;
|
||||
this._layer = new L.LayerGroup();
|
||||
|
||||
if (this.options.enableButton || this.options.adjustButton) {
|
||||
this._initializeButtonContainer();
|
||||
}
|
||||
|
||||
if (this.options.enable) {
|
||||
this.enable();
|
||||
}
|
||||
},
|
||||
|
||||
onRemove: function(map) {
|
||||
this.disable();
|
||||
if (this._buttonContainer) {
|
||||
this._buttonContainer.removeFrom(map);
|
||||
}
|
||||
},
|
||||
|
||||
/* Get the current filter bounds */
|
||||
getBounds: function() {
|
||||
return new L.LatLngBounds(this._sw, this._ne);
|
||||
},
|
||||
|
||||
setBounds: function(bounds) {
|
||||
this._nw = bounds.getNorthWest();
|
||||
this._ne = bounds.getNorthEast();
|
||||
this._sw = bounds.getSouthWest();
|
||||
this._se = bounds.getSouthEast();
|
||||
if (this.isEnabled()) {
|
||||
this._draw();
|
||||
this.fire("change", {bounds: bounds});
|
||||
}
|
||||
},
|
||||
|
||||
isEnabled: function() {
|
||||
return this._enabled;
|
||||
},
|
||||
|
||||
/* Draw a rectangle */
|
||||
_drawRectangle: function(bounds, options) {
|
||||
options = options || {};
|
||||
var defaultOptions = {
|
||||
stroke: false,
|
||||
fill: true,
|
||||
fillColor: "black",
|
||||
fillOpacity: 0.3,
|
||||
clickable: false
|
||||
};
|
||||
options = L.Util.extend(defaultOptions, options);
|
||||
var rect = new L.Rectangle(bounds, options);
|
||||
rect.addTo(this._layer);
|
||||
return rect;
|
||||
},
|
||||
|
||||
/* Draw a draggable marker */
|
||||
_drawImageMarker: function(point, options) {
|
||||
var marker = new L.Marker(point, {
|
||||
icon: new L.DivIcon({
|
||||
iconAnchor: options.anchor,
|
||||
iconSize: options.size,
|
||||
className: options.className
|
||||
}),
|
||||
draggable: true
|
||||
});
|
||||
marker.addTo(this._layer);
|
||||
return marker;
|
||||
},
|
||||
|
||||
/* Draw a move marker. Sets up drag listener that updates the
|
||||
filter corners and redraws the filter when the move marker is
|
||||
moved */
|
||||
_drawMoveMarker: function(point) {
|
||||
var that = this;
|
||||
this._moveMarker = this._drawImageMarker(point, {
|
||||
"className": "location-filter move-marker",
|
||||
"anchor": [-10, -10],
|
||||
"size": [13,13]
|
||||
});
|
||||
this._moveMarker.on('drag', function(e) {
|
||||
var markerPos = that._moveMarker.getLatLng(),
|
||||
latDelta = markerPos.lat-that._nw.lat,
|
||||
lngDelta = markerPos.lng-that._nw.lng;
|
||||
that._nw = new L.LatLng(that._nw.lat+latDelta, that._nw.lng+lngDelta, true);
|
||||
that._ne = new L.LatLng(that._ne.lat+latDelta, that._ne.lng+lngDelta, true);
|
||||
that._sw = new L.LatLng(that._sw.lat+latDelta, that._sw.lng+lngDelta, true);
|
||||
that._se = new L.LatLng(that._se.lat+latDelta, that._se.lng+lngDelta, true);
|
||||
that._draw();
|
||||
});
|
||||
this._setupDragendListener(this._moveMarker);
|
||||
return this._moveMarker;
|
||||
},
|
||||
|
||||
/* Draw a resize marker */
|
||||
_drawResizeMarker: function(point, latFollower, lngFollower, otherPos) {
|
||||
return this._drawImageMarker(point, {
|
||||
"className": "location-filter resize-marker",
|
||||
"anchor": [7, 6],
|
||||
"size": [13, 12]
|
||||
});
|
||||
},
|
||||
|
||||
/* Track moving of the given resize marker and update the markers
|
||||
given in options.moveAlong to match the position of the moved
|
||||
marker. Update filter corners and redraw the filter */
|
||||
_setupResizeMarkerTracking: function(marker, options) {
|
||||
var that = this;
|
||||
marker.on('drag', function(e) {
|
||||
var curPosition = marker.getLatLng(),
|
||||
latMarker = options.moveAlong.lat,
|
||||
lngMarker = options.moveAlong.lng;
|
||||
// Move follower markers when this marker is moved
|
||||
latMarker.setLatLng(new L.LatLng(curPosition.lat, latMarker.getLatLng().lng, true));
|
||||
lngMarker.setLatLng(new L.LatLng(lngMarker.getLatLng().lat, curPosition.lng, true));
|
||||
// Sort marker positions in nw, ne, sw, se order
|
||||
var corners = [that._nwMarker.getLatLng(),
|
||||
that._neMarker.getLatLng(),
|
||||
that._swMarker.getLatLng(),
|
||||
that._seMarker.getLatLng()];
|
||||
corners.sort(function(a, b) {
|
||||
if (a.lat != b.lat)
|
||||
return b.lat-a.lat;
|
||||
else
|
||||
return a.lng-b.lng;
|
||||
});
|
||||
// Update corner points and redraw everything except the resize markers
|
||||
that._nw = corners[0];
|
||||
that._ne = corners[1];
|
||||
that._sw = corners[2];
|
||||
that._se = corners[3];
|
||||
that._draw({repositionResizeMarkers: false});
|
||||
});
|
||||
this._setupDragendListener(marker);
|
||||
},
|
||||
|
||||
/* Emit a change event whenever dragend is triggered on the
|
||||
given marker */
|
||||
_setupDragendListener: function(marker) {
|
||||
var that = this;
|
||||
marker.on('dragend', function(e) {
|
||||
that.fire("change", {bounds: that.getBounds()});
|
||||
});
|
||||
},
|
||||
|
||||
/* Create bounds for the mask rectangles and the location
|
||||
filter rectangle */
|
||||
_calculateBounds: function() {
|
||||
var mapBounds = this._map.getBounds(),
|
||||
outerBounds = new L.LatLngBounds(
|
||||
new L.LatLng(mapBounds.getSouthWest().lat-0.1,
|
||||
mapBounds.getSouthWest().lng-0.1, true),
|
||||
new L.LatLng(mapBounds.getNorthEast().lat+0.1,
|
||||
mapBounds.getNorthEast().lng+0.1, true)
|
||||
);
|
||||
|
||||
// The south west and north east points of the mask */
|
||||
this._osw = outerBounds.getSouthWest();
|
||||
this._one = outerBounds.getNorthEast();
|
||||
|
||||
// Bounds for the mask rectangles
|
||||
this._northBounds = new L.LatLngBounds(new L.LatLng(this._ne.lat, this._osw.lng, true), this._one);
|
||||
this._westBounds = new L.LatLngBounds(new L.LatLng(this._sw.lat, this._osw.lng, true), this._nw);
|
||||
this._eastBounds = new L.LatLngBounds(this._se, new L.LatLng(this._ne.lat, this._one.lng, true));
|
||||
this._southBounds = new L.LatLngBounds(this._osw, new L.LatLng(this._sw.lat, this._one.lng, true));
|
||||
},
|
||||
|
||||
/* Initializes rectangles and markers */
|
||||
_initialDraw: function() {
|
||||
if (this._initialDrawCalled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Calculate filter bounds
|
||||
this._calculateBounds();
|
||||
|
||||
// Create rectangles
|
||||
this._northRect = this._drawRectangle(this._northBounds);
|
||||
this._westRect = this._drawRectangle(this._westBounds);
|
||||
this._eastRect = this._drawRectangle(this._eastBounds);
|
||||
this._southRect = this._drawRectangle(this._southBounds);
|
||||
this._innerRect = this._drawRectangle(this.getBounds(), {
|
||||
fillColor: "transparent",
|
||||
stroke: true,
|
||||
color: "white",
|
||||
weight: 1,
|
||||
opacity: 0.9
|
||||
});
|
||||
|
||||
// Create resize markers
|
||||
this._nwMarker = this._drawResizeMarker(this._nw);
|
||||
this._neMarker = this._drawResizeMarker(this._ne);
|
||||
this._swMarker = this._drawResizeMarker(this._sw);
|
||||
this._seMarker = this._drawResizeMarker(this._se);
|
||||
|
||||
// Setup tracking of resize markers. Each marker has pair of
|
||||
// follower markers that must be moved whenever the marker is
|
||||
// moved. For example, whenever the north west resize marker
|
||||
// moves, the south west marker must move along on the x-axis
|
||||
// and the north east marker must move on the y axis
|
||||
this._setupResizeMarkerTracking(this._nwMarker, {moveAlong: {lat: this._neMarker, lng: this._swMarker}});
|
||||
this._setupResizeMarkerTracking(this._neMarker, {moveAlong: {lat: this._nwMarker, lng: this._seMarker}});
|
||||
this._setupResizeMarkerTracking(this._swMarker, {moveAlong: {lat: this._seMarker, lng: this._nwMarker}});
|
||||
this._setupResizeMarkerTracking(this._seMarker, {moveAlong: {lat: this._swMarker, lng: this._neMarker}});
|
||||
|
||||
// Create move marker
|
||||
this._moveMarker = this._drawMoveMarker(this._nw);
|
||||
|
||||
this._initialDrawCalled = true;
|
||||
},
|
||||
|
||||
/* Reposition all rectangles and markers to the current filter bounds. */
|
||||
_draw: function(options) {
|
||||
options = L.Util.extend({repositionResizeMarkers: true}, options);
|
||||
|
||||
// Calculate filter bounds
|
||||
this._calculateBounds();
|
||||
|
||||
// Reposition rectangles
|
||||
this._northRect.setBounds(this._northBounds);
|
||||
this._westRect.setBounds(this._westBounds);
|
||||
this._eastRect.setBounds(this._eastBounds);
|
||||
this._southRect.setBounds(this._southBounds);
|
||||
this._innerRect.setBounds(this.getBounds());
|
||||
|
||||
// Reposition resize markers
|
||||
if (options.repositionResizeMarkers) {
|
||||
this._nwMarker.setLatLng(this._nw);
|
||||
this._neMarker.setLatLng(this._ne);
|
||||
this._swMarker.setLatLng(this._sw);
|
||||
this._seMarker.setLatLng(this._se);
|
||||
}
|
||||
|
||||
// Reposition the move marker
|
||||
this._moveMarker.setLatLng(this._nw);
|
||||
},
|
||||
|
||||
/* Adjust the location filter to the current map bounds */
|
||||
_adjustToMap: function() {
|
||||
this.setBounds(this._map.getBounds());
|
||||
this._map.zoomOut();
|
||||
},
|
||||
|
||||
/* Enable the location filter */
|
||||
enable: function() {
|
||||
if (this._enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize corners
|
||||
var bounds;
|
||||
if (this._sw && this._ne) {
|
||||
bounds = new L.LatLngBounds(this._sw, this._ne);
|
||||
} else if (this.options.bounds) {
|
||||
bounds = this.options.bounds;
|
||||
} else {
|
||||
bounds = this._map.getBounds();
|
||||
}
|
||||
this._map.invalidateSize();
|
||||
this._nw = bounds.getNorthWest();
|
||||
this._ne = bounds.getNorthEast();
|
||||
this._sw = bounds.getSouthWest();
|
||||
this._se = bounds.getSouthEast();
|
||||
|
||||
|
||||
// Update buttons
|
||||
if (this._buttonContainer) {
|
||||
this._buttonContainer.addClass("enabled");
|
||||
}
|
||||
|
||||
if (this._enableButton) {
|
||||
this._enableButton.setText(this.options.enableButton.disableText);
|
||||
}
|
||||
|
||||
if (this.options.adjustButton) {
|
||||
this._createAdjustButton();
|
||||
}
|
||||
|
||||
// Draw filter
|
||||
this._initialDraw();
|
||||
this._draw();
|
||||
|
||||
// Set up map move event listener
|
||||
var that = this;
|
||||
this._moveHandler = function() {
|
||||
that._draw();
|
||||
};
|
||||
this._map.on("move", this._moveHandler);
|
||||
|
||||
// Add the filter layer to the map
|
||||
this._layer.addTo(this._map);
|
||||
|
||||
// Zoom out the map if necessary
|
||||
var mapBounds = this._map.getBounds();
|
||||
bounds = new L.LatLngBounds(this._sw, this._ne).modify(this._map, 10);
|
||||
if (!mapBounds.contains(bounds.getSouthWest()) || !mapBounds.contains(bounds.getNorthEast())) {
|
||||
this._map.fitBounds(bounds);
|
||||
}
|
||||
|
||||
this._enabled = true;
|
||||
|
||||
// Fire the enabled event
|
||||
this.fire("enabled");
|
||||
},
|
||||
|
||||
/* Disable the location filter */
|
||||
disable: function() {
|
||||
if (!this._enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update buttons
|
||||
if (this._buttonContainer) {
|
||||
this._buttonContainer.removeClass("enabled");
|
||||
}
|
||||
|
||||
if (this._enableButton) {
|
||||
this._enableButton.setText(this.options.enableButton.enableText);
|
||||
}
|
||||
|
||||
if (this._adjustButton) {
|
||||
this._adjustButton.remove();
|
||||
}
|
||||
|
||||
// Remove event listener
|
||||
this._map.off("move", this._moveHandler);
|
||||
|
||||
// Remove rectangle layer from map
|
||||
this._map.removeLayer(this._layer);
|
||||
|
||||
this._enabled = false;
|
||||
|
||||
// Fire the disabled event
|
||||
this.fire("disabled");
|
||||
},
|
||||
|
||||
/* Create a button that allows the user to adjust the location
|
||||
filter to the current zoom */
|
||||
_createAdjustButton: function() {
|
||||
var that = this;
|
||||
this._adjustButton = new L.Control.Button({
|
||||
className: "adjust-button",
|
||||
text: this.options.adjustButton.text,
|
||||
|
||||
onClick: function(event) {
|
||||
that._adjustToMap();
|
||||
that.fire("adjustToZoomClick");
|
||||
}
|
||||
}).addTo(this._buttonContainer);
|
||||
},
|
||||
|
||||
/* Create the location filter button container and the button that
|
||||
toggles the location filter */
|
||||
_initializeButtonContainer: function() {
|
||||
var that = this;
|
||||
this._buttonContainer = new L.Control.ButtonContainer({className: "location-filter button-container"});
|
||||
|
||||
if (this.options.enableButton) {
|
||||
this._enableButton = new L.Control.Button({
|
||||
className: "enable-button",
|
||||
text: this.options.enableButton.enableText,
|
||||
|
||||
onClick: function(event) {
|
||||
if (!that._enabled) {
|
||||
// Enable the location filter
|
||||
that.enable();
|
||||
that.fire("enableClick");
|
||||
} else {
|
||||
// Disable the location filter
|
||||
that.disable();
|
||||
that.fire("disableClick");
|
||||
}
|
||||
}
|
||||
}).addTo(this._buttonContainer);
|
||||
}
|
||||
|
||||
this._buttonContainer.addTo(this._map);
|
||||
}
|
||||
});
|
||||
200
vendor/assets/leaflet/leaflet.osm.js
vendored
Normal file
200
vendor/assets/leaflet/leaflet.osm.js
vendored
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
L.OSM = {};
|
||||
|
||||
L.OSM.TileLayer = L.TileLayer.extend({
|
||||
options: {
|
||||
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
attribution: '© <a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a> and contributors, under an <a target="_parent" href="http://www.openstreetmap.org/copyright">open license</a>'
|
||||
},
|
||||
|
||||
initialize: function (options) {
|
||||
options = L.Util.setOptions(this, options);
|
||||
L.TileLayer.prototype.initialize.call(this, options.url);
|
||||
}
|
||||
});
|
||||
|
||||
L.OSM.Mapnik = L.OSM.TileLayer.extend({
|
||||
options: {
|
||||
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||||
}
|
||||
});
|
||||
|
||||
L.OSM.CycleMap = L.OSM.TileLayer.extend({
|
||||
options: {
|
||||
url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
|
||||
}
|
||||
});
|
||||
|
||||
L.OSM.TransportMap = L.OSM.TileLayer.extend({
|
||||
options: {
|
||||
url: 'http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png'
|
||||
}
|
||||
});
|
||||
|
||||
L.OSM.MapQuestOpen = L.OSM.TileLayer.extend({
|
||||
options: {
|
||||
url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
|
||||
subdomains: '1234',
|
||||
attribution: "Tiles courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
|
||||
}
|
||||
});
|
||||
|
||||
L.OSM.DataLayer = L.FeatureGroup.extend({
|
||||
options: {
|
||||
areaTags: ['area', 'building', 'leisure', 'tourism', 'ruins', 'historic', 'landuse', 'military', 'natural', 'sport'],
|
||||
uninterestingTags: ['source', 'source_ref', 'source:ref', 'history', 'attribution', 'created_by', 'tiger:county', 'tiger:tlid', 'tiger:upload_uuid'],
|
||||
styles: {}
|
||||
},
|
||||
|
||||
initialize: function (xml, options) {
|
||||
L.Util.setOptions(this, options);
|
||||
|
||||
L.FeatureGroup.prototype.initialize.call(this);
|
||||
|
||||
if (xml) {
|
||||
this.addData(xml);
|
||||
}
|
||||
},
|
||||
|
||||
addData: function (features) {
|
||||
if (!(features instanceof Array)) {
|
||||
features = this.buildFeatures(features);
|
||||
}
|
||||
|
||||
for (var i = 0; i < features.length; i++) {
|
||||
var feature = features[i], layer;
|
||||
|
||||
if (feature.type === "node") {
|
||||
layer = L.circleMarker(feature.latLng, this.options.styles.node);
|
||||
} else {
|
||||
var latLngs = new Array(feature.nodes.length);
|
||||
|
||||
for (var j = 0; j < feature.nodes.length; j++) {
|
||||
latLngs[j] = feature.nodes[j].latLng;
|
||||
}
|
||||
|
||||
if (this.isWayArea(feature)) {
|
||||
latLngs.pop(); // Remove last == first.
|
||||
layer = L.polygon(latLngs, this.options.styles.area);
|
||||
} else {
|
||||
layer = L.polyline(latLngs, this.options.styles.way);
|
||||
}
|
||||
}
|
||||
|
||||
layer.addTo(this);
|
||||
layer.feature = feature;
|
||||
}
|
||||
},
|
||||
|
||||
buildFeatures: function (xml) {
|
||||
var features = [],
|
||||
nodes = L.OSM.getNodes(xml),
|
||||
ways = L.OSM.getWays(xml, nodes);
|
||||
|
||||
for (var node_id in nodes) {
|
||||
var node = nodes[node_id];
|
||||
if (this.interestingNode(node, ways)) {
|
||||
features.push(node);
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < ways.length; i++) {
|
||||
var way = ways[i];
|
||||
features.push(way);
|
||||
}
|
||||
|
||||
return features;
|
||||
},
|
||||
|
||||
isWayArea: function (way) {
|
||||
if (way.nodes[0] != way.nodes[way.nodes.length - 1]) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (var key in way.tags) {
|
||||
if (~this.options.areaTags.indexOf(key)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
interestingNode: function (node, ways) {
|
||||
var used = false;
|
||||
|
||||
for (var i = 0; i < ways.length; i++) {
|
||||
if (ways[i].nodes.indexOf(node) >= 0) {
|
||||
used = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!used) {
|
||||
return true;
|
||||
}
|
||||
|
||||
for (var key in node.tags) {
|
||||
if (this.options.uninterestingTags.indexOf(key) < 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
L.Util.extend(L.OSM, {
|
||||
getNodes: function (xml) {
|
||||
var result = {};
|
||||
|
||||
var nodes = xml.getElementsByTagName("node");
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
var node = nodes[i], id = node.getAttribute("id");
|
||||
result[id] = {
|
||||
id: id,
|
||||
type: "node",
|
||||
latLng: L.latLng(node.getAttribute("lat"),
|
||||
node.getAttribute("lon"),
|
||||
true),
|
||||
tags: this.getTags(node)
|
||||
};
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
getWays: function (xml, nodes) {
|
||||
var result = [];
|
||||
|
||||
var ways = xml.getElementsByTagName("way");
|
||||
for (var i = 0; i < ways.length; i++) {
|
||||
var way = ways[i], nds = way.getElementsByTagName("nd");
|
||||
|
||||
var way_object = {
|
||||
id: way.getAttribute("id"),
|
||||
type: "way",
|
||||
nodes: new Array(nds.length),
|
||||
tags: this.getTags(way)
|
||||
};
|
||||
|
||||
for (var j = 0; j < nds.length; j++) {
|
||||
way_object.nodes[j] = nodes[nds[j].getAttribute("ref")];
|
||||
}
|
||||
|
||||
result.push(way_object);
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
getTags: function (xml) {
|
||||
var result = {};
|
||||
|
||||
var tags = xml.getElementsByTagName("tag");
|
||||
for (var j = 0; j < tags.length; j++) {
|
||||
result[tags[j].getAttribute("k")] = tags[j].getAttribute("v");
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
});
|
||||
52
vendor/assets/leaflet/leaflet.pan.js
vendored
Normal file
52
vendor/assets/leaflet/leaflet.pan.js
vendored
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
L.Control.Pan = L.Control.extend({
|
||||
options: {
|
||||
position: 'topleft',
|
||||
panOffset: 500
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
var className = 'leaflet-control-pan',
|
||||
container = L.DomUtil.create('div', className),
|
||||
off = this.options.panOffset;
|
||||
|
||||
this._panButton('Up' , className + '-up'
|
||||
, container, map, new L.Point( 0 , -off));
|
||||
this._panButton('Left' , className + '-left'
|
||||
, container, map, new L.Point( -off , 0));
|
||||
this._panButton('Right', className + '-right'
|
||||
, container, map, new L.Point( off , 0));
|
||||
this._panButton('Down' , className + '-down'
|
||||
, container, map, new L.Point( 0 , off));
|
||||
|
||||
return container;
|
||||
},
|
||||
|
||||
_panButton: function (title, className, container, map, offset, text) {
|
||||
var wrapper = L.DomUtil.create('div', className + "-wrap", container);
|
||||
var link = L.DomUtil.create('a', className, wrapper);
|
||||
link.href = '#';
|
||||
link.title = title;
|
||||
L.DomEvent
|
||||
.on(link, 'click', L.DomEvent.stopPropagation)
|
||||
.on(link, 'click', L.DomEvent.preventDefault)
|
||||
.on(link, 'click', function(){ map.panBy(offset); }, map)
|
||||
.on(link, 'dblclick', L.DomEvent.stopPropagation)
|
||||
|
||||
return link;
|
||||
}
|
||||
});
|
||||
|
||||
L.Map.mergeOptions({
|
||||
panControl: true
|
||||
});
|
||||
|
||||
L.Map.addInitHook(function () {
|
||||
if (this.options.panControl) {
|
||||
this.panControl = new L.Control.Pan();
|
||||
this.addControl(this.panControl);
|
||||
}
|
||||
});
|
||||
|
||||
L.control.pan = function (options) {
|
||||
return new L.Control.Pan(options);
|
||||
};
|
||||
176
vendor/assets/leaflet/leaflet.zoom.js
vendored
Normal file
176
vendor/assets/leaflet/leaflet.zoom.js
vendored
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
L.Control.Zoomslider = L.Control.extend({
|
||||
options: {
|
||||
position: 'topleft',
|
||||
// height in px of zoom-slider.png
|
||||
stepHeight: 9
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
var className = 'leaflet-control-zoomslider',
|
||||
container = L.DomUtil.create('div', className);
|
||||
|
||||
this._map = map;
|
||||
|
||||
this._createButton('Zoom in', className + '-in'
|
||||
, container, this._zoomIn , this);
|
||||
this._createSlider(className + '-slider', container, map);
|
||||
this._createButton('Zoom out', className + '-out'
|
||||
, container, this._zoomOut, this);
|
||||
|
||||
|
||||
|
||||
this._map.on('zoomend', this._snapToSliderValue, this);
|
||||
|
||||
this._snapToSliderValue();
|
||||
return container;
|
||||
},
|
||||
|
||||
onRemove: function(map){
|
||||
map.off('zoomend', this._snapToSliderValue);
|
||||
},
|
||||
|
||||
_createSlider: function (className, container, map) {
|
||||
var zoomLevels = map.getMaxZoom() - map.getMinZoom();
|
||||
this._sliderHeight = this.options.stepHeight * zoomLevels;
|
||||
|
||||
var wrapper = L.DomUtil.create('div', className + '-wrap', container);
|
||||
wrapper.style.height = (this._sliderHeight + 5) + "px";
|
||||
var slider = L.DomUtil.create('div', className, wrapper);
|
||||
this._knob = L.DomUtil.create('div', className + '-knob', slider);
|
||||
|
||||
this._draggable = this._createDraggable();
|
||||
this._draggable.enable();
|
||||
|
||||
L.DomEvent
|
||||
.on(slider, 'click', L.DomEvent.stopPropagation)
|
||||
.on(slider, 'click', L.DomEvent.preventDefault)
|
||||
.on(slider, 'click', this._onSliderClick, this);
|
||||
|
||||
return slider;
|
||||
},
|
||||
|
||||
_zoomIn: function (e) {
|
||||
this._map.zoomIn(e.shiftKey ? 3 : 1);
|
||||
},
|
||||
|
||||
_zoomOut: function (e) {
|
||||
this._map.zoomOut(e.shiftKey ? 3 : 1);
|
||||
},
|
||||
|
||||
_createButton: function (title, className, container, fn, context) {
|
||||
var link = L.DomUtil.create('a', className, container);
|
||||
link.href = '#';
|
||||
link.title = title;
|
||||
|
||||
L.DomEvent
|
||||
.on(link, 'click', L.DomEvent.stopPropagation)
|
||||
.on(link, 'click', L.DomEvent.preventDefault)
|
||||
.on(link, 'click', fn, context);
|
||||
|
||||
return link;
|
||||
},
|
||||
|
||||
_createDraggable: function() {
|
||||
L.DomUtil.setPosition(this._knob, new L.Point(0, 0));
|
||||
L.DomEvent
|
||||
.on(this._knob
|
||||
, L.Draggable.START
|
||||
, L.DomEvent.stopPropagation)
|
||||
.on(this._knob, 'click', L.DomEvent.stopPropagation);
|
||||
|
||||
var bounds = new L.Bounds(
|
||||
new L.Point(0, 0),
|
||||
new L.Point(0, this._sliderHeight)
|
||||
);
|
||||
var draggable = new L.BoundedDraggable(this._knob,
|
||||
this._knob,
|
||||
bounds)
|
||||
.on('drag', this._snap, this)
|
||||
.on('dragend', this._setZoom, this);
|
||||
|
||||
return draggable;
|
||||
},
|
||||
|
||||
_snap : function(){
|
||||
this._snapToSliderValue(this._posToSliderValue());
|
||||
},
|
||||
_setZoom: function() {
|
||||
this._map.setZoom(this._toZoomLevel(this._posToSliderValue()));
|
||||
},
|
||||
|
||||
_onSliderClick: function(e){
|
||||
var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e);
|
||||
var offset = first.offsetY
|
||||
? first.offsetY
|
||||
: L.DomEvent.getMousePosition(first).y
|
||||
- L.DomUtil.getViewportOffset(this._knob).y;
|
||||
var value = this._posToSliderValue(offset - this._knob.offsetHeight / 2);
|
||||
this._snapToSliderValue(value);
|
||||
this._map.setZoom(this._toZoomLevel(value));
|
||||
},
|
||||
|
||||
_posToSliderValue: function(pos) {
|
||||
pos = isNaN(pos)
|
||||
? L.DomUtil.getPosition(this._knob).y
|
||||
: pos
|
||||
return Math.round( (this._sliderHeight - pos) / this.options.stepHeight);
|
||||
},
|
||||
|
||||
_snapToSliderValue: function(sliderValue) {
|
||||
if(this._knob) {
|
||||
sliderValue = isNaN(sliderValue)
|
||||
? this._getSliderValue()
|
||||
: sliderValue;
|
||||
var y = this._sliderHeight
|
||||
- (sliderValue * this.options.stepHeight);
|
||||
L.DomUtil.setPosition(this._knob, new L.Point(0, y));
|
||||
}
|
||||
},
|
||||
_toZoomLevel: function(sliderValue) {
|
||||
return sliderValue + this._map.getMinZoom();
|
||||
},
|
||||
_toSliderValue: function(zoomLevel) {
|
||||
return zoomLevel - this._map.getMinZoom();
|
||||
},
|
||||
_getSliderValue: function(){
|
||||
return this._toSliderValue(this._map.getZoom());
|
||||
}
|
||||
});
|
||||
|
||||
L.Map.mergeOptions({
|
||||
zoomControl: false,
|
||||
zoomsliderControl: true
|
||||
});
|
||||
|
||||
L.Map.addInitHook(function () {
|
||||
if (this.options.zoomsliderControl) {
|
||||
this.zoomsliderControl = new L.Control.Zoomslider();
|
||||
this.addControl(this.zoomsliderControl);
|
||||
}
|
||||
});
|
||||
|
||||
L.control.zoomslider = function (options) {
|
||||
return new L.Control.Zoomslider(options);
|
||||
};
|
||||
|
||||
|
||||
L.BoundedDraggable = L.Draggable.extend({
|
||||
initialize: function(element, dragStartTarget, bounds) {
|
||||
L.Draggable.prototype.initialize.call(this, element, dragStartTarget);
|
||||
this._bounds = bounds;
|
||||
this.on('predrag', function() {
|
||||
if(!this._bounds.contains(this._newPos)){
|
||||
this._newPos = this._fitPoint(this._newPos);
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
_fitPoint: function(point){
|
||||
var closest = new L.Point(
|
||||
Math.min(point.x, this._bounds.max.x),
|
||||
Math.min(point.y, this._bounds.max.y)
|
||||
);
|
||||
closest.x = Math.max(closest.x, this._bounds.min.x);
|
||||
closest.y = Math.max(closest.y, this._bounds.min.y);
|
||||
return closest;
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue