asantiago's blog

OpenLayers, create a checkboard layer to know the tile names using Google Charts API

asantiago — Sun, 03 Oct 2010 10:05:22 +0000

Pyramid tiles are used by many providers as a more efficient way (than WMS server) to provide images. The idea is simple, we have zoom levels and on every level we have NxN tiles of a specific size (typically 256x256 pixels). Google, Yahoo, Bing or OpenStreetMaps are samples of tile providers.

Here as a sample OpenLayers coding we are going to create a new OpenLayers layer that will show a checkboard with the name of the tile, all this using the Google Charts API.

We need to take into account every provider uses a different pyramid tile notation, that means the same tile can be named [level=1,x=0,y=0] by one provider and named [level=1,x=0,y=1] by another.

Next code is based on OpenLayers.TMS layer, which follow the OSGeo TMS specification.

I have divided the code in two TMS subclasses. The first one is responsible to draw the checkboard and the second once, named tilename draw the tile name on top every tile.


OpenLayers.Layer.Checkboard = OpenLayers.Class(OpenLayers.Layer.TMS, {

    getURL: function (bounds) {
        var res = this.map.getResolution();
        var z = this.map.getZoom();
        var limit = Math.pow(2, z);
        var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
        var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));

        if (y < 0 || y >= limit)
        {
            return "";
        }
        else
        {
            x = ((x % limit) + limit) % limit;

            var tilename = "";
            if( (x+y)%2==0 ) {
            	tilename = "http://chart.apis.google.com/chart?chst=d_text_outline&chs=256x256&chf=bg,s,ffffffff&chld=FFFFFF|12|h|000000|b||";
            } else {
            	// no tile
            }
            return tilename;
        }
    },

    CLASS_NAME: "OpenLayers.Layer.Checkboard"
});

Next is the code that return the tile names:


OpenLayers.Layer.Tilenames = OpenLayers.Class(OpenLayers.Layer.TMS, {

    getURL: function (bounds) {
        var res = this.map.getResolution();
        var z = this.map.getZoom();
        var limit = Math.pow(2, z);
        var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
        var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));

        if (y < 0 || y >= limit)
        {
            return "";
        }
        else
        {
            x = ((x % limit) + limit) % limit;

            var tilename = "";
            if( (x+y)%2==0 ) {
            	tilename = "http://chart.apis.google.com/chart?chst=d_text_outline&chs=256x256&chld=FFFFFF|12|h|000000|b||";
            } else {
            	tilename = "http://chart.apis.google.com/chart?chst=d_text_outline&chs=256x256&chld=000000|12|h|FFFFFF|b||";
            }
            tilename = tilename + "("+z+"/"+x+"/"+y+")";
            return tilename;
        }
    },

    CLASS_NAME: "OpenLayers.Layer.Tilenames"
});

As you can see Google Charts API is flexible enough to lots of different things and allowing us to reduce the overhead on your server.

Bookmark/Search this post with:

OpenLayers, styling order of your features

asantiago — Sun, 23 May 2010 10:27:42 +0000

When working with maps and geographical information systems styling features is very important, on one hand it can make your map more flashy and on the other it can help to classify or organize your features visually.For example, in a map where you show the most populated cities of the world you can use circles with different color and radius.

OpenLayers offers the option to style our features in different ways:

using a style structure for the whole layer
styling a concrete feature

The order applying these style go from "out" to "in", that is, given a feature first is applied the layer style and later the concrete style the feature could have. And to show this nothing better than an example.

Supposing we have a Vector layer with some circles:

var vectorLayer = new OpenLayers.Layer.Vector("Vector"); // Create 50 random features, and give them a "type" attribute that // will be used to style them by size. var features = new Array(50); for (var i=0; i<features.length; i++) { features[i] = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point( (360 * Math.random()) - 180, (180 * Math.random()) - 90 ), { type: 5 + parseInt(5 * Math.random()) } ); } vectorLayer.addFeatures(features);

Now we define a layer style which applied to the layer and a feature style applied directly to a concrete feature:

var myStyles = new OpenLayers.StyleMap({ "default": new OpenLayers.Style({ pointRadius: 3, // sized according to type attribute fillColor: "#ff5566", strokeColor: "#ff9933", strokeWidth: 2, graphicZIndex: 1 }) }); vectorLayer.styleMap = myStyles; features[0].style = { pointRadius: 9, // sized according to type attribute fillColor: "#225566", strokeColor: "#ff9933", strokeWidth: 4, graphicZIndex: 1 };

As we expect the result is:

Bookmark/Search this post with:

Filling flexigrid with JSON/XML data

asantiago — Fri, 14 May 2010 17:37:09 +0000

Flexigrid is one of the most usefull and powerfull grid plugins for jQuery. Unfoirtunatelly, as ahotur explain 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 summary of history:

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

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']} ] } 1 2 reg1-cell1 reg1-cell2 reg2-cell1 reg2-cell2

Finally, to use your XML/JSON data to create a flexigrid component you need to:

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 flashy flexigrid.

Bookmark/Search this post with:

The benefits of an open source comunity demonstrated on Whitehouse.gov

asantiago — Wed, 12 May 2010 17:50:40 +0000

One more time the benefits of you a widely used open source project has been demonstrated. Reading Developers Fix Drupal Module and Save Whitehouse.gov you can found that:

Earlier this week, a cross-site scripting vulnerability was discovered 
in the module.  Now the development team behind the Context module has 
released version 6.x-2.0-rc4, which fixes the XSS vulnerability.

Wow, that's a couple of days to solve a problem. How many comercial projects can say the same?

Bookmark/Search this post with:

OpenLayers, how compute the tile "name" under the mouse

asantiago — Tue, 11 May 2010 21:16:02 +0000

I have working on a web page using OpenLayers which among others shows a OpenStreetMap layer.

The issue is I need to move the mouse over the map and print on a label the tile name in the form level/x/y, for example, 5/15/10.

The first thing to do is to register a listener to the OpenLayers map object, then for every mouse event we need to get the lonlat and translate it from current map projection to the EPSG:4326 (WGS84).

map.events.register( 'mousemove', this, function(evt){ var lonlat = new OpenLayers.LonLat(0, 0); if(evt){ lonlat = map.getLonLatFromPixel(evt.xy); lonlat.transform(this.map.getProjectionObject(), new OpenLayers. Projection("EPSG:4326") ); } tileX = long2tile(lonlat.lon, map.getZoom()); tileY = latg2tile(lonlat.lat, map.getZoom()); tileZ = map.getZoom(); });

To compute the tile X,Y grid coordinate from latlon you can use next functions, obtained from OpenStreetMaps site:

// Functions to compute tiles from lat/lon function long2tile(lon,zoom) { return (Math.floor((lon+180)/360*Math.pow(2,zoom))); } function lat2tile(lat,zoom) { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); }

Bookmark/Search this post with:

Ptolemy Refoundation

asantiago — Sat, 01 May 2010 18:14:48 +0000

Ptolemy goal is to build a good virtual globe SDK (open source project of course), easy to use and to extend by anyone.

The current version has some serious design problems and complex code which makes difficult to understand and extend for anyone who wants to contribute. Because this, recently Ptolemy project authors has started a period or re-foundation to build the project again from scratch.

The goal of re-foundation project are:

Use a new working methodology (more agile).
Improve the project documentation.
Make a new implementation from scratch.

After that, we want to have a basic Virtual Globe SDK with a good design, implementation and documentation and, of course, stable enough to be used in any production environment :)

This way contributors will present their ideas, they will be discussed (using chat, email or Ptolemy group) and finally they will be briefly documented or explained and implemented.

In the next link you can follow the evolution of this amazing stage of the project: Ptolemy Refoundation.

As always you are welcome to participate actively.

Bookmark/Search this post with:

Extreme JavaScript Performance

asantiago — Sun, 11 Apr 2010 08:27:18 +0000

Lately I'm programming more than I never thought in JavaScript, to be exact with Dojo, a JavaScript framework for the client side. I know about it for some time ago but never give an oportunity. But never say never :) Next slide shows you some "simply" tricks to improve the performance in your JavaScript code. I see it on ajaxfreak, which in fact are hosted in slideshare.

Extreme JavaScript Performance

View more presentations from Thomas Fuchs.

Bookmark/Search this post with:

Greedy and Nongreedy Matching in a Regular Expression

asantiago — Wed, 10 Mar 2010 18:10:59 +0000

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 lie

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.

Bookmark/Search this post with:

TiddlyWiki, another kind of text file

asantiago — Fri, 26 Feb 2010 22:00:12 +0000

Many times we use small text files to store information like:

URLs,
some piped command line that make some nice work
passwords (oh my God!!!)
and many more

Some time ago I talk about MonkeyGTD, a GTD tool based on TiddlyWiki. Today I want simply recomend you TiddlyWiki for use instead text files.

TiddlyWiki is a JavaScript wiki formed by only one HTML file (with the JavaScript code in it). Every time you save new content a new HTML version file is created. All your content is in stored in the HTML. No need for a database. No need for a web server. I would prefer my content stores as a plain and separate text file (with some wiki format) but all together in a HTML file isn't bad.

Bookmark/Search this post with:

Read PDF files on your PSP

asantiago — Fri, 08 Jan 2010 20:33:55 +0000

Probably you could think PSP is not the best device to read PDF files and also it is not intended to do so, better to play some game like Need For Speed :) Yes, I know but I'm "a curious animal" and use my PSP more read than other thing.

Some time ago I update my PSP, now runs 5.50 GEN-D firmware version, and since then Bookr doens't works, the nasty 8002014C error appears on my screen.

Well, don't ask my why but if you want to use bookr too the version that works for me is Bookr for firmware 1.0.

See bookr in action:

Bookmark/Search this post with: