Canvas - Openlayers

by Iblasi

HTML

<script src="https://openlayers.org/api/OpenLayers.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
 <body onload="Initialize();">
	<div id="mapDiv" style="z-index:1">
		<canvas id="myCanvas" width="100%" height="100%" margin="0px" style="position:absolute; z-index:2000">
			Your browser does not support the HTML5 canvas tag.
		</canvas>
	</div>
	<div id="text">
       <h1 id="title">Canvas over OpenLayers</h1>
       <br />
          <p>Display input: <label id="Input"></label></p>
          <br />
	</div>
</body>

CSS

html, body, #mapDiv {
            margin: 0;
            padding: 0; 
            width: 100%;
            height: 100%;
        }

        #text {
            position: absolute;
            bottom: 1em;
            left: 1em;
            width: 512px;
            z-index: 20000;
            background-color: white;
            padding: 0 0.5em 0.5em 0.5em;
        }
        
        body {
            font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
            font-size: 80%;
            color: #222;
            background: #fff;
        }
        h1 
        {
            color: #003a6b;
            background-color: transparent;
            font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
            margin: 0;
            padding-top: 0.5em;
            font-size: 130%;
            margin-bottom: 0.5em;
            border-bottom: 1px solid #fcb100;
        }
        a[href] {
            color: #436976;
            background-color: transparent;
        }

JavaScript

var map;
		var fromProjection = new OpenLayers.Projection("EPSG:4326");
		var toProjection = new OpenLayers.Projection("EPSG:900913");

		//***************************************
		// INIT MAP
		//***************************************
		function Initialize() {
			LoadMap(48.0, -3.0, 5);
		}

		//***************************************
		// MAP
		//***************************************
		function LoadMap(lat, lon, zoom) {

			//Define map options
			var options = {
			projection: "EPSG:900913",
			center: new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection),
			units: 'km'
			};

			map = new OpenLayers.Map("mapDiv", options);

			var osmLayer = new OpenLayers.Layer.OSM();

			//Switch control
			map.addLayers([osmLayer]);
			map.addControls([
				new OpenLayers.Control.Navigation(),
				new OpenLayers.Control.Attribution(),
				new OpenLayers.Control.PanZoomBar(),
				new OpenLayers.Control.LayerSwitcher()
			]);

			//Center the map
			map.zoomTo(zoom);


			// Detecting map changes using Openlayers
			map.events.register("moveend", map, function(){
				Func_Event(map);
			});
			map.events.register("zoomend", map, function(){
				Func_Event(map);
			});
		}

		
		//***************************************
		// Extra Functions
		//***************************************
		//This function runs after every event
		function Func_Event(map) {

			var NumberPixelsX = map.size.w;
			var NumberPixelsY = map.size.h;

			$("#Input").text('NumberPixelsX	'+NumberPixelsX+'\tNumberPixelsY	'+NumberPixelsY);


			var array = new Array(NumberPixelsX*NumberPixelsY*4)
			for (i=0;i<NumberPixelsX*NumberPixelsY;i++){

				array[0 + i*4] = float2int (255.0 * Math.random())
				array[1 + i*4] = float2int (255.0 * Math.random())
				array[2 + i*4] = float2int (255.0 * Math.random())
				array[3 + i*4] = 120
			}
			var canvas = document.getElementById('myCanvas');
			var ctx = canvas.getContext('2d');
			ctx.canvas.width  = NumberPixelsX;
			ctx.canvas.height =...