Time for action – finding your mouse position

Follow these steps to get started with the mouse position behavior:

Reuse the usual HTML for the chapter by copying it in a new file.
Now, edit the file to be sure that you create an HTML element with an ID myposition such as <div id="myposition"></div>.

Declare a JavaScript variable that references the control:

var mousePosition = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(2),
  projection: 'EPSG:4326',
  target: document.getElementById('myposition'),
  undefinedHTML: '&nbsp;'
});

Add the control to the map without forgetting that this operation is only available after you create the map:
```
map.addControl(mousePosition);
```
See the result in your browser and hover with your mouse the map.

Go back in your HTML code and add the following code in your CSS file, assets/css/samples.css:

#myposition > .ol-mouse-position {
  position: relative;
  margin-left: 20px;
  font-size: 30px;
}

Reload your page and you will see a screenshot like the following:

What just happened?

Here, we choose to use most of the options of the controls.

The first one, coordinateFormat, accepts an ol.CoordinateFormatType. It simply means that when you retrieve the coordinates, you may want to change them to Degrees Minutes Seconds notation or you may want to change the precision you display in the HTML file.

The two relevant options to set here are:

ol.coordinate.createStringXY(2): This is where 2 is the precision you expect
ol.coordinate.toStringHDMS: This is useful only if you use degrees units and the result will look like 51° 30′ 33″ N "8° 49′ 22″ E"

Be careful to not set ol.coordinate.toStringHDMS() instead; it's a bit surprising, but you need to use the class itself.

The projection option helps you choose the coordinates you want. You may have forgotten but each projection has a defined unit system (and subunits). For example, the EPSG:4326 projection returns units in a decimal degree. It's what you see in the bottom of the previous image. The undefinedHTML option just sets what you want to display when you are not hovering over the map. You can confirm   availability by searching in the Chrome debugger Elements panel, the string in precedent example.

The target option and the CSS part were only to remind you of previous use cases.

We've never really insist until now, but you can also set the parameters after controls creation. In fact, for each property, you always have a setter and a getter.

Just open your browser with the example, type in the console the following line, and hover over the map to understand:

mousePosition.setProjection(ol.proj.get('EPSG:3857'))

As you see, you can really explore the methods available in the ol.control.MousePosition control. We really encourage you to play in the console using auto completion: you will see that you can really find useful things that may remind you of other examples. You should also focus on the Fires: part of the API documentation at http://openlayers.org/en/v3.0.0/apidoc/ol.control.MousePosition.html because it will help you to apply your events knowledge in the context of controls and here, the mousePosition control.

The ol.control.ScaleLine control

If you remember, we already introduced you to this control in the Chapter 7, Wrapping Our Heads Around Projections at a functional level.

The purpose of ol.control.ScaleLine is to show a scale line bar to give people an overview of scale and distance. Be aware that it is only useful for projection that keeps distances.

You just need to add it to the map with something such as map.addControl(new ol.control.ScaleLine()) if you don't use the options.

ScaleLine options

The following is the options list you can set for the scale line control:

Name	Type	Description
`className`	`string \| undefined`	This property sets the CSS class name for the control. The default value is `ol-scale-line`.
`minWidth`	`number \| undefined`	This option sets the minimum width in pixels.
`target`	`Element \| undefined`	This option sets the target, to the DOM element where you want to display your control.
`units`	`ol.control.ScaleLineUnits \| undefined`	This property sets the units you want to use in your scale line. The supported values are degrees, imperial, nautical, metric, and US.

Have a go hero – discovering ol.control.ScaleLine specific parameters

Although this book is about introducing the OpenLayers 3 library, we suppose that if you are reading this, it also means you want to understand what you are doing. So, let's give you some tasks to do by yourself:

Reuse the usual chapter code.
Set the minWidth property to a value you want in pixels.
Zoom in, zoom out, and pan to see the control behavior.

Change units in the scale line (the ol.control.ScaleLineUnits description is available in the following content). When you want to display your map legend using others units, you need to know the available units. You can find them using the table that follows, extracted from the ol.control.ScaleLineUnits type definitions in the OpenLayers 3 API:

Name	Type	Default
degrees	`string`	This property returns the the string degrees required for internal library units changes. Check out Wikipedia to learn more on this unit (decimal degree) at http://en.wikipedia.org/wiki/Decimal_degrees.
imperial	`string`	This property is similar to previous property but returns the string imperial. Check out Wikipedia to learn more about the unit at http://en.wikipedia.org/wiki/Imperial_units.
nautical	`string`	This property is similar to the previous property but returns the string nautical. It refers to nautical miles. Check out Wikipedia for more information at http://en.wikipedia.org/wiki/Nautical_mile.
metric	`string`	This property is similar to the previous property, but returns the string metric that refers to metre or meter. Check out Wikipedia for an history at http://en.wikipedia.org/wiki/Metre.
us	`string`	This property is similar to the previous property but returns the string US. It refers to US units. Check out Wikipedia for more information at http://en.wikipedia.org/wiki/United_States_customary_units.

Inspect the HTML element using the debugger
What CSS rules apply to the elements within the DOM element control
Tweak the control color
Change the scale line position with CSS, the target property or both of them

The ol.control.ZoomSlider control

The ol.control.ZoomSlider control helps you to see your zoom levels using a slider. We advise you to go to the official example at http://openlayers.org/en/v3.0.0/examples/zoomslider.html because it's well illustrated for CSS styling. You can display the slider horizontally or vertically for the example illustrated in the following screenshot:

ZoomSlider options

The following content presents the available options/properties in ol.control.ZoomSlider.

Name	Type	Description
`className`	`string \| undefined`	This property sets the class name for the control.
`maxResolution`	`number \| undefined`	This option defines the maximum resolution.
`minResolution`	`number \| undefined`	This option sets the minimum resolution.

You can manage and try to better understand resolutions by using the getResolution() function at the view level (with map.getView()).

The ol.control.ZoomToExtent control

The ol.control.ZoomToExtent control permits you to create a button to go to a particular extent.

In a real context, it may help you to get a map with a zoom on a country, and using this control, you will be able to zoom directly on a particular city. In another case, you may want to go back to the initial extent of your map, and this control is also a way to address this requirement.

Previous Chapter

Time for action – changing the default attribution styles

Next Chapter

Time for action – configuring ZoomToExtent and manipulate controls

Table of Contents for OpenLayers 3 : Beginner's Guide