Creating new buttons and removing default ones - Openlayers-3

Question

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. — Jonatas Walker, Oct 05 '15 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 05 '15 at 19:32

score 8 · Accepted Answer · edited Apr 13 '17 at 12:33

8

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%;
}

To create new controls: Openlayers simple custom control example

edited Apr 13 '17 at 12:33

Community

1

answered Oct 05 '15 at 19:51

Jonatas Walker

2,214
13
26

I was waiting for you ^^ Again, thanks for the help! – PIDZB Oct 05 '15 at 20:01
:) at your service. – Jonatas Walker Oct 05 '15 at 20:03
Is there a possibility to connect a function like zooming to an existing button? – PIDZB Oct 05 '15 at 20:37
Yes, you set an element on target constructor property, or use http://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. – Jonatas Walker Oct 06 '15 at 08:57
Sorry forgot to accept! Thanks for the additional info, – PIDZB Oct 06 '15 at 08:59

score 0 · Answer 2 · answered May 18 '17 at 14:06

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) {
    map.getView().setRotation(0);
};

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

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

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
  }),
  controls:ol.control.defaults().extend([
          new ol.control.Control({
            element:element
          })
        ])
});

jsfiddle working code

Creating new buttons and removing default ones - Openlayers-3

2 Answers2

Linked