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 ?

  • Perhaps you put an example online, so we can see how to give a hand. – Jonatas Walker Jun 8 '15 at 21:25
  • Of course Jonatas, it's not a reflex for me ;-) link – Geo-x Jun 9 '15 at 7:37
  • Your example seems to work just add the 2nd full screen control to the map. var ct = new ol.control.FullScreen({target: test_div2}); map.addControl(ct); – oterral Jun 9 '15 at 7:44
  • Thank you Oterral, but it doesn't work because what I want, it's, when I click on my div, that's run the fullscreen. That's why I tried to associate the DIV to the control. – Geo-x Jun 9 '15 at 7:49

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')

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.

| improve this answer | |
  • It's perfect, than you oterral! good idea to set opacity 0 to the button full-screen – Geo-x Jun 11 '15 at 8:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.