OpenLayers tutorial – build custom OpenLayers file

What is the problem?

Compress!

Build custom OpenLayers file! The current stable version of a Leaflet JavaScript library (Leaflet 0.6.2) has only 119.7 kB. (Leaflet is accordint their statement: “a modern open-source JavaScript library for mobile-friendly interactive maps”.) The current version of a OpenLayers library has 770.1 kB. May be You’re asking: So what?

It has to download approximately 7 times bigger file. If you are developing apps for a mobile, tablets, or you just want to have fast and responsive, not consuming all of your memory web&map application, you should consider to make it smaller. Yes, make it smaller! OpenLayers is great map library, but it has wide use. Usually people do not need all of its source, just part of it. So need for making it smaller is real. Fortunately, it is possible, and it is not to hard.

If I should be right, it is not compiling, really. It just deleting, splitting, changed, again deleting classes or files what you do not need.

Build custom OpenLayers

There are basically two different forms of OpenLayers Javascript files. First one is already compiled and built into one file, and you can download it from here: http://openlayers.org/api/2.13/OpenLayers.js. Second option is so called development version. You can download a zip file or get it faster with a git command: git clone https://github.com/openlayers/openlayers. You should be in you web page root directory:

After you ran command, library with all its dependencies and files should be downloaded.

We need exactly this second option. After you wrote your application, you know, what class you need, and which one you do not need. I will use this great application, which we wrote in a first OpenLayers tutorial, just run it by clicking  HERE. A few basic steps for build own version of OpenLayers:

  1. You need to create your configuration file in directory OpenLayers/build. Configuration file for compiler has *.cfg extension. Because I am kind of lazy, I’ve just made a copy of light.cfg and called it myversion.cfg.
  2. Open file myversion.cfg and you should start to remove uneccesary classes from the [include] part. For demonstration I moved those I do not need to [exclude] part, You can just delete it.
  3. To compile own build file of OpenLayers, you can run unix command

    or in Windows command line:
  4. And at the end you should make a little changes in your code. Change OpenLayers javascript source location in index.html to new one, for example, change it like this:

    Change settings of OpenLayers library in you map.js code. You should set new location of images, for example:

    and create map object with this additional option as well:

    I will post new parts of map.js code here:

You already compiled your OpenLayers source code with jsmin python based compiler. Your code was compressed to 194.1 kB.

Use Google Closure Compiler!

For even better results, you should use a Google Closure Compiler (Recently I wrote article about Google Closure Tools). Few steps how to do it:

  1. Download the latest version of Closure Compiler here: http://closure-compiler.googlecode.com/files/compiler-latest.zip
  2. Copy closure-compiler.jar from zip package to openlayers/tools
  3. Change a little bit command for compiling to this:

Wau! Results are even better! With Closure Compiler We get file compressed to 152.7 kB!

I can say, we made a very good progress. From original Javascript file which had around 700 kB, new one was compressed to 152.7 kB.

For more information you can visit this site  http://trac.osgeo.org/openlayers/wiki/Profiles or this site http://docs.openlayers.org/library/deploying.html.

 

Please tell what you think