Time for action – changing the default attribution styles

Attributions, as a reminder, are the way to mention credits for layers sources that reference source of the tiles and/or data. The ol.control.Attribution control is dedicated for this.

First, copy the example dedicated to the defaults controls in a new file.
Next, change the ol.control.defaults options in the controls property of the map, and also set logo options to false at the ol.Map level:
```
logo: false
controls: ol.control.defaults({
  attributionOptions: {
  },
}),
```
Open your browser (we suppose you are using Google Chrome).
Now, add in attributionOptions to the following content and reload the page:
```
attributionOptions: {
  className: 'myCustomClass'
},
```
Use the Chrome Developers tools to find the element with myCustomClass to try to understand the effect of the className option in attributionOptions.

Now, again add a new property in attributionOptions:

attributionOptions: {
  className: 'myCustomClass',
  target: document.getElementById('myattribution'),
},

Add also in the HTML after the <div id="map" class="map"> </div>the following content:
```
<br/>
<div id="myattribution"></div>
```
Reload the HTML page and you will see an image like the one that follows:

What just happened?

We first introduced you to the className property. This enables you to change the default class name for the control. Then, you can customize your control with CSS according to this new class name. You may have noticed that, in the first case, you were unable to see the content in the browser, but only in the debugger because the element was always attached to the map element with its child, the <div class="ol-viewport" ...> tag.

With the second case, we showed you the purpose of the target property: you can tell the control where you want to attach the control. So, you need to use a DOM selector such as document.getElementById('myattribution').

With this action, you might have seen that the control is now well separated from the <div id="map" class="map"></div> HTML.

It is now easy to customize as per your wish and you can display credits outside of the map: it can be useful when you use a lot of layers and don't want to display too much information.

The ol.control.Zoom control

The ol.control.Zoom control displays a plus and minus element to zoom in and zoom out. It is one of the default controls.

Zoom options

The zoom options are similar to both previous controls but we also have some other properties such as a delta property. The other specific properties are only to change text for the control or when the mouse hovers them.

We will not cover those options as they are quite straightforward to understand but advise you to play with it within the context of OpenStreetMap. If you remember, OpenStreetMap behavior for tiles in Chapter 1, Getting Started with OpenLayers (each zoom multiply zoom by 2), you will also remember how to play with the delta property. For each click on the control, your delta is 1. Change this property to a value, either 2 or 4, and try to click on the plus (+) and minus (-) buttons and see the change.

You can find the properties list for the control as follows:

Name	Type	Description
`duration`	`number \| undefined`	This property sets the animation duration in milliseconds. The default value is `250`.
`className`	`string \| undefined`	This property sets the CSS class name for the control. The default value is `ol-zoom`.
`zoomInLabel`	`string \| undefined`	This is the text label to use for the zoom in button. The default value is `+`.
`zoomOutLabel`	`string \| undefined`	This is the text label to use for the zoom out button. The default value is `-`.
`zoomInTipLabel`	`string \| undefined`	This is the text label to use for the button tip. The default value is `Zoom in`.
`zoomOutTipLabel`	`string \| undefined`	This is the text label to use for the button tip. The default value is `Zoom out`.
`delta`	`number \| undefined`	The zoom delta is applied on each click.
`target`	`Element \| undefined`	This option sets the target, to the DOM element where you want to display your control.

The ol.control.Rotate control

The ol.control.Rotate control is not really obvious to understand. As OpenLayers 3 targets mobile browsers or applications, it can be useful to reset the rotation when you choose to make an interactive map that relies on the compass from your device. Sometimes, you want to reset the north direction for readability for end users. In fact, this control is a default one.

You can make it appear by reopening the previous example, then click and drag while pressing down both Shift and Alt keys. You will see a result like the following:

Rotate options

Let me remind you that you will find the options available to customize the Rotate control:

Name	Type	Description
`className`	`string \| undefined`	This property sets the CSS class name. The default value is `ol-rotate`.
`label`	`string \| undefined`	This property sets the text label to use for the rotate button. The default is Upper arrow key, as seen in the upper-right corner in the previous screenshot.
`tipLabel`	`string \| undefined`	This property sets the text label to use for the rotate tip. The default value is `Reset rotation`.
`duration`	`number \| undefined`	This property sets the animation duration in milliseconds. The default value is `250`.
`autoHide`	`boolean \| undefined`	With this, you can hide the control when rotation is 0. The default value is `true`.
`target`	`Element \| undefined`	This property sets the target for the control.

You can play around with these options; for example, you can always display North with an arrow like for paper maps with autoHide. It's also possible, if your application is not targeting English-speaking users, to change the tipLabel.

The ol.control.FullScreen control

With this control, you can easily switch to the fullscreen mode that relies on HTML5. Also, for this reason, it will work better with a modern browser that supports this feature, such as Google Chrome, Firefox, and so on. Typing Esc will take you out from this mode.

This is the first control we've reviewed that is a not a default one. If you need it, you can use the ol.Collection returned by the ol.control.defaults method and with it the ol.Collection extend method, add the control using an array to the collection, when instantiating ol.Map with the bare minimum (no options):

controls: ol.control.defaults().extend([new ol.control.FullScreen()]),

As a reminder, supposing map is the ol.Map object name, you can also add the control with the following line:

map.addControl(new ol.control.FullScreen());

FullScreen options

These FullScreen are options for the FullScreen control. Except for the keys property that depends on latest support in browsers and tipLabel to set the tip text on the button, the properties are the usual ones, the ones inherited from ol.control.Control. All are considered as experimental.

Name	Type	Description
`className`	`string \| undefined`	This property sets the CSS class name for the control. The default value is `ol-full-screen`.
`tipLabel`	`string \| undefined`	This property sets the next label to use for the button tip. The default value is `Toggle full-screen`.
`keys`	`boolean \| undefined`	This property grants full keyboard access.
`target`	`Element \| undefined`	This option sets the target, to the DOM element where you want to display your control.

The ol.control.MousePosition control

The ol.control.MousePosition control helps you to determine the coordinates where your mouse is pointing on the map.

One way to do this is by instantiating the element with the syntax that follows:

controls: ol.control.defaults().extend( [
  new ol.control.MousePosition({
    key: value,
    ...
  })
]),

The object into the control constructor is optional.

MousePosition options

The MousePosition options are the available properties you pass to the control ol.control.MousePosition. They help customize the behavior of the control such as coordinates formatting or units.

Name	Type	Description
`className`	`string \| undefined`	This property sets the CSS class name for the control. The default value is `ol-mouse-position`.
`coordinateFormat`	`ol.CoordinateFormatType \| undefined`	This property sets the coordinate format.
`projection`	`ol.ProjectionLike`	This property sets the projection and the library uses it for displaying units.
`target`	`Element \| undefined`	This option sets the target, to the DOM element where you want to display your control.
`undefinedHTML`	`string \| undefined`	This property sets the markup for undefined coordinates. The default value is an empty string.

We will review these options with an example.

Previous Chapter

Controls overview

Next Chapter

Time for action – finding your mouse position

Table of Contents for OpenLayers 3 : Beginner's Guide