Time for action – interacting with a map

We'll use the map we created in Chapter 1, Getting Started with OpenLayers, to do this example, interacting with our OpenLayers map by calling various functions of the map.

Edit the example map from Chapter 1, Getting Started with OpenLayers, to change the reference to JavaScript from ../assets/ol3/js/ol.js to ../assets/ol3/js/ol-debug.js and open the file in Chrome. Enable Chrome DevTools and go to the Console panel. If you like, you can take a look at the Network panel and view the network activity to see the requests your page is making.
Go to the Console panel, input the following code, and then execute it:
```
console.log(map);
```
You should see the map object information come up in the console log. Click on it, and take a moment to look over the various attributes it has. Near the bottom, you can see a list of all the functions that belong to it (which are also referred to as methods).
Take note of the function names, as we'll be using them.

Go back to the Console panel, type in, and execute the following code:

map.getView().setCenter([0, 0]);
map.getView().calculateExtent(map.getSize());

Take note of the extent. Clear out the code you typed in, then type in the following and execute it:
```
map.getView().setResolution(2000);
map.getView().calculateExtent(map.getSize())
```
Now, let's take a look at some properties of the map object. We can access the map properties using the dot notation, which we discussed earlier. Clear any code you've typed so far, input and execute the following code:
```
console.log(map.getSize());
console.log(map.getViewport());
```
You will see the following screenshot:
Refer back to the functions of the map object (by running console.log(map); then clicking on the output in the log area). Try playing around with different functions and attributes the map object has. To access the functions, you just need to type in map.function();.
You can also access the properties of the map by typing map.key, where key would be something like keyHandler_ (so the full code would be map.keyHandler_). Be aware that values with underscore at the end are private when using the compressed ol.js file (it's a naming convention in the library code).

What just happened?

We just executed some functions of our map and accessed some properties of it. All we have to do is call our object, map, followed by a period, then a function or property it owns. Using this dot notation (for example, map.getSize();), we can access any property or function of the map object.

We also saw how the Console panel comes in handy, and took a look at functions that we can call, which the map object owns. Any function listed there can be called via map.functionname();, but some functions require parameters to be passed in or they will not work. However, where can we go to figure out more information about the functions and what they require?

Have a go hero – experimenting with functions

Try to call different functions that you see listed in the Console tab when typing in the window. Many functions will not work unless you pass certain arguments into them, but don't be afraid of errors! Poke around the various functions and properties and try to interact with them using the Console tab like in the preceding example.

The API documentation

The API documentation for the Map class, which our map object derives from (and thus, inherits all the functions and properties of the class) provides more detailed explanations of the properties, functions, and what we can do with them. They can be found at http://openlayers.org/en/v3.0.0/apidoc/. Even though Chrome DevTools is a great resource to quickly interact with code and learn from it, the API docs present an extra level of information that Chrome DevTools cannot necessarily provide. Do not hesitate to visit them at http://openlayers.org/en/v3.0.0/examples/.

Tip

Chrome DevTools is evolving rapidly and many new capabilities are being added all the time. Make sure you read the official documentation at https://developer.chrome.com/devtools/index and check back periodically to see what's new.

Previous Chapter

Time for action – creating object literals

Next Chapter

Improving Chrome and Developer Tools with extensions

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – interacting with a map

What just happened?

Have a go hero – experimenting with functions

The API documentation

Tip

Table of Contents for
OpenLayers 3 : Beginner's Guide