diff --git a/css/ol.css b/css/ol.css index 8b3c61de35..e2714500f3 100644 --- a/css/ol.css +++ b/css/ol.css @@ -1,53 +1,3 @@ -.ol-attribution { - position: absolute; - text-align: right; - bottom: 0; - right: 0; - padding: 6px; - color: #000000; - color: rgba(238,238,238,1); - background: rgba(0,60,136,0.3); -} -.ol-attribution a { - text-decoration: none; - color: #7b98bc; - color: rgba(255,255,255,1); -} - -.ol-attribution ul { - margin: 0; - padding: 0; - font-size: 10px; - line-height: 12px; -} -.ol-attribution li { - display: inline; - list-style: none; - line-height: inherit; -} -.ol-attribution li:not(:last-child):after { - content: "\2003"; -} -.ol-attribution-bing-tos { - float:right; - padding-top: 2px; - white-space: nowrap; -} - -.ol-logo { - bottom: 0; - left: 0; - padding: 2px; - position: absolute; -} -.ol-logo ul { - margin: 0; - padding: 0; -} -.ol-logo ul li { - display: inline; - list-style: none; -} .ol-mouse-position { top: 8px; @@ -226,11 +176,65 @@ button.ol-full-screen-true:after { } .ol-rotate .ol-has-tooltip:hover [role=tooltip], .ol-rotate .ol-has-tooltip:focus [role=tooltip], +.ol-attribution .ol-has-tooltip:hover [role=tooltip], +.ol-attribution .ol-has-tooltip:focus [role=tooltip], .ol-full-screen .ol-has-tooltip:hover [role=tooltip], .ol-full-screen .ol-has-tooltip:focus [role=tooltip] { right: 2.2em; left: auto; border-radius: 4px 0 0 4px; + border-left-width: 3px; + border-right-width: 0; +} + +.ol-attribution { + text-align: right; + bottom: .5em; + right: .5em; +} + +.ol-attribution ul { + margin: 0; + padding: 0 .5em; + font-size: .7rem; + line-height: 1.375em; + color: #000; + text-shadow: 0 0 2px #fff; +} +.ol-attribution li { + display: inline; + list-style: none; + line-height: inherit; +} +.ol-attribution li:not(:last-child):after { + content: " "; +} +.ol-attribution img { + max-height: 2em; +} +.ol-attribution ul, .ol-attribution button { + display: inline-block; +} +.ol-attribution:not(.ol-collapsed) button:hover [role=tooltip], +.ol-attribution.ol-collapsed ul { + display: none; +} +.ol-attribution:not(.ol-collapsed) { + background: rgba(255,255,255,0.8); +} +.ol-attribution.ol-uncollapsible { + bottom: 0; + right: 0; + border-radius: 4px 0 0; + height: 1.1em; + line-height: 1em; +} +.ol-attribution.ol-uncollapsible img { + margin-top: -.2em; + max-height: 1.6em; +} +.ol-attribution.ol-uncollapsible button { + display: none; } .ol-zoomslider { diff --git a/examples/accessible.js b/examples/accessible.js index 2d36f4c2f8..53a80398c1 100644 --- a/examples/accessible.js +++ b/examples/accessible.js @@ -1,5 +1,6 @@ goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.control'); goog.require('ol.layer.Tile'); goog.require('ol.source.OSM'); @@ -12,6 +13,11 @@ var map = new ol.Map({ ], renderer: exampleNS.getRendererFromQueryString(), target: 'map', + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }), view: new ol.View({ center: [0, 0], zoom: 2 diff --git a/examples/animation.js b/examples/animation.js index 8965908c0c..2db3f7feab 100644 --- a/examples/animation.js +++ b/examples/animation.js @@ -1,6 +1,7 @@ goog.require('ol.Map'); goog.require('ol.View'); goog.require('ol.animation'); +goog.require('ol.control'); goog.require('ol.layer.Tile'); goog.require('ol.proj'); goog.require('ol.source.OSM'); @@ -55,6 +56,11 @@ var map = new ol.Map({ ], renderer: exampleNS.getRendererFromQueryString(), target: 'map', + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }), view: view }); diff --git a/examples/attributions.html b/examples/attributions.html new file mode 100644 index 0000000000..50da53c693 --- /dev/null +++ b/examples/attributions.html @@ -0,0 +1,51 @@ + + + + + + + + + + + Attributions example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Attributions example

+

Example of a attributions visibily change on map resize, to collapse them on small maps.

+
+

See the attributions.js source to see how this is done.

+
+
attributions, openstreetmap
+
+ +
+ +
+ + + + + + + diff --git a/examples/attributions.js b/examples/attributions.js new file mode 100644 index 0000000000..a48645f0c8 --- /dev/null +++ b/examples/attributions.js @@ -0,0 +1,33 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.control'); +goog.require('ol.control.Attribution'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.OSM'); + +var attribution = new ol.control.Attribution({ + collapsible: false +}); +var map = new ol.Map({ + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM() + }) + ], + controls: ol.control.defaults({ attribution: false }).extend([attribution]), + renderer: exampleNS.getRendererFromQueryString(), + target: 'map', + view: new ol.View({ + center: [0, 0], + zoom: 2 + }) +}); + +function checkSize() { + var small = map.getSize()[0] < 600; + attribution.setCollapsible(small); + attribution.setCollapsed(small); +} + +$(window).on('resize', checkSize); +checkSize(); diff --git a/examples/bind-input.js b/examples/bind-input.js index 421e721156..0264930120 100644 --- a/examples/bind-input.js +++ b/examples/bind-input.js @@ -1,6 +1,7 @@ goog.require('ol.BrowserFeature'); goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.control'); goog.require('ol.dom.Input'); goog.require('ol.layer.Tile'); goog.require('ol.source.OSM'); @@ -29,6 +30,11 @@ var map = new ol.Map({ layers: [layer], renderer: exampleNS.getRendererFromQueryString(), target: 'map', + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }), view: view }); diff --git a/examples/canvas-tiles.js b/examples/canvas-tiles.js index 120b0a4497..278fe22e31 100644 --- a/examples/canvas-tiles.js +++ b/examples/canvas-tiles.js @@ -1,5 +1,6 @@ goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.control'); goog.require('ol.layer.Tile'); goog.require('ol.proj'); goog.require('ol.source.OSM'); @@ -23,6 +24,11 @@ var map = new ol.Map({ ], renderer: exampleNS.getRendererFromQueryString(), target: 'map', + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }), view: new ol.View({ center: ol.proj.transform( [-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'), diff --git a/examples/center.html b/examples/center.html index 20eff037c4..3dc47ea590 100644 --- a/examples/center.html +++ b/examples/center.html @@ -21,10 +21,6 @@ top: 178px; left: 158px; } - div.ol-logo { - left: 150px; - bottom: 30px; - } div.ol-attribution { bottom: 30px; right: 50px; diff --git a/examples/center.js b/examples/center.js index 64dd9cad97..2c63b99bf8 100644 --- a/examples/center.js +++ b/examples/center.js @@ -1,5 +1,6 @@ goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.control'); goog.require('ol.geom.Point'); goog.require('ol.geom.SimpleGeometry'); goog.require('ol.layer.Tile'); @@ -50,6 +51,11 @@ var map = new ol.Map({ vectorLayer ], target: 'map', + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }), view: view }); diff --git a/examples/custom-controls.js b/examples/custom-controls.js index ceca3ad3ba..8181ecafc2 100644 --- a/examples/custom-controls.js +++ b/examples/custom-controls.js @@ -62,7 +62,11 @@ ol.inherits(app.RotateNorthControl, ol.control.Control); var map = new ol.Map({ - controls: ol.control.defaults().extend([ + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }).extend([ new app.RotateNorthControl() ]), layers: [ diff --git a/examples/device-orientation.js b/examples/device-orientation.js index d905ec97d2..8f3569367d 100644 --- a/examples/device-orientation.js +++ b/examples/device-orientation.js @@ -1,6 +1,7 @@ goog.require('ol.DeviceOrientation'); goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.control'); goog.require('ol.dom.Input'); goog.require('ol.layer.Tile'); goog.require('ol.proj'); @@ -21,6 +22,11 @@ var map = new ol.Map({ ], renderer: exampleNS.getRendererFromQueryString(), target: 'map', + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }), view: view }); diff --git a/examples/export-map.js b/examples/export-map.js index 747c5dedb7..134972d1b7 100644 --- a/examples/export-map.js +++ b/examples/export-map.js @@ -1,5 +1,6 @@ goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.control'); goog.require('ol.layer.Tile'); goog.require('ol.source.OSM'); @@ -11,6 +12,11 @@ var map = new ol.Map({ }) ], target: 'map', + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }), view: new ol.View({ center: [0, 0], zoom: 2 diff --git a/examples/geojson.js b/examples/geojson.js index 1f1dea970b..4674cf4a33 100644 --- a/examples/geojson.js +++ b/examples/geojson.js @@ -1,6 +1,7 @@ goog.require('ol.Feature'); goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.control'); goog.require('ol.geom.Circle'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); @@ -188,6 +189,11 @@ var map = new ol.Map({ vectorLayer ], target: 'map', + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }), view: new ol.View({ center: [0, 0], zoom: 2 diff --git a/examples/geolocation-orientation.js b/examples/geolocation-orientation.js index 4ac409b15b..99e653fcda 100644 --- a/examples/geolocation-orientation.js +++ b/examples/geolocation-orientation.js @@ -2,6 +2,7 @@ goog.require('ol.Geolocation'); goog.require('ol.Map'); goog.require('ol.Overlay'); goog.require('ol.View'); +goog.require('ol.control'); goog.require('ol.geom.LineString'); goog.require('ol.layer.Tile'); goog.require('ol.proj'); @@ -21,6 +22,11 @@ var map = new ol.Map({ }) ], target: 'map', + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }), view: view }); diff --git a/examples/geolocation.js b/examples/geolocation.js index 3d99af6f03..af65afd0dd 100644 --- a/examples/geolocation.js +++ b/examples/geolocation.js @@ -3,6 +3,7 @@ goog.require('ol.FeatureOverlay'); goog.require('ol.Geolocation'); goog.require('ol.Map'); goog.require('ol.View'); +goog.require('ol.control'); goog.require('ol.dom.Input'); goog.require('ol.geom.Point'); goog.require('ol.layer.Tile'); @@ -21,6 +22,11 @@ var map = new ol.Map({ }) ], target: 'map', + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }), view: view }); diff --git a/examples/google-map.html b/examples/google-map.html index fd82495071..463c90834f 100644 --- a/examples/google-map.html +++ b/examples/google-map.html @@ -10,9 +10,6 @@