Time for action – downloading OpenLayers

Let's download the OpenLayers library. After you're done, you should have the OpenLayers library files set up on your computer.

1. Go to the OpenLayers website (http://openlayers.org) and download the .zip version (or if you prefer the .tar.gz version).

2. Extract the file you just downloaded. When you extract it, you'll end up with a folder called OpenLayers-2.10 (or whatever your version is).

3. Open up the OpenLayers folder. Once inside, you'll see a lot of folders and files, but the ones we are concerned with right now is a file called OpenLayers.js and two folders, /img and /theme. We'll be copying these to a new folder.

   

4. Create a new folder outside the OpenLayers directory; we'll use ~/code/ (if you are on Windows, then c:/code). You can name the folder whatever you like, but we'll refer to it as the code folder. Inside the code folder, copy over the OpenLayers.js and two folders (/img and /theme) from the previous step. Your new folder structure should look similar to this:

   

What just happened?

We just 'installed' OpenLayers by copying over a pre-built, compressed JavaScript file containing the entire OpenLayers library code and two directories containing assets (images and stylesheets). To use OpenLayers, you'll need at a minimum the OpenLayers.js file and the img and theme folders.

If you open the OpenLayers.js file, you'll notice it is nearly unreadable. This is because this is a minified version, which basically means extra white space and unnecessary characters have been stripped out to cut down on the file size. While it is no longer readable, it is a bit smaller and thus requires less time to download. If you want to look at the uncompressed source code, you can view it by looking in the OpenLayers source code folder you extracted.

You can, as we'll see in the last chapter of this book, build your own custom configurations of the library, including only the things you need. But for now, we'll just use the entire library. Now that we have our OpenLayers library files ready to use, let's make use of them!

Making our first map

The process for creating a map with OpenLayers requires, at a minimum, the following things:

• Including the OpenLayers library files

• Creating an HTML element that the map will appear in

• Creating a map object from the Map class

• Creating a layer object from a Layer class

• Adding the layer to the map

• Defining the map's extent (setting the area the map will initially be displaying)

Now we're finally ready to create our first map!