0

Is there a way to import OL methods of pan and zoom to canvas element of html5? I am using this code to load an image into the canvas element.

<html>

<head>
   <style>
     body{
      background: #333333;
      }
     canvas{
      border:1px solid yellow;
      background: #999999;
      width:1000;
      height:500;
      margin-top:20%;
     }
   </style>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
</head>
<body>

<center>
<canvas id="myCanvas"></canvas>
</center>

<img id="Map" src="http://upload.wikimedia.org/wikipedia/commons/a/a8/VST_images_the_Lagoon_Nebula.jpg"  width="10" height="10" style="display:none;" >

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("Map");
ctx.drawImage(img, 0, 0,300,150);
</script>

</body>
</html>

Is there a way that i can use the pan and zoom method from open layers to zoom and pan my image inside the canvas element?

prieston
  • 1,426
  • 2
  • 18
  • 39
  • Why don't you use OpenLayers to open the image too, then the pan and zoom controls are built in? – John Powell Dec 07 '14 at 08:51
  • I was only wondering if this is possible. I haven't been searching OL3 capabilities for long and I wanted to see the interoperability of it's libraries. Thanks for the suggestion :)! – prieston Dec 07 '14 at 19:48
  • It is very possible. OL3 uses a canvas renderer (among others) and you get a lot of other capabilities thrown in -- no point re-inventing the wheel :D – John Powell Dec 07 '14 at 20:23

0 Answers0