I wrote this post some months ago, before I publish the OpenLayers Cookbook, but I never published it thinking it could start a flame war instead a constructive thread.

Today, after a twitter conversation (thanks @Starefossen @brymcbride @erilem @mourner and @LeafletJS) I think it is time to publish it.

OpenLayers

OpenLayers is a great project. I think it is the most complete GIS project for creating web mapping applications. Its completeness makes it also a bit complex, but a complexity that is necessary.

OpenLayers allows to use raster and vector layers. Respect vector layers we can load data from different data sources (files, WFS servers, …) and with different formats (GML, GeoJSON, KML, …). OpenLayers allows to render geometries using different technologies (SVG or Canvas) in a way transparent to the user. Its design tries to follow as close as possible the standard concepts of features, geometries, attributes and tries to implement most of them (WMS, WFS, SLD, …).

In summary, OpenLayers tries to offer all the things a complete GIS project could need. Its desing has made having all this in mind and results in a big and complex architecture but, take into account, which is necessary to give response to all the requirements.

Leaflet

On the other hand we found a project like Leaflet, designed from the beginning with a philosophy close to  ”make it without complexity” or ”offer only that things required to create a simple maps“.

Leaflet offers raster layers (from a tiled source), vector layers, markers and popups and, every day, a growing set of plugins adding more features to it: read GeoJSON files, clustering strategy, etc.

Leaflet is much more lightweight and, to create a simple map, it is more simple to use.

The secret behind the fame of Leaflet

IMO Leaflet has two main aspects that has made it the perfect option to be used in thousands of web pages: its look and feel and its coding style.

The Leaflet L&F is better than OpenLayers: buttons and layer switcher (among others) looks like an actual and fresh project instead like an almost 10 years old project like OpenLayers.

The Leaflet coding style is actual. The use of short namespaces and the chaining functions style (something like jQuery) makes it feel like a modern project and, probably, easier to use than OpenLayers.

What about Leaflet plugins?

Many of you can think “what about the plugins?” It is known one of the key aspects of Leaflet is the fact it offers a base code on which develop other plugins to make the platform better and greater. Yes, that is nice but is not always true.

For me, the growing set of Leaflet plugins remember the myriad of jQuery plugins. Most of them are great, awesome, but not all of them follow the same rules. Every developer can create plugins without a common design or architecture integration.

For example, the Leaflet.markercluster plugin (from Dave Leaver @daveleaver) is an awesome plugin that allows to make the same as the cluster strategy on OpenLayers, that is, group “points” which are too close and can overlap each other.

I must to say I start coding the AnimatedCluster strategy for OpenLayers after seen the Dave’s work, which I consider superior to mine.

The Leaflet.markercluster version is based in the concept of markers while the AnimatedCluster follow the more standard concept of feature.

To style markers in the Leaflet.markercluster you need to implement a iconCreateFunction and pass to the constructor which must be responsible to set the CSS style for each marker depending on the number of points it clusters (see the _defaultIconCreateFunction as a sample).

In the AnimatedCluster we have all the power of the features, geometries and styles OpenLayers offers us. We can create a vector layer, assign the AnimatedCluster strategy to it with some rules to style and automatically our layer will act as a cluster layer (please read the post Animated marker cluster Strategy for OpenLayers for more detailed explanation).

The fact OpenLayers is designed with many requirements in mind allow to work with a set of well designed pieces, like vector layers, features, geometries, styles, protocols and formats. But in contrast it adds some rigidness to implement new features that must conform the “global” rules.

On the other hand, Leafet lacks from a “global” design and, because of this, two similar plugins can follow to different implementation without the option of “reuse concepts” (think in another plugins that styles markers). But this lack of “global design” is what makes Leaflet be more flexible than OpenLayers.

Conclusions

IMO, both OpenLayers and Leaflet are great tools for different (but also similar) purposes. I consider Leaflet ideal for web pages with relatively simple maps (to create great visualizations with markers, popups, etc) but for a more GIS oriented solution I have no doubt of using OpenLayers.

Having that in mind it is easy to see there are a bigger number of sites requiring something like Leaflet instead of OpenLayers. The 90% of users requires a “simple map solution” instead a GIS solution. Having that in mind it is easy to see we are comparing a “simple map solution” with a GIS solution and I ask you: why?

As developer we have the pleasure to have two great tools on our bag. It is our responsibility to use the appropriate one on each situation.

Related Posts:

• Open alternatives to Google Maps
• AnimatedCluster pan related bug… fixed !!!
• OpenLayers presentation and OpenLayers Cookbook examples code update
• Improved performance on the AnimatedCluster for OpenLayers
• Creating static maps in OpenLayers using PhantomJS

SimplyWrite is a free web distraction writing tool that recognizes the lightweight markup language Markdown, an easy-to-read, easy-to-write plain format which allow to enrich the text.

Features

• Auto show/hide of menus to allow a clean working area.
• Show working and total timer. Total timer counts the time since you open SimplyWrite. Working timer counts the time you have set active the SimplyWrite page.
• Count lines, words and characters.
• Export your writes to a new page, ready to be saved.
• Allow to configure font family and size.
• SimplyWrite stores all your writes on the client side. It makes use of the HTML5 local storage feature so no server is required.

Be careful with this feature. You can lost your data if you manually clean the broswer cached data and also browser cleans the local storage area automatically when the space used grown over some value (like 500mb).

The source code of SimplyWrite is available at GitHub under MIT license. Feel free to contribute.

The Design

I would like to specially mention the fact the SimplyWrite design was made by my friend Guillem Sevilla (@gllmsvll) a great minimalism designer !!!

Technology

SimplyWrite has been a nice challenge for me. It gives me the opportunity to work with the next tools:

• grunt, the awesome JavaScript task runner. It allows, among others, to minimize and concatenate files.
• grunt-bbb, the grunt Backbone Boilerplate Build extension. Simplifies the work with Backbone framework.
• backbone, a lightweight MVC framework.
• backbone.layoutmanager, an extension of backbone to improve the work with views.
• CodeMirror, an awesome code editor component for the browser.
• Bootstrap, a front-end framework used for the UIX.

Related Posts:

• Things I learned creating a jQuery Plugin (Part II)
• OpenLayers presentation and OpenLayers Cookbook examples code update
• Improved performance on the AnimatedCluster for OpenLayers
• Awesome clustered markers in Leaflet
• Look mom no jQuery !!! Getting all CSS properties of a DOM element in pure JavaScript

Hopefully, for those who work or start working with GeoServer, recently Packt Publishing has released a new book titled GeoServer Beginner’s Guide.

Written by Stefano Iacovella, with contributions from Brian Youngblood, the book guide us on the main topics to work with GeoServer, through the next list of chapters:

Chapter 1: GIS Fundamentals
Chapter 2: Getting Started with GeoServer
Chapter 3: Exploring the Administrative Interface
Chapter 4: Accessing Layers
Chapter 5: Adding Your Data
Chapter 6: Styling Your Layers
Chapter 7: Creating Simple Maps
Chapter 8: Performance and Caching
Chapter 9: Automating Tasks: GeoServer REST Interface
Chapter 10: Securing GeoServer Before Production
Chapter 11: Tuning GeoServer in a Production Environment
Chapter 12: Going Further: Getting Help and Troubleshooting

Despite of its title, the book is great from newbies to those with intermediate knowledges on GeoServer, and also put some efforts on advance topics, like performance and configuration for production environment chapters.

Personally, I like the way Stefano writes: simply, plain and, most important, making clear complex questions. In addition, the book is plenty of samples and figures which help us to understand better what is talking on.

Conceptually, we can divide the book in three sections: introduction (chapter 1, 2 and 3), basic or common usage (chapters 4, 5, 6 and 7) and advanced topics (chapter 8, 9, 10 and 11).

The book introduces us in the GIS world  (chapter 1) starting with an introduction of many related topics: projections, coordinate systems, modeling information, etc. After this, it shows how to install GeoServer (chapter 2) in two different operating systems: Ubuntu Linux and Windows and finally, passed to show the main aspects of the administrative interface of GeoServer (chapter 3).

From here, the book covers the main aspect on how to access, add and serve data (chapter 4 and 5), how to style to serve them in a better way (chapter 6) and basic samples on how to create maps against GeoServer using Google Maps, OpenLayers and Leaflet libraries.

The third block, concentrates improving the performance of the server using the GeoWebCache system (chapter 8), administer GeoServer via its REST interface (chapter 9), securing its access and administration (chapter 10) and tune it up ready for a production environment (chapter 11).

The book is mainly oriented to WMS but dedicates the chapter 12 to talk specifically on WFS and WCS, also supported by GeoServer.

Without a doubt, GeoServer Beginner’s Guide is a book must be on your working table.

Related Posts:

• Generating map tiles without a map server. GeoTools the GIS swissknife.
• AnimatedCluster pan related bug… fixed !!!
• OpenLayers presentation and OpenLayers Cookbook examples code update
• Projections, projections, projections
• Improved performance on the AnimatedCluster for OpenLayers

In the first part we have seen how the structure of a jQuery plugin must be, the plugin entry point (so called wrapper function) and how we can control the behavior of a method as a getter or setter.

Define default options

Your plugin more probably will accept different set of options to allow some configuration. For these reason it is important to define a set of default options which will be applied in cases where no options are specified by the user. Place it within the jQuery wrapper function is a good practice:

//
// Default options
//
$.fn[pluginName].defaults = {
    opt_A: ""
};

Encapsulate your plugin code

A good practice is to encapsulate the logic of our plugin within a function, this way our plugin’s entry point function can easily initialize or call the right method.

For example, in a really simple wrapper function, that simply initializes a plugin’s instance on each selected element, we could write something like:

$.fn[pluginName] = function(options) {
    return this.each(function() {
        new Plugin(this, options);
    });
}

The plugin constructor

The main part of your plugin is the constructor function. Usually this function is responsible to initialize the plugin, store a reference to the selected element or merge the passed options with the default ones:

function Plugin(element, options) {
    // Store references to the selected element
    this.el = element;
    this.$el = $(element);

    // Merge passes options with defaults
    this.options = $.extend({}, $.fn[pluginName].defaults, options);

    // ...other code here...

    // Initialize the plugin instance
    this.init();
}

Prototype your plugin

Once the Plugin function is defined we can modify its prototype adding all the desired methods we want for our plugin.

There are a couple of methods are a good practice to implement:

• A init method, which initializes each plugins instance: creating new DOM elements, registering listeners, etc
• A destroy method, responsible to free any resource used by the plugin: extra elements, unregister listeners, etc.

Other methods can be created within your plugin’s prototype but remember the convention: Use method names starting with underscore for those methods we want to be private.

If you remember the first part of this series, what really happens is when you call a plugin’s method, the wrapper function of our plugin checks if the method’s name starts with underscore and if so then avoids the call.

//
// Plugin prototype
//
Plugin.prototype = {

    //
    // Initialize the plugin instance
    //
    init: function() {
        ...
    },

    //
    // Free resources
    //
    destroy: function() {
        ...
    },

    //
    // Public method
    //
    publicMethod: function() {
        ...
    },

    //
    // Private method (it starts with an underscore)
    //
    _privateMethod: function() {
        ...
    }

}

A note on the destroy method

As we have commented, the destroy method must free any resource used by the plugin instance, like extra created elements, unregister listeners, etc

If you remember the first article, you will notice that the plugin’s instance is stored within the selected DOM element where the plugin is applied:

$.fn[pluginName] = function(options) {
    var args = arguments;

    if (options === undefined || typeof options === 'object') {
        // Creates a new plugin instance, for each selected element, and
        // stores a reference withint the element's data
        return this.each(function() {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
        });
    } 

    ...
};

That occurs in the line:

$.data(this, 'plugin_' + pluginName, new Plugin(this, options));

So, the last action in your destroy method must be always remove the plugin’s instance reference from the element’s data. This can easily done using the reference to the DOM element stored in the plugin instance:

//
// Free resources
//
destroy: function() {

    // Remove elements, unregister listerners, etc

    // Remove data
    this.$el.removeData();
}

Allow the use of callbacks in our plugin

It is common jQuery plugins allows to register callback functions to be called when an event or action is generated by the plugins. For example, in the tagger plugin the user can be notified when a new tag is added, removed, clicked, etc.

Next lines shows the initialization of the tagger plugin setting the parameter fieldSeparator to a value different from the default options value and registering a callback function for the onTagAdded event:

$('#inputID').tagger({
  fieldSeparator: '|'
  onTagsAdded: function(tags) {
    console.log('Added new tag: '+tags+'\n');
  }
});

To achieve this we need to make to main steps:

1. Define a default and empty callback function in the plugins default options.
2. At some place of our plugin’s code make a call to the callback function.

Continuing with the sample of the tagger plugin, its default options looks like:

//
// Default options
//
$.fn[pluginName].defaults = {
    fieldSeparator: ",",
    readOnly: false,
    // Callback invoked when user calls the 'tags' method
    onTagsAdded: function() {
    },
    // Callback invoked when user calls the 'remove' method
    onTagsRemoved: function() {
    },
    // Callback invoked when user calls the 'clear' method. 
    // Note: Internally the 'clear' method uses the 'remove'.
    onClear: function() {
    },
    // Callback invoked when the user click a tag label
    onClick: function() {
    }
};

Later, in the method responsible to add new tags to the tag list, a call is made to the onTagsAdded function:

// Adds one or more tags
// ...
//
tags: function(tags) {
      ...    
      // Call the callback
      this.options.onTagsAdded.call(this, tags);
      ...
    }
},

Note how we have forced to set the this object and passed the value of the new added tag to the callback function.

Summary

Ok, this is the end. A short series of two articles to introduce the main concepts to creating jQuery plugins isn’t a bad thing when you are looking for help starting with jQuery and custom plugin development.

Let’s try to summarize the main points we have seen in this couple of posts:

• Understand the importance of entry point to your plugin. This is handled in a new function on the $.fn object and is responsible to (or can) control: plugin initialization, call to setter or getter methods, simulate private methods, etc.
• Encapsulate your plugin’s functionalities in a prototyped function
• Store, if needed, a reference to the DOM element where your plugin is applied to.
• Remember to implement a destroy method responsible to free all the resources used by your plugin
• Create a default options object that serves as a base to extend it with the options specified by the user
• Keep calm and remember try and error is a (necessary) way to learn

References

The web is plenty of great information:

http://docs.jquery.com/Plugins/Authoring

http://www.websanova.com/tutorials/jquery/the-ultimate-guide-to-writing-jquery-plugins

http://jqueryboilerplate.com/

https://github.com/zenorocha/jquery-plugin-patterns

http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns

Related Posts:

• Filling Flexigrid with JSON/XML data
• Things I learnt creating a jQuery Plugin (Part I)
• tagger, a jQuery Plugin to manage tags
• Look mom no jQuery !!! Getting all CSS properties of a DOM element in pure JavaScript
• Crop image on the client side with JCrop and HTML5 canvas element

Unfortunally, the last version (v0.2) has a ugly bug. The code works fine when you change the zoom level but clusters are not updated when you pan the map.

I’m happy to say right now I have uploaded a new version (v0.3) which fixes this bug on my GitHub repository. Basically, now the code controls if the action is a zoom change or a pan movement and updates and animates the clusters accordingly. That is, if you pan the map the clusters on the current level are recomputed.

Take into account this can cause the features where clustered in different clusters, so you can see how bubbles changes its position and number of features within it.

In addition, the demo page has been updated with the new version. Check it !!!

Thanks to all the great people that has sent me their experiences when using the AnimatedCluster !!!

Related Posts:

• Improved performance on the AnimatedCluster for OpenLayers
• OpenLayers presentation and OpenLayers Cookbook examples code update
• Animated marker cluster strategy for OpenLayers
• Dojo + OpenLayers = New Challenges
• Open alternatives to Google Maps

One of the key aspects of jQuery is the possibility to extend it with new functionalities, so called plugins. For those who has a basic knowledge of jQuery and want or need to create a new jQuery plugin this post tries to be a helping summary of good things to take into account.

Before to start

Because of the flexibility and powerful of the language, the Perl community is proud of his Tim Today motto,  that is:

There’s more than one way to do it

You can consider the same for JavaScript, that’s true. The fact JavaScript is not an object oriented language but a prototype based language allows to follow the OOP paradigm in many different ways. Looking for a template code to create a jQuery plugin I found tons and not all following the same conventions and ideas.

Here I present a mix of the most accepted templates and its key aspects.

The code

Accompanying the article you can find the self documented version of the boilerplate code at my GitHub repository.

Where to start

If you are planning to create a jQuery plugin, the first places I suggest you to start reading is the Plugins/Authoring section of the project documentation. It is a great starting resource but in the real live you will find soon you need to know a bit more of that.

Using a jQuery plugin

Suppose we have a jQuery plugin called beautyLink, that transform a normal link (the <a> element) into a really nice one changing the font family, text and background color. So we need to include it in our page before start using it:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-beautylink.js"></script>

The conventional way to create and apply it on an element would be:

$('#linkID').beautyLink();

or, if you want to apply on each link of the current page:

$('a').beautyLink();

Later, to change the text color to red we could invoke a plugin’s public method like:

$('#linkID').beautyLink('color', 'red');

or to retrieve the current text color:

$('#linkID').beautyLink('color');

that is, the color method can act as a setter or getter depending if we pass a value or not.

Creating a new plugin

All right, we know how to use a plugin but we want to create a new one. The first step we need to do is to create a new JavaScript file where to place our code. As a good practice this file must contain a documentation header section with the plugin’s name, version, author contact information, license, etc

When we include the JavaScript file in a web page we need the code to be auto-executed so the plugin can be registered within the jQuery. To do so all the JavaScript code in the file must be inside the code:

(function($, window, document, undefined) {
  // The code here
})(jQuery, window, document);

This way, the code of our plugin will receive a reference to the jQuery library, the window and the document and, also, an undefined reference on the undefined parameter that we can use to compare undefined values (wow, that was too much undefineds in a sentence).

The wrapper function

To create a jQuery plugin we need to register a new function in the jQuery.fn object. This is an array where jQuery stores references to all available or included plugins in the current page. To add a new one simply write something like:

jQuery.fn.myPlugin = function(options) {
  // Do your awesome plugin stuff here
};

or

jQuery.fn['myPlugin'] = function(options) {
  // Do your awesome plugin stuff here
};

The function you define here is the entry point to your plugin. It is a wrapper function that must handle the plugins initialization or invocation to any plugin’s method.

How to distinguish the action?

The question is, how do we implement the plugin’s wrapper function to distinguish if it must initialize the plugin or call a method? The answer is in the options parameter.

When we instantiate a plugin without passing any argument the options parameter is undefined:

$('#linkID').beautyLink();

If we instantiate passing any argument the options parameter is an Object:

$('#linkID').beautyLink({
  someOption: 'a',
  someOther: 123
});

Finally, if we are calling a plugin’s method like:

$('#linkID').beautyLink('color', 'red');

then the options parameter is an array with two elements ['color', 'red']

The starter code for the wrapper function

With the above in mind, we can write the base code for the wrapper function:

$.fn[pluginName] = function(options) {
    var args = arguments;

    if (options === undefined || typeof options === 'object') {
        // Creates a new plugin instance

    } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
        // Call a public pluguin method (not starting with an underscore) and different
        // from the 'init' one

    }
};

Chainable or not chainable

jQuery is famous (and powerful) by its chainable way to work, that is, a call to a method returns a reference to the same element so we can make another call. For example:

$('#someID')
  .parents(".pane")
  .animate({ opacity: "hide" }, "slow");

or applied to our plugin:

$('#linkID')
  .beautyLink('color', 'red')
  .beautyLink('backgroundColor', 'black');

We must think which of our methods must be chainable and which ones not. For example, the getter methods must break the chainability. In our case we want a call to:

$('#linkID').beautyLink('color');

returns the red value and not a reference to the element to make another call.

Implementing chainability

When the wrapper function $.fn[pluginName] is called the this reference points to:

• the selected DOM element, like when using:

  $('#linkID').beautyLink('color', 'red');

  or

• a list of selected DOM elements, like when using:

  $('a').beautyLink('color', 'red');

Next code shows a very basic wrapper function that initializes a Plugin instance for each selected element. This results in a chainable call that returns a reference to the same element ready to make another chained call:

$.fn[pluginName] = function(options) {
    return this.each(function() {
        new Plugin(this, options);
    });
}

Avoiding chainability

The solution to avoid a method were chainable is easy, simply doesn’t write the this.each() and execute code on the first occurrence, that is, the this[0].

This will be more clear in the final code.

The jQuery.data() function

We make use of the $.data() function in our code so a short explanation is required.
The $.data() function allows to store arbitrary data on an element (or get is value).

It is important because we store a reference to the Plugin instance on each element it is applied. This allow us to check if an element has already applied a plugin or we need to instantiate it. This will be clarified in the final wrapper function code.

The backbone wrapper function code

With all the above in mind, we can write our final plugin’s wrapper function. To summarize:

• If plugin is called without arguments, then the plugin is initialized and a reference is stored in the DOM element.
• If a plugin’s method is called and it isn’t a getter method, then the method is called maintaining chainability.
• If a plugin’s method is called and it is a getter method, then we return a value and break the chainability.

$.fn[pluginName] = function(options) {
    var args = arguments;

    if (options === undefined || typeof options === 'object') {
        // Creates a new plugin instance, for each selected element, and
        // stores a reference withint the element's data
        return this.each(function() {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
        });
    } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
        // Call a public pluguin method (not starting with an underscore) for each 
        // selected element.
        if (Array.prototype.slice.call(args, 1).length == 0 && $.inArray(options, $.fn[pluginName].getters) != -1) {
            // If the user does not pass any arguments and the method allows to
            // work as a getter then break the chainability so we can return a value
            // instead the element reference.
            var instance = $.data(this[0], 'plugin_' + pluginName);
            return instance[options].apply(instance, Array.prototype.slice.call(args, 1));
        } else {
            // Invoke the speficied method on each selected element
            return this.each(function() {
                var instance = $.data(this, 'plugin_' + pluginName);
                if (instance instanceof Plugin && typeof instance[options] === 'function') {
                    instance[options].apply(instance, Array.prototype.slice.call(args, 1));
                }
            });
        }
    }
};

Take into account, we have also defined an array where to specify which method can act as getters when they are invoked without any argument:

$.fn[pluginName].getters = ['someGetterMethod'];

To be continue…

We have seen the basis on how to create a jQuery plugin and learnt about the importance of the wrapper function, which is the entry point to our plugin.
In the next post I will explain how we can organize our plugin code, the responsible to implement functionality, how to create private and public method, etc.

Related Posts:

• Filling Flexigrid with JSON/XML data
• tagger, a jQuery Plugin to manage tags
• Look mom no jQuery !!! Getting all CSS properties of a DOM element in pure JavaScript
• Crop image on the client side with JCrop and HTML5 canvas element
• Customizing jQuery UI Dialog: hiding close button and changing opacity

I used jQuery in many projects and for many different things, thanks to the legion of existing plugins I always found a solution to my issues… since today.

I was looking for plugins to manage tags. Of course I found many alternatives but no one likes me. Some of them lake from desired methods, others was based on additional libraries (like jQueryUI) where I want a more simple solution, some others was too complex to change its style or, other times, simply I found its code them too much complex for something I consider more simple to do.

The problem

I was developing a web site using Twitter Bootstrap framework and I needed a jQuery plugin to manage tags. The requirement was the plugin has a look and feel based on the Bootstrap components: labels, icons, buttons, etc

After looking for a couple of days, testing some plugins and looking on its source code I realize neither of them likes me, so I start developing my custom alternative.

The tagger plugin

In a boast of originality I called the plugin tagger and it can works in two modes (read or write mode) depending on if you want to simply show some tags or you want to change the tags list adding or removing.

To remove a tag you can simply click the remove icon on each tag and to add new tags you must click the plus sign. This makes a little form opens with an input text element where you can write the desired tags to add to the list.

Documentation

I have prepared a special web page that acts as documentation page and shows the plugin in action.

Source Code

This weekend project open and free so feel free to contribute with new features and improvements. You can find at my GitHub repository tagger.

Related Posts:

• Things I learnt creating a jQuery Plugin (Part I)
• Filling Flexigrid with JSON/XML data
• Look mom no jQuery !!! Getting all CSS properties of a DOM element in pure JavaScript
• Crop image on the client side with JCrop and HTML5 canvas element
• Customizing jQuery UI Dialog: hiding close button and changing opacity

Both the presentation and source code examples materials are freely available at my repository on GitHub as open projects and I would like you contribute to:

• OpenLayers Cookbook Examples: https://github.com/acanimal/Openlayers-Cookbook
• OpenLayers Presentation: https://github.com/acanimal/OpenLayers-Presentation.

The presentation is available online at http://acanimal.github.com/OpenLayers-Presentation and the cookbook examples at http://acanimal.github.com/Openlayers-Cookbook.

Please take into account some examples do not work because there is no backend PHP server to serve some required content.

About the OpenLayers Cookbook Examples

The OpenLayers Cookbook was released with a set of samples showing almost all the recipes in the book in action.

I built the samples as a RIA application with a menu bar for each chapter which allows to select te recipe to load and allowing to show the related source of each recipe.

To create the application I used Dojo Toolkit because it is a great JavaScript framework with a nice set of rich and homogeneous widgets.

As any piece of software, the book samples requires some updates from time to time and, because of this I decide to upload the source code to GitHub and update it to the version 1.1.

Next are some of the improvements you will find:

• Use of Dojo Toolkit from Google CDN (<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>)
• Updated Dojo version to 1.8
• Updated OpenLayers version to 2.12
• Source code updated to use Dojo 1.8 syntax (using HTML5 data attribute) instead old one (non standar dojoType).
• Source code highlighted via CodeMirror project.
• Use of relative paths to load data files (attached to the project).

To run the samples you need download the code and put within your local web server (take a look to the documentation).

Remember, you are welcome to contribute and create new recipes !!!

About the OpenLayers Presentation

As a said at the beginning, I have the opportunity to make a presentation for the @geoinquiets folks at Barcelona.

But who are the GeoInquiets? Well, we are (I like to include me) a bunch of enthusiast and professionals related with GIS close to Barcelona.

Note: The GeoInquiets initiative has been successfully replicated in other hispanic places like: Madrid, Buenos Aires, Valencia, Tenerife, Galicia, Córdoba, Cantabria, …

The presentation was made using simply HTML technologies to maximize its portability and avoid proprietary formats. Croncretely, I used the next set of tools to generate it::

• deck.js: A JavaScript library for building modern HTML presentations.
• deck.js-codemirror extension: Allows you to embed codemirror code snippets in your slides
• All UML class diagrams have been made with the free and online yUML tool.

Again, remember it is open sourced so you can contribute and use to make your own presentations.

Related Posts:

• OpenLayers Cookbook
• Improved performance on the AnimatedCluster for OpenLayers
• Dojo + OpenLayers = New Challenges
• Open alternatives to Google Maps
• Animated marker cluster strategy for OpenLayers

Tons of papers have been written about this problem but a nice place to start is the wikipedia entry about Map Projections.

Cylindrical projection

Some time ago I seen a awesome video from the project Unfolding the Earth: Myriahedral Projections. On it, the author divides the sphere into a myriahedron (a polyhedron with a very large number of faces) which allows to unfold the sphere in many different map projections.

Recently I could seen another nice experiment at the bl.ocks.org site. The Projection Transitions is an great map work example implemented with D3.js library which shows an animated transition of map projections.

Don’t you think D3 is becoming a great project? I think I need to get some time to spend on it.

Related Posts:

• The Book: GeoServer Beginner’s Guide
• OpenLayers presentation and OpenLayers Cookbook examples code update
• Improved performance on the AnimatedCluster for OpenLayers
• Animated marker cluster strategy for OpenLayers
• Awesome clustered markers in Leaflet

Launcher – WordPress responsive theme that allows visitors know estimated time remaining in launching your site.

Shaken Grid (Lite) – WordPress gridded theme that uses jQuery Masonry which “arranges elements vertically then horizontally according to a grid.”

HTML5PLEASE – Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

Animated Buttons – Samples of buttons made with CSS3 Transitions and Animations

Pure CSS Under Construction GIF – The modern icon implementation

Pictonic Font Icons – 230 free icons: social, sharing, browsers, operating systems, etc

CSS2LESS – Translates your CSS files to LESS notation.

Application Icon Set - The Application Icon Set by Matt Gentile consists of 120 pixel-perfect icons in three different sizes (16px, 32px and 64px) and it comes in three formats (PSD, PNG and CSH). The icons are vector shapes so you can scale them to any size.

GIS

Projection Transitions – 2D animation projections transitions.

Unfolding the Earth – Myriahedral projections – Awesome video animation among many map projections.

GeoJSONLint – Validate your GeoJSON data files.

OpenGeo Suite 3.0 Released! – A new version of this great open source suite.

Programming

Using Java as Native Linux Apps - Java utilities to calling C routines, create daemon processes, packaging, command line interfaces, etc

Measuring Agile Scrum Development with Velocity – Short video tutorial that defines Velocity and explains how to measure the capacity of projects in Agile Scrum Development.

LinkedIn Moved From Rails To Node: 27 Servers Cut And Up To 20x Faster – Article about how LinkedIn has moved from Rails to Node.js

Curiosities

This Land Is Mine – Musical cartoon movie about the Israeli/Palestinian conflict.

iPod – A nice create tribute to Steve Jobs

DC vs Marvel Infographic – Compare movies revenues

Nano Workout – Original site with tons of short exercises for our health.

Related Posts:

• No Related Posts