AnimatedCluster pan related bug... fixed !!!

If you regularly follow this blog and are web mapping developer that works with OpenLayers, (too much coincidences???) probably you know about the the Animated marker cluster strategy for OpenLayers I created some time ago.

»
Author's profile picture acanimal

Things I learnt creating a jQuery Plugin (Part I)

jQuery is one of the most used JavaScript libraries, if not the most used one, which allows to make great things with the big set of little tools it offers to the web developers: HTML/DOM manipulation, CSS manipulation, HTML event methods, effects and animations, AJAX, utilities, ...

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.

»
Author's profile picture acanimal

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

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.

pyramid

Here, we are going to create a new OpenLayers layer that will show a checkboard with the name of the tile, all this with the help of 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 one to draw the tile name on top every tile. The checkboard layer makes use of Google Chart API to generate black tiles.

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"
});

 

»
Author's profile picture acanimal

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

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 of z/x/y, for example, 5/15/10.

»
Author's profile picture acanimal

tagger, a jQuery Plugin to manage tags

jQuery is widely used in the web world. Since its creation it was quickly adopted by many programmers mainly due its easily of us and extension capabilities.

»
Author's profile picture acanimal

OpenLayers presentation and OpenLayers Cookbook examples code update

A few months after the release of the OpenLayers Cookbook I have been working on a presentation about OpenLayers for @geoinquiets at Barcelona (BCN) that will be celebrated the next December 20th (see the event here) at the offices of Cantera-Tech.

»
Author's profile picture acanimal

Projections, projections, projections

Create a map of the earth isn't an easy problem. Projections basically tries to solve the problem of how to 3D element on a 2D surface.

»
Author's profile picture acanimal

Things seen last week

Web & Dessign

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.

»
Author's profile picture acanimal

Improved performance on the AnimatedCluster for OpenLayers

Yes, now I'm really proud to present the AnimatedCluster strategy for OpenLayers.

Some time ago I created an AnimatedCluster strategy for OpenLayers that extends the basic Cluster strategy, animating cluster when user changes the zoom.

»
Author's profile picture acanimal

OpenLayers Cookbook pirated... but you can continue buying it !!!

Approximately a month ago my book OpenLayers Cookbook was released by PacktPublishing and today I found it is available at many sites of debatable reputation.

Really I'm surprising by the velocity of this alternative publication process :)

»
Author's profile picture acanimal