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.

Zend_Gdata

Zend Framework gives you the possibility to interact with Gdata services, which are provided by most of the Goolge services. You can find more on the docs page of Zend_Gdata. The basic principle is that you can connect a service with you API key, given by Google. What I’m about to show you is how do connect such a service.

In theory Zend_Gdata depends on Zend_Http_Client and you’ve to connect it with an instance of this class.

// 1. setup API key
$apiKey = 'your_api_key_here';
 
// 2. retrieve videos via GData Atom
$client = new Zend_Http_Client();
$gdata = new Zend_Gdata_YouTube(null, 'my-app', null, $apiKey);

Note that you’ve to replace your API key in the chunk above.

Now once that you’ve connected the YouTube service you can iterate through the entries from the video feed.

$videoFeed = $gdata->getUserUploads('username');
foreach ($videoFeed as $entry) {
    echo $entry->getTitle();
}

The thing is that you can modify a bit the code above. As ZF docs says if you don’t setup a Zend_Http_Client a default with default configuration, so you can omit this and simple write:

// 1. setup API key
$apiKey = 'your_api_key_here';
 
// 2. retrieve videos via GData Atom
$gdata = new Zend_Gdata_YouTube(null, 'my-app', null, $apiKey);

IDEs and Autocompletion

One of my favorite things in IDEs, in my case Eclipse for Mac, is that they offer you the option of autocompletion. No developer knows the entire set of functions of the language he uses, neither the set of parameters of them. That’s why IDEs come to help.

In many cases when casting is not obvious and method call chain is to large your IDE may refuse to help you with this brilliant functionality. To be more precise let me give you an example.

In Zend Framework I was trying to fetch a RSS via Gdata interface. Something like that:

$videoFeed = $gdata->getUserUploads('youtube_username');
foreach ($videoFeed as $entry) {
    // do something
}

The problem is that whenever I try to do $entry-> in the body of the foreach loop I don’t see what methods are supported by the Zend_Gdata_YouTube_VideoEntry class. So I tried to force the casting of $entry to this class definition and it worked like a charm for me. The thing I’ve done was to add a definition of $entry before the loop body:

$videoFeed = $gdata->getUserUploads('youtube_username');
$entry = new Zend_Gdata_YouTube_VideoEntry();
foreach  ($videoFeed as $entry) {
    // do something
}

Than whenever you try to type $entry-> you’d receive a list of methods from the class definition of Zend_Gdata_YouTube_VideoEntry.

Thanks to Roy Ganor there’s a more elegant way to do this, simply by adding @var comment:

/* @var $entry Zend_Gdata_YouTube_VideoEntry */

What if …

continuing from the previous post let assume there’s the following code:

if ( thisIsTrue ) {
   if ( myFuncReturnsTrue() ) {
      printMe('success');
   } else {
      printMe('error');
   }
}

This can be easily ported to:

thisIsTrue && (myFuncReturnsTrue() ? printMe('success') : printMe('error'));

Source

You can see the demo source here. Here’s a snippet:

function func1() {
	alert('func1');	
}
function func2() {
	alert('func2');	
}
 
var a = true;
var b = false;
 
a && (b ? func1() : func2());

A “Typical Installation” …

As most of the desktop software gives us opportunity to choose from typical or custom installations, let me write what’s a typical IF conditional statement in JavaScript and … every other programing language.

if ( thisIsTrue ) {
    printMe("some message");
}

A “Custom Installation” …

The first thing you can improve from the code above is removing the brackets.

if ( thisIsTrue )
    printMe("someMessage");

Because in JavaScript everything’s on the client – every symbol matters. What if we remove as much as we can!

thisIsTrue && printMe("someMessage");