[GIS] Add a custom control in OpenLayers 3 but it was hide

Question

I follow an example to add a custom control into Map but it is hide.
http://openlayers.org/en/v3.2.0/examples/custom-controls.html

Is there any wrong in my code ?

map = new ol.Map({
                      controls: ol.control.defaults({
                      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                        collapsible: false
                      })
                     }).extend([
                        new RotateNorthControl()
                    ]),
                    target: 'mymap',
                    renderer: 'canvas',
                    layers: [
                        new ol.layer.Tile({source: new ol.source.OSM()}),vectorLayer
                    ],
                    view: new ol.View({
                        //projection: 'EPSG:900913',
                        center: ol.proj.transform([mapLng,mapLat ], 'EPSG:4326', 'EPSG:3857'),
                        zoom: 12
                    })

                });

function RotateNorthControl(opt_options) {

   var options = opt_options || {};

   var button = document.createElement('button');
   button.innerHTML = 'N';

   var this_ = this;
   var handleRotateNorth = function(e) {
   this_.getMap().getView().setRotation(0);
   };

   button.addEventListener('click', handleRotateNorth, false);
   button.addEventListener('touchstart', handleRotateNorth, false);

   var element = document.createElement('div');
   element.className = 'rotate-north ol-unselectable';
   element.appendChild(button);

   ol.control.Control.call(this, {
    element: element,
    target: 'mymap'
   });

   };
  ol.inherits(RotateNorthControl, ol.control.Control);

the control did not show up. how to remove ol-hidden class?

Answer 1

It might be late but to help others, it seems that to solve this problem you only need to add position to your style file. for example you can add: .rotate-north { top: 65px; left: .5em; } to .css file or .rotate-north { top: 65px; left: .5em; } in you html file.