Merge pull request #7377 from notnotse/overlay-classname

Add support to specify CSS class name when creating ol.Overlay

externs/olx.js

@@ -521,7 +521,8 @@ olx.AtPixelOptions.prototype.hitTolerance;
  *     insertFirst: (boolean|undefined),
  *     autoPan: (boolean|undefined),
  *     autoPanAnimation: (olx.OverlayPanOptions|undefined),
- *     autoPanMargin: (number|undefined)}}
+ *     autoPanMargin: (number|undefined),
+ *     className: (string|undefined)}}
  */
 olx.OverlayOptions;
 
@@ -623,6 +624,12 @@ olx.OverlayOptions.prototype.autoPanAnimation;
  */
 olx.OverlayOptions.prototype.autoPanMargin;
 
+/**
+ * CSS class name. Default is `ol-overlay-container ol-selectable`.
+ * @type {string|undefined}
+ * @api
+ */
+olx.OverlayOptions.prototype.className;
 
 /**
  * @typedef {{

src/ol/overlay.js

@@ -59,7 +59,8 @@ ol.Overlay = function(options) {
    * @type {Element}
    */
   this.element_ = document.createElement('DIV');
-  this.element_.className = 'ol-overlay-container ' + ol.css.CLASS_SELECTABLE;
+  this.element_.className = options.className !== undefined ?
+    options.className : 'ol-overlay-container ' + ol.css.CLASS_SELECTABLE;
   this.element_.style.position = 'absolute';
 
   /**

test/spec/ol/overlay.test.js

@@ -44,6 +44,12 @@ describe('ol.Overlay', function() {
       expect(instance).to.be.an(ol.Overlay);
     });
 
+    it('can be constructed with className', function() {
+      var instance = new ol.Overlay({className: 'my-class'});
+      expect(instance).to.be.an(ol.Overlay);
+      expect(instance.element_.className).to.be('my-class');
+    });
+
   });
 
   describe('#getId()', function() {