Let's download the OpenLayers library. After you're done, you should have the OpenLayers library files set up on your computer.
Go to the OpenLayers website (http://openlayers.org) and download the
.zipversion (or if you prefer the.tar.gzversion).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).
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.jsand two folders,/imgand/theme. We'll be copying these to a new folder.
Create a new folder outside the OpenLayers directory; we'll use
~/code/(if you are on Windows, thenc:/code). You can name the folder whatever you like, but we'll refer to it as thecodefolder. Inside the code folder, copy over theOpenLayers.jsand two folders (/imgand/theme) from the previous step. Your new folder structure should look similar to this:
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!
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!