[GIS] How to display a control outside map container in openlayers 3.5.0

openlayers

I try to associate a control to div with OpenLayers 3.5.0.

I found this tutorial and this subject on GIS SE but the solutions were for OpenLayers 2.
I tried them with OL3 but it doesn't work.

Do you know how can I do that ?

Best Answer

To summarize what we say in comments and to add a solution:

To put a contol in a custom div use the target property of the control: 

var ctrl= new ol.control.FullScreen({
  target: document.querySelector('#your_div_id')
});
map.addControl(ctrl);

To allow the click on your custom div to trigger the control functionnality, you need a bit of CSS:

.ol-full-screen {
  margin: auto;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}

.ol-full-screen button{
  width: 100%;
  margin: 0;
  left: 0;
  top: 0;
  height: 100%;
  opacity: 0;
}

Tested here , I've verified with the console and the click is well triggered.

Related Question