Integrating Openlayers and Canvas

example showing how to integrate openlayers and html5 canvas

by Ben

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js"></script>
<body>        
        <p><b>Canvas With OpenLayers &amp; HTML5 Canvas Demo</b></p>




<div>
  
       

    <div id="map" class="map"  style="width:600px;height:700px;border:1px solid black;"></div>
    
    <div class="mapcanvas" id="mapcanvas"></div>

</div>        

</body>

CSS

<style type="text/css">
        
        body {
            font-family: sans-serif;
        }
        
        p 
        {
            width: 95%;
        }
        
        a {
            text-decoration: none;
            color: black;
            font-weight: bold;
            font-size: 1.1em;
        }

        div.map{
            width: 45%;
        height:90%;
        float: left;
        border-style:solid;
        border-right-width:5%;
        

        }
        
       div.mapcanvas{
            width: 45%;
        height:90%;
        float: left;
        border-style:solid;        
        }
    

    </style>

JavaScript

// function applies greyscale to every pixel in canvas
        function greyscale(canvas, left, top, width, height)
        {
            var ctx = canvas.getContext("2d") ;
            var imgData=ctx.getImageData(left, top , width, height);
            var d = imgData.data;
            for (var i=0; i<d.length; i+=4) {
                var r = d[i];
                var g = d[i+1];
                var b = d[i+2];
                // CIE luminance for the RGB
                var v = 0.2126*r + 0.7152*g + 0.0722*b;
               d[i] = d[i+1] = d[i+2] = v;
            }
        
           
             ctx.putImageData(imgData, left, top);
            
             
        }
        
        
        function invert(canvas, left, top, width, height)
        {

            var ctx = canvas.getContext("2d") ;
            var imgData=ctx.getImageData(left, top , width, height);
            var d = imgData.data;
            
            for (var i=0; i<d.length; i+=4) {
                
                d[i] = 255 - d[i] ;
                d[i+1]  = 255 - d[i+1] ;
               d[i+2] = 255 - d[i+2] ;
                
           }
             ctx.putImageData(imgData, left, top);

        }
        

  
        var map = new OpenLayers.Map('map');
        var layer = new OpenLayers.Layer.OSM( "Simple OSM Map" );
 
        // uncomment below to see affect of CrossOrigin tainting error for OSM layer produced by call to putImageData in greyscale and invert functions
        // tmslayer.tileOptions = {crossOriginKeyword: null} ; 
            

  
       var mapcanvasDiv = null ;
       var mapDiv = document.getElementById("map") ;        // div containing the OpenLayers map
      
      // uncomment to toggle canvas div on/off
      // document.getElementById("mapcanvas").style.display = "none" ;
       
   
      // register loadend event for the layer so that once OL has loaded all tiles we can redraw them on the canvas. Triggered by zooming and page refresh.
     ...