If you’re familiar with jQuery you should already know what are selectors and how they work. However we’re used to get some DOM element with a specific selector, but actually sometimes you cannot select directly what you need. This is especially true when mixing more than one JavaScript libraries. In my case OpenLayers generated a vector layer and jQuery was supposed to change the vectors fill-color property.

With the simple $(‘path’) I easily got all vectors in the current document, but the problem was that I took them as text. Thus it came to me to use nested jQuery – $($(‘selector’));

To describe what actually happened in my case, let me show you a breve example.

Example

Here’s a short HTML markup:

text text

With jQuery I can select both the DIV and SPAN with the simple $(‘div’) and $(‘span’), but just for the example lets assume I’ve only the inner text of the DIV tag:

$('div').html();

That was the case in the OpenLayers/jQuery problem. Now I can easily use another jQuery selector:

$($('div').html());

This will return the same as $(‘span’) – a jQuery object.

The way OpenLayers puts markers on the stage is fine when they are not so much, but once you need more than 100, the library’s solution is not good. The question is is there a way to put all the markers faster than the built in method.

Yes, There is a Way to Speed Up Markers Load

I once wrote about how to speed up markers on OpenLayers, it is clear that my decision was to concatenate the DOM elements like a string after I’ve generated all the markers as markup with innerHTML as it’s faster than appendChild. The only question left is how to convert Longitude/Latitude pair in pixels.

The Answer’s Given by OpenLayers

There is a method called getLayerPxFromLonLat() which do the job. Let me show you a snippet:

ll = map.getLayerPxFromLonLat(new OpenLayers.LonLat(lon,lat));
console.log(ll);

You can see what’s inside the ll object. You can now reference the pixel as ll.y and ll.x.

They chain of classes used to construct and make one single marker in OpenLayers is a bit difficult to follow, but isn’t impossible. There are three main classes in three files:

Markers.js
Layer/Markers.js
Icon.js

That’s why after tracking the code in them I noticed the library’s using appendChild in a line like that:

this.div.appendChild(markerImg);

The problem is that if you’ve a loop with probably hundreds of iterations this is really slow. What I intent to do is to return only the generated code as string, or instead of returning the element, I can return the string. Than concatenate it after the loop’s over.

That will be way faster!

Following several posts I wrote recently, this one will describe you a simple and robust tutorial how to optimize OpenLayers. My goal is pretty simple. I’d like smaller library but still with everything must work correctly. The fact is that OpenLayers comes with more that what I need so I’m going to exclude some files from the build process.

Step 1

This procedure I found here, and what I made is to copy/paste the whole list described there. The problem is that immediately the application stopped working, but in the same time I could catch what errors were stopping it and simply I was able to include again those files needed by my application.

Step 2

Even when I excluded everything from the library, there are some files I don’t need but that enter the resulting build. That’s because they depend on classes I need and the builder is simply adding them. The solution, even stupid enough, is to comment them all.

Note that on every step you need to check if the application is still fully functional. That’s a bit annoying, but it comes on the price of faster app.

Step 3

Change the compiler! Actually now OpenLayers is using JSMin, but I personally use Google Closure Compiler with it’s default level of optimization. Thus the resulting OpenLayers is 312K and still fully functional. After GZip it becomes even smaller and the load time is pretty good.

Now I’m using YUI Compressor for my project and when I decided to make an experiment with Googles’ software it was just because I’d like to gain loading savings. In the project I’m working on I use two famous JavaScript libraries: jQuery and OpenLayers, and the result was really good. The compiled code was smaller than the YUI compressed source and the savings where more than 50% for non-gzipped requests.

The problem is that the resulting code, even successfully compiled after what Google said, was producing errors on the site and wasn’t working correctly. That why I’m leaving the title as a question and I’ll continue my experiments with this approach until I get any good results.

The problem is that the library supports so many protocols, controls and tools that you probably never use in your application and because of this the size of the resulting, compressed javascript file is around 700K, which is too big for any javascript file at all. That makes your site slow and the user experience is really awful!

The solution is to cut that functionality that you don’t use, which is not so easy. You’ve to be careful doing this, just because you can crash you application by removing something that seems to be useless but in fact isn’t.

I’ve used this technique and managed to make the resulting javascript file up to 400K. And this is really simple – just add the files your application don’t need to the .cfg file you use for compression. Usually this fils is in the /build directory of OpenLayers.

Even more – I’ve seen some other developers managing to reduce the size up to 300K and that’s more than twice which is really very good result.

The other thing I’d like to do with that library is to explore with care the code inside and to optimize anything I can. There are too many style reflows in some classes and that’s what’s visible on the first look. I suppose there are much more things to optimized in it.

I’ll start doing my research and optimization and I’ll let you know what happens in numbers!

If you’re not familiar with OpenLayers library, in breve this is a JavaScript library which interacts with a tile server such as this of OpenStreetMap.org

Vectors

Because it’s JavaScript OpenLayers library it renders different types of vectors when it becomes the case of vectors. It tries the VML way, but as you may know not every browser support it.  Actually everything works fine in every browser, and that’s the good part of OpenLayers, which is one of the best JavaScript organized project I’ve worked with.

The problem is that if you’ve something in the DOM with z-index over the vector layer IE’s giving problems because as it appears it cannot be rendered.

The solution is to draw the layer but skip the .addLayer before the vectors should be seen. You than remove the DOM element, which is over the vector layer you set .setVisibility(true) and the layer appears on the stage.

So far this is the only solution I got, but there may be others.

OpenLayers is a open source JavaScript library, which helps for the usage and development of web based map applications. Usually when you use something like http://openstreetmap.org/ you’ve a tile server, which contains, or dynamically, renders tiles on a specific coordinates and zoom level. Such application in basic are most of the map servers you may know, as Google, Yahoo and Live (now Bing). Than you need a layer above that, that must generate the correct HTTP queries to the server and after receiving the tiles to position them correctly. Of course a open library like OpenLayers do much more. In fact this is complex JavaScript application that gives enough flexability to manipulate rich map applications.

How to disable the zoom with the mouse wheel

Very common problem (if we can say so) in map sites is the scroll, cause sometimes the user wants to scroll the page, and sometimes to scroll the map, which action results in zooming the map. Yes, there are so many solutions as many are the combinations of those scenarios. But the case here was how to disable the mouse wheel on OpenLayers.

Why it’s not working

Described in the documentation as a simple task, it appears to be not so much! Following the official instructions, you must add those lines of code:

var movemap = new OpenLayers.Control.Navigation({'zoomWheelEnabled': false});

movemap.disableZoomWheel();

… but that’s not working.

How to make it really work

Actually something’s blocking the effect of disableZoomWheel in the chain of the Control class, so the solution is as simple as it’s:

controls = map.getControlsByClass('OpenLayers.Control.Navigation');

for(var I = 0; i < controls.length; ++i)
     controls.disableZoomWheel();