We will introduce object literals and get acclimated with how to manipulate them now, so that we can better work with the OpenLayers code:
Open up Chrome and the DevTools Console panel—again, it doesn't matter right now what page you're on.
Type in the following code, and then execute it by pressing Enter:
var my_parameters = {zoom: false, attribution: false, otherControl: 'myslider'}; console.log(my_parameters);The preceding code should display, in the console log area, something similar to
{zoom: false, attribution: false; otherControl: 'mySlider'}. In this case, the object is not complex but when the object is more complex, you will see an arrow before the object, and if you click on it, it will show all the information about the object you just created.Click on the Console panel to get back to it. In the input box, add the following code to the existing code and execute it:
console.log(my_parameters.otherControl);
You should see a line of output in the console area containing the string mySlider:
We just created what is called in JavaScript an anonymous object, or object literal. We previously discussed that objects are created from classes, in Appendix A, Object-oriented Programming – Introduction and Concepts and in JavaScript, we need to use the new keyword to instantiate an object from a function. However, here, you can see that there is no new keyword!
The key concept here is that we are just creating a single object that does not derive from a class. Since object literals (anonymous objects) do not derive from a class, it is, essentially, an empty object. It contains only what we explicitly defined. The value associated with a key can be almost anything—a string, integer, function, array, or even another object literal.
We encountered object literals in Chapter 1, Getting Started with OpenLayers —they were the {key:value} pairs used to define the parameters and options of our layer and objects. The only difference is that we did not assign a variable to them; we simply passed them in when we created our layer object.
Object literals are extremely useful for a variety of tasks, and it is a great way to package information in an easy-to-use form. They are in the form of {key:value, key2:value2}. We can access any property of an object literal by using dot notation, in the form of my_object_literal.key. The key, like before, is the key part of the key:value pair. In the preceding code, we call console.log(my_parameters.otherControl); and the value of the key opacity is displayed in the console's log area. You will also encounter an alternative notation and brackets notation, to retrieve the same information. This form is quite useful because you can concatenate values keys in your object.
Using console.log(my_parameters['other' + 'Cont' + 'rol']); will do the same as the previous console.log call. It allows to loop on objects with a key that can change whereas the dot notation does not allow this.
Note
console.log(): The Chrome DevTools function console.log() is a function that will, essentially, display what you pass into it in the console log. You can pass in variables, strings, objects, anything, and it will display in the log. It comes in handy often, so getting familiar with it is a good idea.
We use object literals frequently when making our maps—so if they don't make much sense yet, don't worry. The basic idea to grasp, and the primary way we will use them, is that they are essentially key:value pairs. Before we end this chapter, let's do a quick example where we interact with an OpenLayers map using the Console panel.