5

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 5 '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 5 '15 at 19:32
7

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

  • I was waiting for you ^^ Again, thanks for the help! – PIDZB Oct 5 '15 at 20:01
  • :) at your service. – Jonatas Walker Oct 5 '15 at 20:03
  • Is there a possibility to connect a function like zooming to an existing button? – PIDZB Oct 5 '15 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. – Jonatas Walker Oct 6 '15 at 8:57
  • Sorry forgot to accept! Thanks for the additional info, – PIDZB Oct 6 '15 at 8:59
0

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

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.