Time for action – starting with the default controls

Follow these steps to start manipulating the default controls:

Create an HTML page using the usual template referring to the OpenLayers 3 JavaScript library and its default CSS, as shown here:

<!doctype html>
<html>
  <head>
    <title>Default controls</title>
    <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css">
    <link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="../assets/ol3/ol.js"></script>
    <script>
    </script>
  </body>
</html>

Now, between the empty <script> </script> add the declaration to the map:

var osm_default = new ol.layer.Tile({
  source: new ol.source.OSM()
});
var map = new ol.Map({
  layers: [osm_default],
  target: 'map',
  view: new ol.View({
    center: ol.proj.transform([-1.81185, 52.443141], 'EPSG:4326', 'EPSG:3857'),
  zoom: 6  })
});

Try to open your HTML page. Don't forget to keep the good practice to put your page on a server or by using python -m SimpleHTTPServer or node index.js (if you are using the code from the book samples) because some sources are sensitive to the URL context (or you will get a blank map).
Now, change the previous page by adding the required options to ol.control.defaults to cancel all default controls parameters in the map constructor. See the following code to understand this:
```
var map = new ol.Map({  layers: [osm_default],
  controls: ol.control.defaults({
    zoom: false,
    attribution: false,
    rotate: false
  }),
});
```
Reload your HTML page in the browser and you will see a result like the following:

What's just happened?

Let's examine the interesting part of the code:

controls: ol.control.defaults({
  zoom: false,
  attribution: false,
  rotate: false
})

To manage default controls, we must use a parameter in the ol.control.defaults function. This first parameter is an object that contains a key referring to the default controls. You can set their value to false to disable the corresponding control.

This object also supports other keys to set options for each default controls. These keys are attributionOptions, rotateOptions, and zoomControlOptions. We mentioned them here but we will see them later when reviewing each control individually.

The following table, an excerpt from the API documentation of ol.control.defaults, summarizes these properties:

Name	Type	Description
`attribution`	`boolean \| undefined`	With this property, you can set whether or not the attribution control should be displayed, with the values `true` or `false`.
`attributionOptions`	`olx.control.AttributionOptions \| undefined`	If the attribution control is used, you can pass these attribution options for the control.
`rotate`	`boolean \| undefined`	This property sets the rotate controls if you want to display the rotate control with `true` or `false`.
`rotateOptions`	`olx.control.RotateOptions \| undefined`	If the rotate control is used, you can pass these rotate options for the control.
`zoom`	`boolean \| undefined`	This property sets the zoom if you want to display the zoom control with `true` or `false`.
`zoomOptions`	`olx.control.ZoomOptions \| undefined`	If the zoom control is used, you can pass these zoom options for the the control.

Previous Chapter

Adding controls to your map

Next Chapter

Controls overview

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – starting with the default controls

What's just happened?

Table of Contents for
OpenLayers 3 : Beginner's Guide