diff --git a/examples/static-image.html b/examples/static-image.html index 60c1823c13..4e761dc286 100644 --- a/examples/static-image.html +++ b/examples/static-image.html @@ -34,8 +34,16 @@

Static image example

Example of a static image layer.

-

Source: xkcd.com/256/

-

See the static-image.js source to see how this is done.

+

+ This example uses a static image + as a layer source. The map view is configured with a custom + projection that translates image coordinates directly into map + coordinates. +

+

+ See the static-image.js source + for details on how this is done. +

static image, xkcd
diff --git a/examples/static-image.js b/examples/static-image.js index 6487af2b01..747d70b0b1 100644 --- a/examples/static-image.js +++ b/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 }) });