August 14, 2012 13:30 · Aug 14, 2012
diff --git a/clickmap.js b/clickmap.js
@@ -0,0 +1,58 @@
+$(document).ready(function() {
+
+			// create canvas
+			var canvas = document.createElement("canvas");
+			canvas.height = 300; // important! because default canvas size is 300x150
+			var ctx = canvas.getContext('2d');
+
+			// create img
+			var img = document.createElement("img");
+			// IMPORTANT adding shadow map - each area has different background color
+			// which is then used to identify the area (see the image to understand)
+			img.src = "/canvasmap/canvasmap_shadowmap.png";
+			// wait till it's loaded and redraw it into canvas (still neither canvas nor img are displayed)
+			img.onload = function(e) {
+				ctx.drawImage(img, 0, 0);
+				getMyImgData(ctx);
+			} // end img.onload
+
+		}); // end domready
+
+		function getMyImgData(ctx) {
+
+			// get pixel data from the canvas
+			var pix = ctx.getImageData(0, 0, 300, 300);
+
+			$("#map_wrapper").mousemove(function(e){
+				// each pixel is represented by 4 subsequent values in the data array, being red, green, blue, alpha
+				// datapos is the respective value for a pixel on [offsetX,offsetY] coordinates
+				var datapos = ((e.offsetY-2) * 300 * 4) + ((e.offsetX-1) * 4);                 
+				// will pick one of them, let's say the first one which is red channel, and read the color value there
+				var red = pix.data[datapos];
+
+				// others commented out. just for info purposes here
+				//var green = pix.data[datapos+1];
+				//var blue = pix.data[datapos+2];
+				//var alpha = pix.data[datapos+3];
+
+				// associative array of districts and e.g. their URLs
+				// IMPORTANT the 'key' in this array is actually the color value on the shadow map - this is the main idea of the example
+				var countries = {
+				  // decimal color value: [sprite position, "country name"]
+					00: [5, "Poland"],
+					51: [6, "Germany"],
+					102: [1, "Czechia"],
+					153: [2, "Slovakia"],
+					187: [4, "Austria"],
+					221: [3, "Hungary"],
+					255: [0, "Nothing"]
+				}
+
+				// shift css background sprite
+				$("#map_wrapper").css("background-position", (countries[red][0])*(-300)+"px 0px").css("cursor","pointer");
+				// show me the country name
+				$("#url").text(countries[red][1]);
+
+			});
+		}
+