How can I remove standard controls in an OpenLayers-Map?

Question

I use OpenLayers and want to create another navigation-control in the upper-left side. I know how to add Controls, but this navigation is added at default while creating the OpenLayers-Map. So I want to remove that Control, to add an own. I know already, that the default-control is an OpenLayers.Control.PanZoom.

score 24 · Accepted Answer · answered Aug 09 '10 at 18:52

24

The map object has a property called controls that is an array of OpenLayers.Control objects. If this property is not explicitly set then OpenLayers will assume that you want the default control set, including OpenLayers.Control.Navigation(), OpenLayers.Control.PanZoom(), OpenLayers.Control.ArgParser(), and OpenLayers.Control.Attribution().

To remove PanZoom or any other default control, simply set the controls property array at the time you construct the Map object. Here is a code example:

var map = new OpenLayers.Map('map', {
    controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.ArgParser(),
        new OpenLayers.Control.Attribution()
    ]
});

Here is a live example.

Please note that by setting the controls property that you will not get any Control objects be default. Any controls you need must be added manually.

Here is a link to the source code of the Map object if you want to see how it works for yourself.

answered Aug 09 '10 at 18:52

atogle

11,293
4
21
13

1

The default controls are here: http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.controls – zod Dec 18 '12 at 14:02
For version 3: https://github.com/openlayers/ol3/blob/master/src/ol/map.js and https://github.com/openlayers/ol3/blob/master/src/ol/control/controldefaults.js and http://openlayers.org/en/v3.9.0/apidoc/ol.control.html#defaults – Denilson Sá Maia Sep 30 '15 at 11:28
Latest version: https://openlayers.org/en/latest/apidoc/module-ol_control.html#.defaults – JDC Apr 12 '21 at 10:18
So to answer the original question, `controls: []` will remove the controls. – Nathan Fig May 01 '23 at 13:47

score 4 · Answer 2 · answered Sep 21 '18 at 10:28

4

Traverse the array of controls and then remove the zoom control

map.getControls().forEach(function(control) {
  if (control instanceof ol.control.Zoom) {
    map.removeControl(control);
  }
}, this);

answered Sep 21 '18 at 10:28

Prosenjit Saha

71
5

score 3 · Answer 3 · answered Mar 14 '11 at 01:10

3

I would have expected map.removeControl(OpenLayers.Control.PanZoom) to work but apparently not.

answered Mar 14 '11 at 01:10

Leif Gruenwoldt

13,561
5
60
64

4

You need to pass a reference of the control object you want to remove. One way to gain access to the reference is to do: map.removeControl(map.controls[x]), where x is the index of the control you want to remove, but this does not seem to work unless you explicitly set the controls as shown in the accepted answer. – Ultimate Gobblement Jul 22 '12 at 16:47

James Milner · Answer 4 · 2023-02-19T16:06:16.183

The other answers are out of date in relation to the current verison of OpenLayers which is 7 at time of writing (Dec 2022). Here is an example of how to just add the Zoom control in manually, rather than using the defaults:

import Map from 'ol/Map';
import Zoom from 'ol/control/Zoom';
import { Tile as TileLayer } from 'ol/layer';
import View from 'ol/View';

const map = new Map({
    layers: [
        new TileLayer({
            source: new OSM(),
        }),
    ],
    target: 'map',
    view: new View({
        center: [0, 0],
        zoom
    }),
    controls: [new Zoom()]
});

You can check out this official example to show extending from the defaults:

https://openlayers.org/en/latest/examples/navigation-controls.html

If you want an example of adding a control to the defaults dynamically this is a good example of that behaviour:

https://openlayers.org/en/latest/examples/scaleline-indiana-east.html

How can I remove standard controls in an OpenLayers-Map?

4 Answers4