March 13, 2012

What Doesn’t Stay in Vegas?

Today, and thanks to a colleague, I found this great video about how the Las Vegas city has grown in the past years.

When Landsat 5 launched on March 1, 1972, Las Vegas was a smaller city. This image series, done in honor of the satellite’s 28th birthday, shows the desert city’s massive growth spurt since 1972. The outward expansion of the city is shown in a false-color time lapse of data from all the Landsat satellites.

In addition to the video, what takes special attention to me was the two most rated comments:

Humans are like a virus on this planet…
Remove the tumor

Are we going on the right way?

Scale-adaptative Projection
Dojo + OpenLayers = New Challenges
Open alternatives to Google Maps
Generating map tiles without a map server. GeoTools the GIS swissknife.

March 8, 2012

Scale-adaptative Projection

Take a look to this awesome exercise from the Oregon State University:

What Doesn’t Stay in Vegas?
Dojo + OpenLayers = New Challenges
Presentation tools in the browser
Open alternatives to Google Maps
Crop image on the client side with JCrop and HTML5 canvas element

January 23, 2012

Dojo + OpenLayers = New Challenges

Recently, the new Dojo 1.7 was released with many improvements and important changes.

As a developer, I’m pleased to work with Dojo on RIA application because simple reasons:

It offers almost all I need: module organization, an extensive set of widgets to create interfaces, manipulation of DOM elements, AJAX communications, etc.
It is relatively easy to use and learn. Here I found the declarative way to work really useful because helps developers and designers work together but on different things.
Creating custom widgets, after some relatively easy learning curve, brings you more power and flexibility.

Yes, Dojo is a great project, but as I mentioned at the beginning I like it for RIA projects, that is, for big or complex CRUD applications. For small things, like nice web pages, I prefer jQuery plus some plugins.

Looking at the new features of Dojo 1.7 I found a new module dojox.geo.openlayers which acts as a wrapper around OpenLayers GIS library and extends with some Dojo capabilities.

Now, add Dojo GFX shapes or Dojo widgets on top OpenLayers is possible, opining new possibilities. With this merge we can do things like add pie charts to our maps to show to statistics information. It is awesome !!!

A very short introdutcion to dojox.geo.openlayers package

Before making a little demo playing with all this new things, we need a short description.

The main class in the package is dojox.geo.openlayers.Map which acts as a kind of wrapper around the OpenLayers.Map class. You can access at any time to the OpenLayers underline object with the getOLMap() method.

Next, there is the dojox.geo.openlayers.Layer class which is a wrapper around the OpenLayers.Layer class. It allows to attach to the map any Dojo element.

The dojox.geo.openlayers.GfxLayer is a subclass of the previous class specially designed to work with GFX shapes and render them on top of OpenLayers map.

The dojox.geo.openlayers.Feature class represents the features we can attach to a dojox.geo.openlayers.Layer. The subclass dojox.geo.openlayers.GeometryFeature is designed to render LineString, Points and Collections of geometries.

Because GeometryFeature works with dojox.gfx package to render the geometries you need to add it always to a dojox.geo.openlayers.GfxLayer layer.

Hands on code

We are going to create a map with three features:

a dojox.gfx shape feature, with an animation attached to it to change it fill color,
a pie chart and
a stacked area chart.

You can see the demo in action here, and it should looks something like:

Lets go. Start creating new HTML page and paste the next code, which correspond to the skeleton of our demo:

<!DOCTYPE HTML>
<html>
    <head>
		<title>Dojo + OpenLayers = New Challenge</title>
        <style>
            html, body {
                %;
                %;
            }
        </style>
        <script type="text/javascript" src="/img/spacer.gif"> 
I’m using Dojo 1.7 and the new way to work using require. As you can see I’m referencing the modules my code requires from dojo and dojox packages
Once Dojo is loaded the ready is executed showing the Dojo version in the console and executing the code shown next, which really creates the map and the features.
In the “here put the magic” section we can place the code that creates a new dojox.geo.openlayers.Map instance:
//
// Define some Map options.
//
// openLayersMapOptions: Options for the underlaying OpenLayers.Map instance
// baseLayerName: Name of the base layer for the map
// baseLayerType: Type of the base layer. See 'dojox.geo.openlayers.BaseLayerType'
// baseLayerUrl: Necessary, for example, for WMS.
// accessible: Adds a OpenLayers.Control.KeyboardDefaults control to the map
//     to move it using keyboard.
// touchHandler: Touch support for the map.
//
var options = {
    baseLayerName : "OSM",
    baseLayerType : dojox.geo.openlayers.BaseLayerType.OSM,
    touchHandler : true,
    accessible : true
};

// Create a map instance
var map = new dojox.geo.openlayers.Map('map');
map.fitTo([-10,30,40,62]);
Next create a GFX layer. On it we can attach geometry features or any other Dojo widget feature.
Remember you only can attach geometry features to a GFX layer.
// Create a GFX layer
var gfxLayer = new dojox.geo.openlayers.GfxLayer();
map.addLayer(gfxLayer);
Now create a geometry feature, defined by a LineString with some points, and add it to the layer:
// Create a geometry feature
var line = new dojox.geo.openlayers.LineString([{x:0, y:45},{x:0, y:55},{x:20, y:55},{x:20, y:50},{x:0, y:45}]);
var feature = new dojox.geo.openlayers.GeometryFeature(line);
feature.setStroke({color: "#666", });
feature.setFill("#999");

// Add to the GFX layer
gfxLayer.addFeature(feature);
gfxLayer.redraw();
We want to animate the fill color of the geometry feature so we need to create a couple of animation. The first one will change the fill color from the original color to transparent, while the second will change from transparent to the original color again.
The trick is once the first animation ends we start the second animation (using the ‘onEnd‘ method) and the same for the second animation. This way we create an infinite animation effect.
// Add an animation to change the color of the feature
var animA = dojox.gfx.fx.animateFill({
    shape : feature,
    duration : 700,
    color : {
        start: "#999",
        end: "transparent"
    },
    onAnimate: function() {
        // Required to update the layer while feature change it fill color
        gfxLayer.redraw();
    },
    onEnd: function() {
        animB.play();
    }
});
var animB = dojox.gfx.fx.animateFill({
    shape : feature,
    duration : 700,
    color : {
        start: "transparent",
        end: "#999"
    },
    onAnimate: function() {
        // Required to update the layer while feature change it fill color
        gfxLayer.redraw();
    },
    onEnd: function() {
        animA.play();
    }
});
animA.play();
Now, we are going to create a pie chart widget feature. We are going to use the dojox.geo.openlayers.WidgetFeature class which required an object in the constructor defining the widget to create, the lat/lon where to place the widget and some more parameters. You can find all the available parameters in the source code documentation:
//	* _createWidget_: Function for widget creation. Must return a `dijit._Widget`.
//	* _dojoType_: The class of a widget to create;
//	* _dijitId_: The digitId of an existing widget.
//	* _widget_: An already created widget.
//	* _width_: The width of the widget.
//	* _height_: The height of the widget.
//	* _longitude_: The longitude, in decimal degrees where to place the widget.
//	* _latitude_: The latitude, in decimal degrees where to place the widget.
The pie chart widget have a 100×100 size and will we located at (lon,lat)=(5, 40). The createWidget property must point to a function responsible to create the appropriate widget:
// Add a widget feature
var chartSize1 = 100;
var co1 = [5,40];
var descr1 = {
    // location of the widget
    longitude : co1[0],
    latitude : co1[1],
    // the function which creates the widget
    createWidget : function(){
        var div = dojo.create("div", {}, dojo.body());
        var chart = new dojox.charting.widget.Chart({
            margins : {
                l : 0,
                r : 0,
                t : 0,
                b : 0
            }
        }, div);
        var c = chart.chart;
        c.addPlot("default", {
            type : "Pie",
            radius : chartSize1 / 2,
            labelOffset : chartSize1,
            fontColor : "black"
        });

        var ser = [2, 8, 12, 43, 56, 23, 43, 1, 33];
        c.addSeries("Series", ser);
        c.setTheme(dojox.charting.themes.PlotKit.blue);
        c.render();
        c.theme.plotarea.fill = undefined;  // Transparent background
        return chart;
    },
    width : chartSize1,
    height : chartSize1
};
var graphFeature1 = new dojox.geo.openlayers.WidgetFeature(descr1);
gfxLayer.addFeature(graphFeature1);
Similarly, we create a second widget feature with a stacked area chart with different dimensions and location:
// Add a second plot feature
var chartSize2 = [300,200];
var co2 = [15,45];
var descr2 = {
    // location of the widget
    longitude : co2[0],
    latitude : co2[1],
    // the function which creates the widget
    createWidget : function(){
        var div = dojo.create("div", {}, dojo.body());
        var chart = new dojox.charting.widget.Chart({
            margins : {
                l : 0,
                r : 0,
                t : 0,
                b : 0
            }
        }, div);
        var c = chart.chart;

        c.addPlot("default", {type: "StackedAreas", tension:3})
        .addAxis("x", {fixLower: "major", fixUpper: "major"})
        .addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0})
        .addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4])
        .addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2])
        .addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2])
        .setTheme(dojox.charting.themes.PlotKit.blue);
        c.render();
        return chart;
    },
    width : chartSize2[0],
    height : chartSize2[1]
};
var graphFeature2 = new dojox.geo.openlayers.WidgetFeature(descr2);
gfxLayer.addFeature(graphFeature2);
Once we have all the features in the layer, it is a good idea to refresh it:
gfxLayer.redraw();
Conclusions
I think the fusion of Dojo with OpenLayers opens new possibilities to create rich content and behavior mapping applications. We can create dojo features and make them really amazing using effects, animation and events (like this).
I usually work with OpenLayers and, because Dojo simply acts as a wrapper on some OpenLayers classes, we can access them and work directly adding data from WFS server, GML files, etc
Is it a perfect solution? As always it depends on your needs but for all of us which work in complex RIA applications that needs some GIS features the dojox.geo.openlayers package offers a new spot light   
Related Posts:
Open alternatives to Google Maps
What Doesn’t Stay in Vegas?
Generating map tiles without a map server. GeoTools the GIS swissknife.
A heatmaps layer for OpenLayers
Heatmaps in OpenLayers

January 5, 2012

Presentation tools in the browser

With the arrival of HTML5+C33 the browsers are getting more attention because the new possibilities.

One example of the possibilities are the proliferation of frameworks, tools and libraries to create HTML presentations to run in the browser. No need to transform your presentation from PowerPoint or Keynote to any portable format, the content is plain HTML.

First contact

The first tool of this kind I listened was the html5slides project. You can see it in action here.

Some time later, I read a new about a new tool called deck.js. I think it is awesome, extensible and… see for yourself at the Getting Started section.

Some weeks ago I read a tweet talking about impress.js. For the moment it is only compatible with Chrome and Safari (both uses the WebKit engine) but is looks really impressive.

Many more

Knowing the previous projects I start looking for other alternatives I found a great range of projects: Landslide, html5-slideshow (see a demo here), pow (see in action here) or DZSlides, a one-page-template to build your presentation in HTML5 and CSS3.

Within this maremagnum of possibilities the confusion is assured: which tool is better? which is easy to use? which has more effects? which one is more flexible and/or extensible? which want has more followers and/or supporters? which one will survive in the future?

The future

Currently, all these tools are great but they all are oriented to a web developer user with strong knowledge on HTML and CSS.

The next step is clear, adapt to plain users (a user without web technologies knowledge). The tools needs an editor to help in the creation of the slides, like PowerPoint or Keynote.

There are projects working on this direction, like the 280Slides. It is implemented in Cappuccino framework and brings the user a Keynote like editor to visually create the slides.

More history

If you want to know a bit more about the evolution of the presentation tools, I encourage you to read this great article from Luigi Montanez.

Greedy and Nongreedy Matching in a Regular Expression
Open alternatives to Google Maps
Clinker, a software development ecosystem
Crop image on the client side with JCrop and HTML5 canvas element
A word about LESS

December 9, 2011

Filling Flexigrid with JSON/XML data

Flexigrid is one of the most useful and powerful grid plugins for jQuery. Unfortunately, as the author explains in the project page, there is no much documentation so you must learn how to use it looking at existing code.

If anytime you need to fill a Flexigrid with JSON or XML content and you are a little buggy to look at example code, here is the great summary:

Remember XML/JSON data must follow the next rules: total, page, rows. And for every row specify and id and a cell structure.

Next steps show you how to make it run step by step.

Sample data for both types are:

{
	page: 1,
	total: 2,
	rows: [
		{id: 'reg1',    cell: ['reg1-cell1','reg1-cell2']},
		{id: 'reg2',    cell: ['reg2-cell1','reg2-cell2']}
	]
}

<rows>
	<page>1</page>
	<total>2</total>
	<row id="reg1">
		<cell>reg1-cell1</cell>
		<cell>reg1-cell2</cell>
	</row>
	<row id="reg2">
		<cell>reg2-cell1</cell>
		<cell>reg2-cell2</cell>
	</row>
</rows>

Put some element on your HTML document:

<p id="yourId"></p>

Convert that element into a flexigrid with:

$("#yourId").flexigrid({
	url: 'your_file_name.json_or_xml',
	dataType: 'json',
	...
}

Now you know how to build a gorgeous grid from XML or JSON data.

Crop image on the client side with JCrop and HTML5 canvas element
Using YouTube API to embed videos dinamically on your web site
Customizing jQuery UI Dialog: hiding close button and changing opacity
Animated scrolling to a DOM element
Greedy and Nongreedy Matching in a Regular Expression

November 19, 2011

Greedy and Nongreedy Matching in a Regular Expression

This questions has come to me many times so it is time to write a post that acts as a reminder.

Currently I have a string like

ftp://user:password@server/dirA/dirB/file

and what i want is parse it to get the user, password, server and path to the file (/dirA/dirB/file). My first try was:

ftp://(\S+):(\S+)@(\S+)(/\S+)

but that returns me server=server/dirA/dirB, which isn’t what I want. The idea is that the group after the @ would make a non gready match. This is achieved using the ? char. So the final and right regular expression will becomes:

ftp://(\S+):(\S+)@(\S+?)(/\S+)

which returns server=server and file=/dirA/dirB/file.

Open alternatives to Google Maps
Using YouTube API to embed videos dinamically on your web site
Sending emails with Java
Clinker, a software development ecosystem
Crop image on the client side with JCrop and HTML5 canvas element

November 14, 2011

Open alternatives to Google Maps

Lately there was a not much surprising news about Google products and services. Among other things Google has changed the Google Maps API use policy and will charge to those users that exceed some download limits.

It is well known that Google Maps is one of the most (or the most) famous mapping service used around the net and it starts the web GIS revolution some years ago but hopefully it is not the only API we can use. Bing and the dis

ACuriousAnimal

What Doesn’t Stay in Vegas?

Related Posts:

Scale-adaptative Projection

Related Posts:

Dojo + OpenLayers = New Challenges

A very short introdutcion to dojox.geo.openlayers package

Hands on code

Conclusions

Related Posts:

Presentation tools in the browser

First contact

Many more

The future

More history

Related Posts:

Filling Flexigrid with JSON/XML data

Related Posts:

Greedy and Nongreedy Matching in a Regular Expression

Related Posts:

Open alternatives to Google Maps