Let image resolution be calculated when the image loads

examples/static-image.html

@@ -34,8 +34,16 @@
           <h4 id="title">Static image example</h4>
           <p id="shortdesc">Example of a static image layer.</p>
           <div id="docs">
-            <p>Source: <a href="http://xkcd.com/256/">xkcd.com/256/</a></p>
-            <p>See the <a href="static-image.js" target="_blank">static-image.js source</a> to see how this is done.</p>
+            <p>
+              This example uses a <a href="http://xkcd.com/256/">static image</a>
+              as a layer source.  The map view is configured with a custom
+              projection that translates image coordinates directly into map
+              coordinates.
+            </p>
+            <p>
+              See the <a href="static-image.js" target="_blank">static-image.js source</a>
+              for details on how this is done.
+            </p>
           </div>
           <div id="tags">static image, xkcd</div>
         </div>

examples/static-image.js

@@ -7,13 +7,14 @@ goog.require('ol.proj.Projection');
 goog.require('ol.source.ImageStatic');
 
 
-// Maps always need a projection, but the static image is not geo-referenced,
-// and are only measured in pixels.  So, we create a fake projection that the
-// map can use to properly display the layer.
-var pixelProjection = new ol.proj.Projection({
-  code: 'pixel',
+// Map views always need a projection.  Here we just want to map image
+// coordinates directly to map coordinates, so we create a projection that uses
+// the image extent in pixels.
+var extent = [0, 0, 1024, 968];
+var projection = new ol.proj.Projection({
+  code: 'xkcd-image',
   units: 'pixels',
-  extent: [0, 0, 1024, 968]
+  extent: extent
 });
 
 var map = new ol.Map({
@@ -26,16 +27,15 @@ var map = new ol.Map({
           })
         ],
         url: 'http://imgs.xkcd.com/comics/online_communities.png',
-        imageSize: [1024, 968],
-        projection: pixelProjection,
-        imageExtent: pixelProjection.getExtent()
+        projection: projection,
+        imageExtent: extent
       })
     })
   ],
   target: 'map',
   view: new ol.View({
-    projection: pixelProjection,
-    center: ol.extent.getCenter(pixelProjection.getExtent()),
+    projection: projection,
+    center: ol.extent.getCenter(extent),
     zoom: 2
   })
 });