Creating new buttons and removing default ones

Thursday 20 July 2017

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?

Answer

To change zoom buttons:

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

}));

CSS, this is up to you:

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

}

Blog