Let's download the OpenLayers library. After you're done, you should have the OpenLayers library files set up on your computer. Perform the following steps:
Go to the OpenLayers website (http://openlayers.org), go to the Download part to follow the link and download the
v3.0.0.zipversion of the OpenLayers v3.0.0. It's the green button on the bottom left of the Github release page for v3.0.0.Extract the file you just downloaded. When you extract it, you'll end up with a folder called
v3.0.0(or whatever your version is).Open the
v3.0.0folder. Once inside, you'll see a lot of folders, but the ones we are concerned with right now are the folders namedbuildandcss, as seen in the following screenshot:
Create an
ol3folder within anassetsfolder contained within a new folderol3_samplesin your home directory (orC:\on Windows). Copy the previousbuildfolder fromv3.0.0and rename it asjsinto the newol3directory and also copy thecssfolder into the sameol3folder.Create a new folder called
sandboxinto theol3_samplesdirectory. You can name the folder whatever you like, but we'll refer to it as thesandboxfolder. Your new folder structure should look similar to the following screenshot:
We just installed OpenLayers 3 by copying over different pre-built, compressed JavaScript files containing the entire OpenLayers 3 library code (from the build directory) and the associated assets (style sheets). To use OpenLayers, you'll need at a minimum, the ol.js file (the other .js files will be needed during the book but are not always required) and the ol.css file. For best practice, we already gave you some tips to structure the code like separate assets, such as css and js, or separate library code from your own code.
If you open the ol.js file, you'll notice it is nearly unreadable. This is because this is a minified and obfuscated version, which basically means extra white space and unnecessary characters have been stripped out to cut down on the file size and some variables have been shortened whenever possible. 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 ol-debug.js file within the js folder of the ol3 directory.
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:
Include the OpenLayers library files
Creating an HTML element that the map will appear in
Creating a layer object from a
ol.layer.*classCreating a map object from the
ol.Mapclass by adding a layerCreating a view from the
ol.Viewclass to set for theMapclass (defining the area where the map will initially be displayed)
Now, we're finally ready to create our first map!