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.zip
version 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.0
folder. Once inside, you'll see a lot of folders, but the ones we are concerned with right now are the folders namedbuild
andcss
, as seen in the following screenshot:Create an
ol3
folder within anassets
folder contained within a new folderol3_samples
in your home directory (orC:\
on Windows). Copy the previousbuild
folder fromv3.0.0
and rename it asjs
into the newol3
directory and also copy thecss
folder into the sameol3
folder.Create a new folder called
sandbox
into theol3_samples
directory. You can name the folder whatever you like, but we'll refer to it as thesandbox
folder. 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.Map
class by adding a layerCreating a view from the
ol.View
class to set for theMap
class (defining the area where the map will initially be displayed)
Now, we're finally ready to create our first map!