From: Tom Hughes Date: Fri, 23 Nov 2012 10:41:45 +0000 (+0000) Subject: Merge branch 'leaflet' X-Git-Tag: live~5199 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/7d92ec704786c2d887e1946f25746d6d70ee7ea8?hp=8f02fe82694434d4d6242e710330628f2629189d Merge branch 'leaflet' --- diff --git a/Vendorfile b/Vendorfile new file mode 100644 index 000000000..d7779f8f7 --- /dev/null +++ b/Vendorfile @@ -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 diff --git a/app/assets/images/arrow.png b/app/assets/images/arrow.png deleted file mode 100644 index aa9b58fc2..000000000 Binary files a/app/assets/images/arrow.png and /dev/null differ diff --git a/app/assets/openlayers/theme/openstreetmap/img/map_sprite.png b/app/assets/images/map_sprite.png similarity index 100% rename from app/assets/openlayers/theme/openstreetmap/img/map_sprite.png rename to app/assets/images/map_sprite.png diff --git a/app/assets/images/marker-blue.png b/app/assets/images/marker-blue.png new file mode 100644 index 000000000..7614b7c7f Binary files /dev/null and b/app/assets/images/marker-blue.png differ diff --git a/app/assets/images/marker-green.png b/app/assets/images/marker-green.png new file mode 100644 index 000000000..56a0b1c47 Binary files /dev/null and b/app/assets/images/marker-green.png differ diff --git a/app/assets/images/marker-red.png b/app/assets/images/marker-red.png new file mode 100644 index 000000000..46c70185a Binary files /dev/null and b/app/assets/images/marker-red.png differ diff --git a/app/assets/images/marker-yellow.png b/app/assets/images/marker-yellow.png new file mode 100644 index 000000000..eb6d6ef74 Binary files /dev/null and b/app/assets/images/marker-yellow.png differ diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index c52c072a7..8d6c13503 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -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 diff --git a/app/assets/javascripts/browse.js b/app/assets/javascripts/browse.js index 1c0b1b479..f92950c23 100644 --- a/app/assets/javascripts/browse.js +++ b/app/assets/javascripts/browse.js @@ -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(); } diff --git a/app/assets/javascripts/changeset.js b/app/assets/javascripts/changeset.js index ba6e541b6..6ad1fd7fa 100644 --- a/app/assets/javascripts/changeset.js +++ b/app/assets/javascripts/changeset.js @@ -1,83 +1,53 @@ $(document).ready(function () { - var highlight; + var rects = {}; + var map = createMap("changeset_list_map"); + var group = L.featureGroup().addTo(map); - function highlightChangeset(id) { - var feature = vectors.getFeatureByFid(id); - var bounds = feature.geometry.getBounds(); - - if (bounds.containsBounds(map.getExtent())) { - bounds = map.getExtent().scale(1.1); + $("[data-changeset]").each(function () { + var changeset = $(this).data('changeset'); + if (changeset.bbox) { + 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); } + }); - if (highlight) vectors.removeFeatures(highlight); - - highlight = new OpenLayers.Feature.Vector(bounds.toGeometry(), {}, { - strokeWidth: 2, - strokeColor: "#ee9900", - fillColor: "#ffff55", - fillOpacity: 0.5 - }); - - vectors.addFeatures(highlight); - + function highlightChangeset(id) { + rects[id].setStyle({fillOpacity: 0.5}); $("#tr-changeset-" + id).addClass("selected"); } function unHighlightChangeset(id) { - vectors.removeFeatures(highlight); - + rects[id].setStyle({fillOpacity: 0}); $("#tr-changeset-" + id).removeClass("selected"); } - var map = createMap("changeset_list_map", { - controls: [ - new OpenLayers.Control.Navigation(), - new OpenLayers.Control.Zoom(), - new OpenLayers.Control.SimplePanZoom() - ] - }); - - var bounds = new OpenLayers.Bounds(); - - $("[data-changeset]").each(function () { - var changeset = $(this).data('changeset'); - if (changeset.bbox) { - var bbox = new OpenLayers.Bounds(changeset.bbox.minlon, changeset.bbox.minlat, changeset.bbox.maxlon, changeset.bbox.maxlat); - - bounds.extend(bbox); - - addBoxToMap(bbox, changeset.id, true); + group.on({ + mouseover: function (e) { + highlightChangeset(e.layer.id); + }, + mouseout: function (e) { + unHighlightChangeset(e.layer.id); } }); - vectors.events.on({ - "featureselected": function(feature) { - highlightChangeset(feature.feature.fid); + $("[data-changeset]").on({ + mouseover: function () { + highlightChangeset($(this).data("changeset").id); }, - "featureunselected": function(feature) { - unHighlightChangeset(feature.feature.fid); + mouseout: function () { + unHighlightChangeset($(this).data("changeset").id); } }); - var selectControl = new OpenLayers.Control.SelectFeature(vectors, { - multiple: false, - hover: true - }); - map.addControl(selectControl); - selectControl.activate(); - var params = OSM.mapParams(); if (params.bbox) { - map.zoomToExtent(proj(new OpenLayers.Bounds(params.minlon, params.minlat, params.maxlon, params.maxlat))); + 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); - }); }); diff --git a/app/assets/javascripts/diary_entry.js b/app/assets/javascripts/diary_entry.js index c16930480..291c86523 100644 --- a/app/assets/javascripts/diary_entry.js +++ b/app/assets/javascripts/diary_entry.js @@ -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); }); }); diff --git a/app/assets/javascripts/embed.js b/app/assets/javascripts/embed.js new file mode 100644 index 000000000..914eabb5b --- /dev/null +++ b/app/assets/javascripts/embed.js @@ -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(); + } +}; diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 85f5dab0d..8afd3269d 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -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 expiry = new Date(); - - updatelinks(lonlat.lon, lonlat.lat, zoom, layers, extents.left, extents.bottom, extents.right, extents.top, params.object); + 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(); 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; diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js index 1792c8577..6371f559b 100644 --- a/app/assets/javascripts/index/browse.js +++ b/app/assets/javascripts/index/browse.js @@ -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); - $("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title')); - $("#sidebar_content").html(sidebarHtml); + dataLayer.isWayArea = function () { + return !areasHidden && L.OSM.DataLayer.prototype.isWayArea.apply(this, arguments); + }; - openSidebar(); + var locationFilter = new L.LocationFilter({ + enableButton: false, + adjustButton: false + }).addTo(map); - var vectors = new OpenLayers.Layer.Vector(); + locationFilter.on("change", getData); - 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); + $("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title')); + $("#sidebar_content").html(sidebarHtml); - map.events.register("moveend", map, updateData); - map.events.triggerEvent("moveend"); + openSidebar(); - $("#browse_select_view").click(useMap); + map.on("moveend", updateData); + updateData(); - $("#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 = []; + /*@cc_on + if (navigator.appVersion < 8) { + maxFeatures = 100; + } else if (navigator.appVersion < 9) { + maxFeatures = 500; + } + @*/ - if (!browseDataLayer || reload) { - var style = new OpenLayers.Style(); + $.ajax({ + url: url, + success: function (xml) { + clearStatus(); - 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 }); - } + $("#browse_content").empty(); + dataLayer.clearLayers(); + selectedLayer = null; - browseActiveFeature = null; - } + var features = dataLayer.buildFeatures(xml); - 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 - }); - } + function addFeatures() { + dataLayer.addData(features); - browseObjectList = $(JST["templates/browse/feature_list"]({ - features: features, - url: this.protocol.url - }))[0]; + layersById = {}; - loadObjectList(); - } + 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; - - for (var i = 0; i < layer.selectedFeatures.length; i++) { - var f = layer.selectedFeatures[i]; - layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default")); - } + var layer = layersById[$(this).data("feature-id")]; - onFeatureSelect(feature); + onSelect(layer); - 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(); } } -}); \ No newline at end of file +}); diff --git a/app/assets/javascripts/index/export.js b/app/assets/javascripts/index/export.js index 8696338ab..31a981ec9 100644 --- a/app/assets/javascripts/index/export.js +++ b/app/assets/javascripts/index/export.js @@ -11,44 +11,24 @@ $(document).ready(function () { } function startExport(sidebarHtml) { - var vectors, - box, - transform, - markerLayer, - markerControl; - - vectors = new OpenLayers.Layer.Vector("Vector Layer", { - displayInLayerSwitcher: false - }); - map.addLayer(vectors); - - box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { - handlerOptions: { - sides: 4, - snapAngle: 90, - irregular: true, - persist: true - } - }); - box.handler.callbacks.done = endDrag; - map.addControl(box); + var marker; - transform = new OpenLayers.Control.TransformFeature(vectors, { - rotate: false, - irregular: true - }); - transform.events.register("transformcomplete", transform, transformComplete); - map.addControl(transform); + var locationFilter = new L.LocationFilter({ + enableButton: false, + adjustButton: false + }).addTo(map); - map.events.register("moveend", map, mapMoved); - map.events.register("changebaselayer", map, htmlUrlChanged); + locationFilter.on("change", filterChanged); + + 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 boundsChanged() { - var bounds = getMercatorBounds(); + function getMercatorBounds() { + var bounds = getBounds(); + return L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()), + L.CRS.EPSG3857.project(bounds.getNorthEast())); + } - map.events.unregister("moveend", map, mapMoved); - map.zoomToExtent(bounds); + function boundsChanged() { + var bounds = getBounds(); - 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')); - - clearBox(); - box.activate(); - }; - - function endDrag(bbox) { - var bounds = bbox.getBounds(); - - map.events.unregister("moveend", map, mapMoved); - setBounds(bounds); - drawBox(bounds); - box.deactivate(); - validateControls(); + function enableFilter() { + if (!locationFilter.getBounds().isValid()) { + locationFilter.setBounds(map.getBounds().pad(-0.2)); + } - $("#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 = ''; // 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 += '
'+escaped.join("")+''; + html += '
'+escaped.join("")+''; $("#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) { diff --git a/app/assets/javascripts/index/key.js b/app/assets/javascripts/index/key.js index 1e4138b70..9722cf4cf 100644 --- a/app/assets/javascripts/index/key.js +++ b/app/assets/javascripts/index/key.js @@ -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); }); }); diff --git a/app/assets/javascripts/map.js.erb b/app/assets/javascripts/map.js.erb index c06c9c8ea..393e9cae7 100644 --- a/app/assets/javascripts/map.js.erb +++ b/app/assets/javascripts/map.js.erb @@ -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 Andy Allan", + keyid: "cyclemap", + layerCode: "C", + name: I18n.t("javascripts.map.base.cycle_map") + }, + { + klass: L.OSM.TransportMap, + attribution: "Tiles courtesy of Andy Allan", + keyid: "transportmap", + layerCode: "T", + name: I18n.t("javascripts.map.base.transport_map") + }, + { + klass: L.OSM.MapQuestOpen, + attribution: "Tiles courtesy of MapQuest ", + keyid: "mapquest", + layerCode: "Q", + name: I18n.t("javascripts.map.base.mapquest") + } +]; function createMap(divName, options) { - options = 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' %>" - }); - - 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); - - var cyclemap = new OpenLayers.Layer.OSM.CycleMap(I18n.t("javascripts.map.base.cycle_map"), { - attribution: "Tiles courtesy of Andy Allan", - keyid: "cyclemap", - displayOutsideMaxExtent: true, - wrapDateLine: true, - layerCode: "C" - }); - map.addLayer(cyclemap); - - var transportmap = new OpenLayers.Layer.OSM.TransportMap(I18n.t("javascripts.map.base.transport_map"), { - attribution: "Tiles courtesy of Andy Allan", - keyid: "transportmap", - displayOutsideMaxExtent: true, - wrapDateLine: true, - layerCode: "T" - }); - map.addLayer(transportmap); - - 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 MapQuest ", - keyid: "mapquest", - displayOutsideMaxExtent: true, - wrapDateLine: true, - numZoomLevels: 19, - layerCode: "Q" - }); - map.addLayer(mapquest); - - markers = new OpenLayers.Layer.Markers("Markers", { - displayInLayerSwitcher: false, - numZoomLevels: 20, - projection: "EPSG:900913" - }); - map.addLayer(markers); - - map.dataLayer = new OpenLayers.Layer(I18n.t('browse.start_rjs.data_layer_name'), { - visibility: false, - displayInLayerSwitcher: false - }); - map.addLayer(map.dataLayer); - - $("#" + divName).on("resized", function () { - map.updateSize(); - }); - - return map; -} + options = $.extend({zoomControl: true, panZoomControl: true, layerControl: true}, options); -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); + map = L.map(divName, $.extend({}, options, {panControl: false, zoomsliderControl: false, maxZoom: 18})); - return icon; -} + if (map.attributionControl) { + map.attributionControl.setPrefix(''); + } -function addMarkerToMap(position, icon, description) { - var marker = new OpenLayers.Marker(proj(position), icon); + if (options.panZoomControl) { + new L.Control.Pan().addTo(map); + new L.Control.Zoomslider({stepHeight: 7}).addTo(map); + } - markers.addMarker(marker); + var layersControl = L.control.layers(); - if (description) { - marker.events.register("mouseover", marker, function() { - openMapPopup(marker, description); - }); - } + if (options.layerControl) { + layersControl.addTo(map); + } - return marker; + 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); + } + + layers[0].layer.addTo(map); + + $("#" + divName).on("resized", function () { + map.invalidateSize(); + }); + + return map; +} + +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; - - 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(); - } - } + } + }); + + var bounds = layer.getBounds(); + + 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; - - vectors.addFeatures(box); - - return box; -} +function addBoxToMap(bounds) { + var box = L.rectangle(bounds, { + weight: 2, + color: '#e90', + fillOpacity: 0 + }); -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; -} + box.addTo(map); -function closeMapPopup() { - if (popup) { - map.removePopup(popup); - } + return box; } -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 < map.layers.length; i++) { - if (map.layers[i].layerCode && map.layers[i].getVisibility()) { - layerConfig += map.layers[i].layerCode; - } - } + for (var i = 0; i < layers.length; i++) { + if (map.hasLayer(layers[i].layer)) { + return 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); + } + } } diff --git a/app/assets/javascripts/openlayers.js.erb b/app/assets/javascripts/openlayers.js.erb deleted file mode 100644 index 66d991f82..000000000 --- a/app/assets/javascripts/openlayers.js.erb +++ /dev/null @@ -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')); diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js index 77cb86a8d..25456d04e 100644 --- a/app/assets/javascripts/user.js +++ b/app/assets/javascripts/user.js @@ -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); - - if (marker) { - removeMarkerFromMap(marker); - } + $('#home_lat').val(e.latlng.lat); + $('#home_lon').val(e.latlng.lng); - 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); } }); } diff --git a/app/assets/openlayers/SimpleLayerSwitcher.js b/app/assets/openlayers/SimpleLayerSwitcher.js deleted file mode 100644 index db3c720bb..000000000 --- a/app/assets/openlayers/SimpleLayerSwitcher.js +++ /dev/null @@ -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 and a . - * 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.SimplePanZoom = OpenLayers.Class(OpenLayers.Control.PanZoom, { - - /** - * APIProperty: zoomStopWidth - */ - zoomStopWidth: 18, - - /** - * APIProperty: zoomStopHeight - */ - zoomStopHeight: 7, - - /** - * Property: slider - */ - slider: null, - - /** - * Property: sliderEvents - * {} - */ - 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 - * {} - */ - mouseDragStart: null, - - /** - * Property: deltaY - * {Number} The cumulative vertical pixel offset during a zoom bar drag. - */ - deltaY: null, - - /** - * Property: zoomStart - * {} - */ - 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 - {} - */ - 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 - {} - */ - 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 - {} 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 - {} - */ - passEventToSlider:function(evt) { - this.sliderEvents.handleBrowserEvent(evt); - }, - - /* - * Method: zoomBarDown - * event listener for clicks on the slider - * - * Parameters: - * evt - {} - */ - 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 - {} - */ - 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 - {} - */ - 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" -}); diff --git a/app/assets/openlayers/theme/openstreetmap/SimpleLayerSwitcher.css.scss b/app/assets/openlayers/theme/openstreetmap/SimpleLayerSwitcher.css.scss deleted file mode 100644 index 48e730f6c..000000000 --- a/app/assets/openlayers/theme/openstreetmap/SimpleLayerSwitcher.css.scss +++ /dev/null @@ -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; -} diff --git a/app/assets/openlayers/theme/openstreetmap/SimplePanZoom.css.scss b/app/assets/openlayers/theme/openstreetmap/SimplePanZoom.css.scss deleted file mode 100644 index 2788221b0..000000000 --- a/app/assets/openlayers/theme/openstreetmap/SimplePanZoom.css.scss +++ /dev/null @@ -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; -} diff --git a/app/assets/openlayers/theme/openstreetmap/img/carat.png b/app/assets/openlayers/theme/openstreetmap/img/carat.png deleted file mode 100644 index 7fdf17e32..000000000 Binary files a/app/assets/openlayers/theme/openstreetmap/img/carat.png and /dev/null differ diff --git a/app/assets/openlayers/theme/openstreetmap/img/missing-tile.png b/app/assets/openlayers/theme/openstreetmap/img/missing-tile.png deleted file mode 100644 index e6c54616d..000000000 Binary files a/app/assets/openlayers/theme/openstreetmap/img/missing-tile.png and /dev/null differ diff --git a/app/assets/openlayers/theme/openstreetmap/style.css.scss b/app/assets/openlayers/theme/openstreetmap/style.css.scss deleted file mode 100644 index bd755a53a..000000000 --- a/app/assets/openlayers/theme/openstreetmap/style.css.scss +++ /dev/null @@ -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? diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 2837270fd..217bb0c66 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -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; diff --git a/app/assets/stylesheets/embed.css.scss b/app/assets/stylesheets/embed.css.scss new file mode 100644 index 000000000..024f73d36 --- /dev/null +++ b/app/assets/stylesheets/embed.css.scss @@ -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"); +} diff --git a/app/assets/stylesheets/large.css b/app/assets/stylesheets/large.css index ca58badc4..5ffaee985 100644 --- a/app/assets/stylesheets/large.css +++ b/app/assets/stylesheets/large.css @@ -8,6 +8,6 @@ /* Rules for OpenLayers maps */ -.olControlZoom { +.leaflet-control-zoom { display: none; } diff --git a/app/assets/stylesheets/leaflet-all.css.scss b/app/assets/stylesheets/leaflet-all.css.scss new file mode 100644 index 000000000..3d9c381c0 --- /dev/null +++ b/app/assets/stylesheets/leaflet-all.css.scss @@ -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; +} diff --git a/app/assets/stylesheets/leaflet.pan.css.scss b/app/assets/stylesheets/leaflet.pan.css.scss new file mode 100644 index 000000000..4b5aa65be --- /dev/null +++ b/app/assets/stylesheets/leaflet.pan.css.scss @@ -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; +} diff --git a/app/assets/stylesheets/leaflet.zoom.css.scss b/app/assets/stylesheets/leaflet.zoom.css.scss new file mode 100644 index 000000000..1482e359a --- /dev/null +++ b/app/assets/stylesheets/leaflet.zoom.css.scss @@ -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; +} diff --git a/app/assets/stylesheets/print.css b/app/assets/stylesheets/print.css index 367bd4fa5..72c3255eb 100644 --- a/app/assets/stylesheets/print.css +++ b/app/assets/stylesheets/print.css @@ -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; diff --git a/app/assets/stylesheets/small.css.scss b/app/assets/stylesheets/small.css.scss index ba9e59d96..e690924b5 100644 --- a/app/assets/stylesheets/small.css.scss +++ b/app/assets/stylesheets/small.css.scss @@ -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; } diff --git a/app/controllers/export_controller.rb b/app/controllers/export_controller.rb index 2102a5704..074a92ce8 100644 --- a/app/controllers/export_controller.rb +++ b/app/controllers/export_controller.rb @@ -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 diff --git a/app/views/browse/start.html.erb b/app/views/browse/start.html.erb index 3777d710a..b0315dad9 100644 --- a/app/views/browse/start.html.erb +++ b/app/views/browse/start.html.erb @@ -1,11 +1,9 @@