Different ways to include OpenLayers

There are different ways we can include OpenLayers in our projects depending on the environment we are working in, that is development or production.

The environment refers to the server tier required for a stage in our process. In this way, the development environment is related to the development process, where programmers are working day to day, testing and checking.

Production environment refers to the final stage of the projects. It must run on stable servers and without dependency problems.

As we will see shortly, we can summarize the solutions to include OpenLayers JavaScript code in two groups, those with code hosted on a remote server or those with code hosted on our own server.

Let's start and see the pros and cons of each solution.

Getting ready

Create a folder called myProject that will contain all our project files and library dependencies. Then create an index.html file and continue with the code given in the Creating a simple full screen map recipe.

Note

It is supposed that the project folder resides within a folder accessible by the web server folder, so it can serve its content.

Now download OpenLayers code from the project's web page at http://www.openlayers.org.

Note

At the time of writing this book, OpenLayers version 2.11 is the stable release, which can be found at http://openlayers.org/download/OpenLayers-2.11.tar.gz.

Save the bundle in the myProject folder and uncompress it. We need to have a folder structure similar to the following screenshot:

How to do it...

We have three ways to include the OpenLayers library in our code:

• <script type="text/javascript" src=" http://openlayers.org/api/2.11/OpenLayers.js "></script>

• <sc ript type="text/javascript" src="../js/OpenLayers-2.11/OpenLayers.js"></script>

• <sc ript type="text/javascript" src="../js/OpenLayers-2.11/lib/OpenLayers.js"></script>

How it works...

The first option includes an all-in-one compressed file hosted at the OpenLayers project server. It is simple to use but you cannot work locally in offline mode:

<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>

Note

The size of the compressed all-in-one file OpenLayers.js is nearly 1 MB, so in a production environment with lots of requests it is probably better to host this file in a Content Delivery Network or CDN (http://en.wikipedia.org/wiki/Content_delivery_network).

The second option is very similar to the first one, but the all-in-one compressed file is attached to the project. This option is suitable for cases in which you need OpenLayers to be in your own server with the code of your application.

<script type="text/javascript" src="../js/OpenLayers-2.11/OpenLayers.js"></script> 

Finally, the third option includes the uncompressed code of the OpenLayers library, which in fact includes many other files required by layers, controls, and so on.

<script type="text/javascript" src="../js/OpenLayers-2.11/lib/OpenLayers.js"></script> 

This option is mainly used by programmers who want to extend OpenLayers and need to debug the code.

Tip

I encourage you to work in this mode. Use some tool such as Firebug for Firefox web browser or the Chrome browser console and put breakpoints on OpenLayers classes to better understand what is happening.

It is worth saying when using this method lots of files are loaded from the server, one per class, which means many more server requests are made.

The most notable impact of this is that the page load time is much longer than with the previous options.

There's more...

If you choose to download OpenLayers and include it within your project, you don't need to put the whole uncompressed bundle. As you can see, it contains lots of files and folders: source code, building scripts, test code, and other tools, but only a few are really required.

In this case, the only things you need to attach are:

• The all-in-one OpenLayers.js file

• The theme and img folders

See also

• The Understanding base and non-base layers recipe

• The Creating a simple full screen map recipe