I am trying to create new buttons but I seem to use the wrong function. To delete the default buttons I added the following code:

var map = new ol.Map({
  target: 'map',
  controls: [],
  layers: [
  new ol.layer.Tile({ ... etc

This works great. Now I am trying to connect a button I created with HTML (id=btnZoomOut) to the Zoom function:

var buttonZoomOut = new ol.control.Control({element: $('#btnZoomOut')});
map.addControl(new ol.control.Zoom({target: buttonZoomOut}));

But this does not seems to works and trows an error:

Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).appendChild is not a function

How to correctly do this?

  • Will this #btnZoomOut element be outside of map? If you just want to change zoom control position you can pass a custom CSS class to the constructor. Oct 5, 2015 at 19:25
  • No, I want to change the entire look and add more buttons for locking to views. But if I can't even create one new button...
    – PIDZB
    Oct 5, 2015 at 19:32

2 Answers 2


To change zoom buttons:

map.addControl(new ol.control.Zoom({
    className: 'custom-zoom'

CSS, this is up to you:

    bottom: .5em;
    left: .5em;
.custom-zoom button{
    background-color: rgba(40, 40, 40, .7);
    border-radius: 50%;

To create new controls: Openlayers simple custom control example

  • I was waiting for you ^^ Again, thanks for the help!
    – PIDZB
    Oct 5, 2015 at 20:01
  • :) at your service. Oct 5, 2015 at 20:03
  • Is there a possibility to connect a function like zooming to an existing button?
    – PIDZB
    Oct 5, 2015 at 20:37
  • Yes, you set an element on target constructor property, or use openlayers.org/en/v3.9.0/apidoc/ol.control.Zoom.html#setTarget. Don't forget to accept my answer (if it is correct) so it won't remain incomplete. Oct 6, 2015 at 8:57
  • Sorry forgot to accept! Thanks for the additional info,
    – PIDZB
    Oct 6, 2015 at 8:59

If you want to use font awesome icons then

var button = document.createElement('button');
button.innerHTML = '<i class="fa fa-home"></i>';

var handleRotateNorth = function(e) {

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

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

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,
    rotation: 0
          new ol.control.Control({

jsfiddle working code

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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