Tag Archives: openlayers

2xjQuery: Select a Selector

Selectors in jQuery

jQuery JavaScript Library

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.

OpenLayers

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:

<div><span>text text</span></div>

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.

OpenLayers Can Be Faster!

Put All The Markers at Once!

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.

Optimizing OpenLayers. Speed up markers load time!

Icons in OpenLayers!

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!

OpenLayers extreme optimization. Cut, compress and deploy!

Make it really 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.

Google Closure Compiler?

Yes, it’s a question! After reading about jQuery version 1.4 I saw something that seemed to be pretty interesting to me. jQuery is now using Google Closure Compiler to minify and compile it’s source. The result was smaller output file.

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.