How do I create a custom control in Open Layers with an image inside?

Question

http://openlayers.org/en/latest/examples/custom-controls.html?q=custom

This is a good example of how to create a custom control but I can't seem to make it work with an image.

The image I want to include in the custom control is here

Also, I don't want the image to do anything, just be there in a corner.

score 3 · Accepted Answer · answered Aug 10 '17 at 15:19

Custom controls are basically just DOM elements with event handlers, so all you need to do is create an element and apply a little CSS to it.

  customControl = function(opt_options) {
    var element = document.createElement('div');
    element.className = 'custom-control ol-unselectable ol-control';
    ol.control.Control.call(this, {
      element: element
    });
  };
  ol.inherits(customControl, ol.control.Control);

  var map = new ol.Map({
    layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
    controls: [new customControl],
    target: 'map',
    view: new ol.View({
      center: [-11000000, 4600000],
      zoom: 4
    })
  });

CSS:

.custom-control {
  top: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  background: no-repeat url('http://openlayers.org/en/latest/examples/resources/logo-70x70.png')
}

Look at the example you cited in your original question for how to append a control to the 'standard' controls by calling ol.controls.defaults.extend(). — Bob Holmes, Aug 10 '17 at 21:56

How do I create a custom control in Open Layers with an image inside?

1 Answers1