diff --git a/css/ol.css b/css/ol.css index e2714500f3..a76ab56407 100644 --- a/css/ol.css +++ b/css/ol.css @@ -219,6 +219,9 @@ button.ol-full-screen-true:after { .ol-attribution.ol-collapsed ul { display: none; } +.ol-attribution.ol-logo-only ul { + display: block; +} .ol-attribution:not(.ol-collapsed) { background: rgba(255,255,255,0.8); } @@ -229,10 +232,17 @@ button.ol-full-screen-true:after { height: 1.1em; line-height: 1em; } +.ol-attribution.ol-logo-only { + background: transparent; + bottom: .4em; + height: 1.1em; + line-height: 1em; +} .ol-attribution.ol-uncollapsible img { margin-top: -.2em; max-height: 1.6em; } +.ol-attribution.ol-logo-only button, .ol-attribution.ol-uncollapsible button { display: none; } diff --git a/externs/olx.js b/externs/olx.js index f00d92a889..ad1c275762 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -98,6 +98,14 @@ olx.GeolocationOptions.prototype.trackingOptions; olx.GeolocationOptions.prototype.projection; +/** + * Object literal with config options for the map logo. + * @typedef {{href: (string), src: (string)}} + * @api + */ +olx.LogoOptions; + + /** * Object literal with config options for the map. * @typedef {{controls: (ol.Collection|Array.|undefined), @@ -106,7 +114,7 @@ olx.GeolocationOptions.prototype.projection; * interactions: (ol.Collection|Array.|undefined), * keyboardEventTarget: (Element|Document|string|undefined), * layers: (Array.|ol.Collection|undefined), - * ol3Logo: (boolean|undefined), + * logo: (boolean|string|olx.LogoOptions|undefined), * overlays: (ol.Collection|Array.|undefined), * renderer: (ol.RendererType|Array.|string|undefined), * target: (Element|string|undefined), @@ -168,10 +176,14 @@ olx.MapOptions.prototype.layers; /** - * Show ol3 logo. Default is `true`. - * @type {boolean|undefined} + * The map logo. A logo to be displayed on the map at all times. If a string is + * provided, it will be set as the image source of the logo. If an object is + * provided, the `src` property should be the URL for an image and the `href` + * property should be a URL for creating a link. To disable the map logo, set + * the option to `false`. By default, the OpenLayers 3 logo is shown. + * @type {boolean|string|olx.LogoOptions|undefined} */ -olx.MapOptions.prototype.ol3Logo; +olx.MapOptions.prototype.logo; /** @@ -2559,7 +2571,7 @@ olx.source.BingMapsOptions.prototype.tileLoadFunction; * @typedef {{attributions: (Array.|undefined), * extent: (ol.Extent|undefined), * format: ol.format.Feature, - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * projection: ol.proj.ProjectionLike}} * @api */ @@ -2589,7 +2601,7 @@ olx.source.FormatVectorOptions.prototype.format; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.FormatVectorOptions.prototype.logo; @@ -2605,7 +2617,7 @@ olx.source.FormatVectorOptions.prototype.projection; * @typedef {{attributions: (Array.|undefined), * defaultProjection: ol.proj.ProjectionLike, * extent: (ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * object: (GeoJSONObject|undefined), * projection: ol.proj.ProjectionLike, * text: (string|undefined), @@ -2639,7 +2651,7 @@ olx.source.GeoJSONOptions.prototype.extent; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.GeoJSONOptions.prototype.logo; @@ -2684,7 +2696,7 @@ olx.source.GeoJSONOptions.prototype.urls; * @typedef {{attributions: (Array.|undefined), * doc: (Document|undefined), * extent: (ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * node: (Node|undefined), * projection: ol.proj.ProjectionLike, * text: (string|undefined), @@ -2718,7 +2730,7 @@ olx.source.GPXOptions.prototype.extent; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.GPXOptions.prototype.logo; @@ -2763,7 +2775,7 @@ olx.source.GPXOptions.prototype.urls; * @typedef {{attributions: (Array.|undefined), * crossOrigin: (null|string|undefined), * extent: (ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * opaque: (boolean|undefined), * projection: ol.proj.ProjectionLike, * tileClass: (function(new: ol.ImageTile, ol.TileCoord, @@ -2801,7 +2813,7 @@ olx.source.TileImageOptions.prototype.extent; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.TileImageOptions.prototype.logo; @@ -2865,7 +2877,7 @@ olx.source.TileImageOptions.prototype.tileUrlFunction; * defaultProjection: ol.proj.ProjectionLike, * extent: (ol.Extent|undefined), * format: ol.format.Feature, - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * object: (GeoJSONObject|undefined), * projection: ol.proj.ProjectionLike, * tileGrid: ol.tilegrid.TileGrid, @@ -2907,7 +2919,7 @@ olx.source.TileVectorOptions.prototype.format; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.TileVectorOptions.prototype.logo; @@ -2960,7 +2972,7 @@ olx.source.TileVectorOptions.prototype.urls; * @typedef {{attributions: (Array.|undefined), * defaultProjection: ol.proj.ProjectionLike, * extent: (ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * object: (GeoJSONObject|undefined), * projection: ol.proj.ProjectionLike, * text: (string|undefined), @@ -2993,7 +3005,7 @@ olx.source.TopoJSONOptions.prototype.extent; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.TopoJSONOptions.prototype.logo; @@ -3168,7 +3180,7 @@ olx.source.MapGuideOptions.prototype.params; * defaultStyle: (Array.|undefined), * doc: (Document|undefined), * extent: (ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * node: (Node|undefined), * projection: ol.proj.ProjectionLike, * text: (string|undefined), @@ -3209,7 +3221,7 @@ olx.source.KMLOptions.prototype.extent; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.KMLOptions.prototype.logo; @@ -3354,7 +3366,7 @@ olx.source.OSMOptions.prototype.url; * defaultStyle: (Array.|undefined), * doc: (Document|undefined), * extent: (ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * node: (Node|undefined), * projection: ol.proj.ProjectionLike, * reprojectTo: ol.proj.ProjectionLike, @@ -3396,7 +3408,7 @@ olx.source.OSMXMLOptions.prototype.extent; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.OSMXMLOptions.prototype.logo; @@ -3447,7 +3459,7 @@ olx.source.OSMXMLOptions.prototype.urls; * @typedef {{attributions: (Array.|undefined), * canvasFunction: ol.CanvasFunctionType, * extent: (ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * projection: ol.proj.ProjectionLike, * ratio: (number|undefined), * resolutions: (Array.|undefined), @@ -3487,7 +3499,7 @@ olx.source.ImageCanvasOptions.prototype.extent; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.ImageCanvasOptions.prototype.logo; @@ -3525,7 +3537,7 @@ olx.source.ImageCanvasOptions.prototype.state; /** * @typedef {{attributions: (Array.|undefined), * extent: (ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * projection: ol.proj.ProjectionLike, * ratio: (number|undefined), * resolutions: (Array.|undefined), @@ -3552,7 +3564,7 @@ olx.source.ImageVectorOptions.prototype.extent; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.ImageVectorOptions.prototype.logo; @@ -3601,7 +3613,7 @@ olx.source.ImageVectorOptions.prototype.style; * extent: (ol.Extent|undefined), * hidpi: (boolean|undefined), * serverType: (ol.source.wms.ServerType|string|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * params: Object., * projection: ol.proj.ProjectionLike, * ratio: (number|undefined), @@ -3651,7 +3663,7 @@ olx.source.ImageWMSOptions.prototype.serverType; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.ImageWMSOptions.prototype.logo; @@ -3754,7 +3766,7 @@ olx.source.StamenOptions.prototype.url; * extent: (ol.Extent|undefined), * imageExtent: (ol.Extent|undefined), * imageSize: (ol.Size|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * projection: ol.proj.ProjectionLike, * url: string}} * @api @@ -3799,7 +3811,7 @@ olx.source.ImageStaticOptions.prototype.imageSize; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.ImageStaticOptions.prototype.logo; @@ -3824,7 +3836,7 @@ olx.source.ImageStaticOptions.prototype.url; * format: ol.format.Feature, * loader: function(this: ol.source.ServerVector, ol.Extent, number, ol.proj.Projection), * strategy: (function(ol.Extent, number): Array.|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * projection: ol.proj.ProjectionLike}} * @api */ @@ -3869,7 +3881,7 @@ olx.source.ServerVectorOptions.prototype.strategy; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.ServerVectorOptions.prototype.logo; @@ -3918,7 +3930,7 @@ olx.source.TileJSONOptions.prototype.url; * extent: (ol.Extent|undefined), * gutter: (number|undefined), * hidpi: (boolean|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * tileGrid: (ol.tilegrid.TileGrid|undefined), * maxZoom: (number|undefined), * projection: ol.proj.ProjectionLike, @@ -3985,7 +3997,7 @@ olx.source.TileWMSOptions.prototype.hidpi; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.TileWMSOptions.prototype.logo; @@ -4049,7 +4061,7 @@ olx.source.TileWMSOptions.prototype.urls; * @typedef {{attributions: (Array.|undefined), * extent: (ol.Extent|undefined), * features: (Array.|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * projection: ol.proj.ProjectionLike, * state: (ol.source.State|string|undefined)}} * @api @@ -4080,7 +4092,7 @@ olx.source.VectorOptions.prototype.features; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.VectorOptions.prototype.logo; @@ -4105,7 +4117,7 @@ olx.source.VectorOptions.prototype.state; * doc: (Document|undefined), * extent: (ol.Extent|undefined), * format: ol.format.Feature, - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * node: (Node|undefined), * object: (Object|undefined), * projection: ol.proj.ProjectionLike, @@ -4154,7 +4166,7 @@ olx.source.StaticVectorOptions.prototype.format; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.StaticVectorOptions.prototype.logo; @@ -4205,7 +4217,7 @@ olx.source.StaticVectorOptions.prototype.urls; * @typedef {{attributions: (Array.|undefined), * crossOrigin: (string|null|undefined), * extent: (ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * tileGrid: ol.tilegrid.WMTS, * projection: ol.proj.ProjectionLike, * requestEncoding: (ol.source.WMTSRequestEncoding|undefined), @@ -4248,7 +4260,7 @@ olx.source.WMTSOptions.prototype.extent; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.WMTSOptions.prototype.logo; @@ -4358,7 +4370,7 @@ olx.source.WMTSOptions.prototype.urls; * @typedef {{attributions: (Array.|undefined), * crossOrigin: (null|string|undefined), * extent: (ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * projection: ol.proj.ProjectionLike, * maxZoom: (number|undefined), * minZoom: (number|undefined), @@ -4396,7 +4408,7 @@ olx.source.XYZOptions.prototype.extent; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.XYZOptions.prototype.logo; @@ -4471,7 +4483,7 @@ olx.source.XYZOptions.prototype.wrapX; /** * @typedef {{attributions: (Array.|undefined), * crossOrigin: (null|string|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * url: !string, * tierSizeCalculation: (string|undefined), * size: ol.Size}} @@ -4496,7 +4508,7 @@ olx.source.ZoomifyOptions.prototype.crossOrigin; /** * Logo. - * @type {string|undefined} + * @type{string|olx.LogoOptions|undefined} */ olx.source.ZoomifyOptions.prototype.logo; diff --git a/src/ol/control/attributioncontrol.js b/src/ol/control/attributioncontrol.js index d12e054404..6239585d5d 100644 --- a/src/ol/control/attributioncontrol.js +++ b/src/ol/control/attributioncontrol.js @@ -96,7 +96,8 @@ ol.control.Attribution = function(opt_options) { */ this.labelSpan_ = label; var button = goog.dom.createDom(goog.dom.TagName.BUTTON, { - 'class': 'ol-has-tooltip' + 'class': 'ol-has-tooltip', + 'type': 'button' }, this.labelSpan_); goog.dom.appendChild(button, tip); @@ -272,6 +273,12 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) { goog.style.setElementShown(this.element, renderVisible); this.renderedVisible_ = renderVisible; } + if (renderVisible && + goog.object.isEmpty(this.attributionElementRenderedVisible_)) { + goog.dom.classlist.add(this.element, 'ol-logo-only'); + } else { + goog.dom.classlist.remove(this.element, 'ol-logo-only'); + } this.insertLogos_(frameState); @@ -354,7 +361,7 @@ ol.control.Attribution.prototype.handleToggle_ = function() { /** - * @return {boolean} True is the widget is collapsible. + * @return {boolean} True if the widget is collapsible. * @api */ ol.control.Attribution.prototype.getCollapsible = function() { @@ -363,7 +370,7 @@ ol.control.Attribution.prototype.getCollapsible = function() { /** - * @param {boolean} collapsible True is the widget is collapsible. + * @param {boolean} collapsible True if the widget is collapsible. * @api */ ol.control.Attribution.prototype.setCollapsible = function(collapsible) { @@ -379,7 +386,7 @@ ol.control.Attribution.prototype.setCollapsible = function(collapsible) { /** - * @param {boolean} collapsed True is the widget is collapsed. + * @param {boolean} collapsed True if the widget is collapsed. * @api */ ol.control.Attribution.prototype.setCollapsed = function(collapsed) { @@ -391,7 +398,7 @@ ol.control.Attribution.prototype.setCollapsed = function(collapsed) { /** - * @return {boolean} True is the widget is collapsed. + * @return {boolean} True if the widget is collapsed. * @api */ ol.control.Attribution.prototype.getCollapsed = function() { diff --git a/src/ol/map.js b/src/ol/map.js index 5b52b621ce..9e3841d942 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -172,9 +172,9 @@ ol.Map = function(options) { /** * @private - * @type {boolean} + * @type {Object} */ - this.ol3Logo_ = optionsInternal.ol3Logo; + this.logos_ = optionsInternal.logos; /** * @private @@ -1209,7 +1209,7 @@ ol.Map.prototype.renderFrame_ = function(time) { index: this.frameIndex_++, layerStates: layerStates, layerStatesArray: layerStatesArray, - logos: {}, + logos: this.logos_, pixelRatio: this.pixelRatio_, pixelToCoordinateMatrix: this.pixelToCoordinateMatrix_, postRenderFunctions: [], @@ -1222,9 +1222,6 @@ ol.Map.prototype.renderFrame_ = function(time) { viewHints: viewHints, wantedTiles: {} }); - if (this.ol3Logo_) { - frameState.logos[ol.OL3_LOGO_URL] = ol.OL3_URL; - } } var preRenderFunctions = this.preRenderFunctions_; @@ -1382,7 +1379,7 @@ ol.Map.prototype.unskipFeature = function(feature) { * deviceOptions: olx.DeviceOptions, * interactions: ol.Collection, * keyboardEventTarget: (Element|Document), - * ol3Logo: boolean, + * logos: Object, * overlays: ol.Collection, * rendererConstructor: * function(new: ol.renderer.Map, Element, ol.Map), @@ -1414,7 +1411,20 @@ ol.Map.createOptionsInternal = function(options) { */ var values = {}; - var ol3Logo = goog.isDef(options.ol3Logo) ? options.ol3Logo : true; + var logos = {}; + if (!goog.isDef(options.logo) || + (goog.isBoolean(options.logo) && options.logo)) { + logos[ol.OL3_LOGO_URL] = ol.OL3_URL; + } else { + var logo = options.logo; + if (goog.isString(logo)) { + logos[logo] = ''; + } else if (goog.isObject(logo)) { + goog.asserts.assertString(logo.href); + goog.asserts.assertString(logo.src); + logos[logo.src] = logo.href; + } + } var layerGroup = (options.layers instanceof ol.layer.Group) ? options.layers : new ol.layer.Group({layers: options.layers}); @@ -1512,7 +1522,7 @@ ol.Map.createOptionsInternal = function(options) { deviceOptions: deviceOptions, interactions: interactions, keyboardEventTarget: keyboardEventTarget, - ol3Logo: ol3Logo, + logos: logos, overlays: overlays, rendererConstructor: rendererConstructor, values: values diff --git a/src/ol/renderer/layerrenderer.js b/src/ol/renderer/layerrenderer.js index d6ac324095..a4d0bb1966 100644 --- a/src/ol/renderer/layerrenderer.js +++ b/src/ol/renderer/layerrenderer.js @@ -1,6 +1,7 @@ goog.provide('ol.renderer.Layer'); goog.require('goog.Disposable'); +goog.require('goog.asserts'); goog.require('ol.ImageState'); goog.require('ol.TileRange'); goog.require('ol.TileState'); @@ -160,7 +161,13 @@ ol.renderer.Layer.prototype.updateAttributions = ol.renderer.Layer.prototype.updateLogos = function(frameState, source) { var logo = source.getLogo(); if (goog.isDef(logo)) { - frameState.logos[logo] = ''; + if (goog.isString(logo)) { + frameState.logos[logo] = ''; + } else if (goog.isObject(logo)) { + goog.asserts.assertString(logo.href); + goog.asserts.assertString(logo.src); + frameState.logos[logo.src] = logo.href; + } } }; diff --git a/src/ol/source/imagesource.js b/src/ol/source/imagesource.js index bf5554fb45..ed438518d9 100644 --- a/src/ol/source/imagesource.js +++ b/src/ol/source/imagesource.js @@ -11,7 +11,7 @@ goog.require('ol.source.Source'); /** * @typedef {{attributions: (Array.|undefined), * extent: (null|ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * projection: ol.proj.ProjectionLike, * resolutions: (Array.|undefined), * state: (ol.source.State|string|undefined)}} diff --git a/src/ol/source/source.js b/src/ol/source/source.js index 8f68d39b45..a7633ecd9f 100644 --- a/src/ol/source/source.js +++ b/src/ol/source/source.js @@ -23,7 +23,7 @@ ol.source.State = { /** * @typedef {{attributions: (Array.|undefined), * extent: (ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * projection: ol.proj.ProjectionLike, * state: (ol.source.State|string|undefined)}} */ @@ -69,7 +69,7 @@ ol.source.Source = function(options) { /** * @private - * @type {string|undefined} + * @type {string|olx.LogoOptions|undefined} */ this.logo_ = options.logo; @@ -115,7 +115,7 @@ ol.source.Source.prototype.getExtent = function() { /** - * @return {string|undefined} Logo. + * @return {string|olx.LogoOptions|undefined} Logo. */ ol.source.Source.prototype.getLogo = function() { return this.logo_; @@ -162,7 +162,7 @@ ol.source.Source.prototype.setExtent = function(extent) { /** - * @param {string|undefined} logo Logo. + * @param {string|olx.LogoOptions|undefined} logo Logo. */ ol.source.Source.prototype.setLogo = function(logo) { this.logo_ = logo; diff --git a/src/ol/source/tilesource.js b/src/ol/source/tilesource.js index 94cfad60ca..51b021f3a1 100644 --- a/src/ol/source/tilesource.js +++ b/src/ol/source/tilesource.js @@ -13,7 +13,7 @@ goog.require('ol.tilegrid.TileGrid'); /** * @typedef {{attributions: (Array.|undefined), * extent: (ol.Extent|undefined), - * logo: (string|undefined), + * logo: (string|olx.LogoOptions|undefined), * opaque: (boolean|undefined), * tilePixelRatio: (number|undefined), * projection: ol.proj.ProjectionLike,