Allow using elements in logo attribution options

This commit lets the user use an element object instead of a {src: href} object for an attribution logo when creating a map. This opens a lot of possibilities for that logo, for example setting the target to force the logo to open in a new tab when clicked.

examples/custom-icon.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: Custom Icon
+shortdesc: Example using a custom attribution icon object
+docs: >
+  This example creates a custom element for the attribution icon
+tags: "icon, element"
+---
+<div id="map" class="map"><div id="popup"></div></div>

examples/custom-icon.js

@@ -0,0 +1,27 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+var logoElement = document.createElement('a');
+logoElement.href = 'http://www.osgeo.org/';
+logoElement.target = '_blank';
+
+var logoImage = new Image();
+logoImage.src = 'http://www.osgeo.org/sites/all/themes/osgeo/logo.png';
+
+logoElement.appendChild(logoImage);
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  }),
+  logo: logoElement
+});

externs/olx.js

@@ -175,7 +175,7 @@ olx.interaction.InteractionOptions.prototype.handleEvent;
  *     layers: (Array.<ol.layer.Base>|ol.Collection.<ol.layer.Base>|undefined),
  *     loadTilesWhileAnimating: (boolean|undefined),
  *     loadTilesWhileInteracting: (boolean|undefined),
- *     logo: (boolean|string|olx.LogoOptions|undefined),
+ *     logo: (boolean|string|olx.LogoOptions|Element|undefined),
  *     overlays: (ol.Collection.<ol.Overlay>|Array.<ol.Overlay>|undefined),
  *     renderer: (ol.RendererType|Array.<ol.RendererType|string>|string|undefined),
  *     target: (Element|string|undefined),
@@ -261,9 +261,10 @@ olx.MapOptions.prototype.loadTilesWhileInteracting;
  * 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}
+ * property should be a URL for creating a link. If an element is provided,
+ * the element will be used. To disable the map logo, set the option to
+ * `false`. By default, the OpenLayers 3 logo is shown.
+ * @type {boolean|string|olx.LogoOptions|Element|undefined}
  * @api stable
  */
 olx.MapOptions.prototype.logo;

src/ol/control/attributioncontrol.js

@@ -309,6 +309,9 @@ ol.control.Attribution.prototype.insertLogos_ = function(frameState) {
       var logoValue = logos[logoKey];
       if (logoValue === '') {
         logoElement = image;
+      } else if (goog.dom.isElement(logoValue)) {
+        goog.asserts.assertElement(logoValue);
+        logoElement = logoValue;
       } else {
         logoElement = goog.dom.createDom('A', {
           'href': logoValue

src/ol/map.js

@@ -1450,7 +1450,7 @@ ol.Map.prototype.unskipFeature = function(feature) {
  * @typedef {{controls: ol.Collection.<ol.control.Control>,
  *            interactions: ol.Collection.<ol.interaction.Interaction>,
  *            keyboardEventTarget: (Element|Document),
- *            logos: Object.<string, string>,
+ *            logos: (Object.<string, (string|Element)>),
  *            overlays: ol.Collection.<ol.Overlay>,
  *            rendererConstructor:
  *                function(new: ol.renderer.Map, Element, ol.Map),
@@ -1490,6 +1490,8 @@ ol.Map.createOptionsInternal = function(options) {
     var logo = options.logo;
     if (typeof logo === 'string') {
       logos[logo] = '';
+    } else if (goog.dom.isElement(logo)) {
+      logos['logo'] = logo;
     } else if (goog.isObject(logo)) {
       goog.asserts.assertString(logo.href, 'logo.href should be a string');
       goog.asserts.assertString(logo.src, 'logo.src should be a string');