Architexa product review

Architexa product is an Eclipse plugin from Architexa.com company. As their web site say:

Architexa helps you understand and document large/complex Java code bases within Eclipse

and allowing to create and explore diagrams that make sense.

»
Author's profile picture acanimal

Creating static maps in OpenLayers using PhantomJS

Many times in a web mapping application it is desired to save a picture with the current map information.

Those who works with Google Maps API has also the Static Maps API, which works similarly than Google Maps but produces static images.

»
Author's profile picture acanimal

Taking web page screenshots

Recently I have worked on system that requires to take web page screenshots. Not only a screenshot of the whole page but of a concrete element.

»
Author's profile picture acanimal

PhoneGap on iOS: an stupid advertisement using the "create" command line tool

Some days ago I start my first mobile application. Nothing awesome, it is a simply excuse to test jQuery Mobile and PhoneGap frameworks.

This post is not oriented to describe my impressions, that would be another day, but describe an stupid headache I have when trying to install the PhoneGap framework in my MacOSX.

»
Author's profile picture acanimal

AnimatedCluster demo site updated to work with OpenLayers 2.12

Not an awesome post but for any interested in the AnimatedCluster strategy I have updated the demo site to work properly with OpenLayers 2.12.

In version 2.12 symbolizer are richest than in 2.11 and required to set the labelOutlineWidth property to some low value to show the labels fine:

var lowRule = new OpenLayers.Rule({
    filter: new OpenLayers.Filter.Comparison({
        type: OpenLayers.Filter.Comparison.LESS_THAN,
        property: "count",
        value: 15
    }),
    symbolizer: {
        fillColor: colors.low,
        fillOpacity: 0.9,
        strokeColor: colors.low,
        strokeOpacity: 0.5,
        strokeWidth: 12,
        pointRadius: 10,
        label: "${count}",
        labelOutlineWidth: 1,
        fontColor: "#ffffff",
        fontOpacity: 0.8,
        fontSize: "12px"
    }
});

See in action:

»
Author's profile picture acanimal

OpenLayers Cookbook is out !!!

I'm proud to announce it. My first work as author of a technical book sees the light. After some months of work (really hard work combined with my day to day job), finally the book is out:

»
Author's profile picture acanimal

Animated marker cluster strategy for OpenLayers

Yes, this posts talks about my implementation of a cluster strategy that animates clusters when changing the zoom level. So, if you are one of those don't like to read the blog posts from others and like the action, you can go directly to see AnimatedCluster demo page. or to the github repository to see the source code.

»
Author's profile picture acanimal

Awesome clustered markers in Leaflet

Some time ago someone asked at gis.stackexchange.com for nice cluster marker implementation, both for Leaflet or OpenLayers, something similar to Redfin. A couple of weeks ago I discover a great implementation for Leaflet, the Leaflet.markercluster from Dave Leaver.

»
Author's profile picture acanimal

Look mom no jQuery !!! Getting all CSS properties of a DOM element in JavaScript

Getting and setting CSS properties is a simple task. We can make it in pure JavaScript:

var color = domElem.style.color;    // Get color
domElem.style.color='blue';    // Set new color

Using jQuery it can be done with the $.css() method:

var color = $(domElem).css('color');    // Get color
$(domElem).css('color', 'blue');    // Set new color

The recent jQuery++ project claims to have a $.styles() method fastest than $.css() one.

The issue is: How to get all the styles of a given DOM element? Not only those applied directly with the style attribute but those applied using CSS classes.

The solution

Next code retrieves an object with all the style properties of a given DOM element, no matter if they were specified in CSS classes or withint the style attribute of the element.

The idea behind the code is simply: we invoke the browser function that computes the whole element's style or, if it is not possible, retrieves the CSS properties from the style attribute.

    function getComputedStyle( dom ) {
        var style;
        var returns = {};
        // FireFox and Chrome way
        if(window.getComputedStyle){
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var val = style.getPropertyValue(prop);
                returns[prop] = val;
            }
            return returns;
        }
        // IE and Opera way
        if(dom.currentStyle){
            style = dom.currentStyle;
            for(var prop in style){
                returns[prop] = style[prop];
            }
            return returns;
        }
        // Style from style attribute
        if(style = dom.style){
            for(var prop in style){
                if(typeof style[prop] != 'function'){
                    returns[prop] = style[prop];
                }
            }
            return returns;
        }
        return returns;
    };

The code works (or must work) on any browser. For FireFox and Chrome browser the right way to get the computed style is through the window.getComputedStyle() method, while on IE and Opera browsers the dom.currentStyle property is the right place.

»
Author's profile picture acanimal

Brief introduction to Dojo Widgets creation

In the past, I have been using Dojo Toolkit for relatively little projects. I choose Dojo by its well designed API and its rich and homogeneous set of widgets.jQuery and jQueryUI are great projects, but I found the problem of consistency with jQuery plugins. Each one follow its own rules, each one has its documentation and API, etc.

»
Author's profile picture acanimal