diff --git a/examples/static-image.html b/examples/static-image.html new file mode 100644 index 0000000000..80871fcd79 --- /dev/null +++ b/examples/static-image.html @@ -0,0 +1,50 @@ + + + + + + + + + + + Static image example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

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.

+
+
static image, xkcd
+
+ +
+ +
+ + + + + + diff --git a/examples/static-image.js b/examples/static-image.js new file mode 100644 index 0000000000..e6dca89119 --- /dev/null +++ b/examples/static-image.js @@ -0,0 +1,44 @@ +goog.require('ol.Attribution'); +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.extent'); +goog.require('ol.layer.Image'); +goog.require('ol.proj.Projection'); +goog.require('ol.proj.Units'); +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', + units: ol.proj.Units.PIXELS, + extent: [0, 0, 1024, 968] +}); + +var map = new ol.Map({ + layers: [ + new ol.layer.Image({ + source: new ol.source.ImageStatic({ + attributions: [ + new ol.Attribution({ + html: '© xkcd' + }) + ], + url: 'http://imgs.xkcd.com/comics/online_communities.png', + imageSize: [1024, 968], + projection: pixelProjection, + imageExtent: pixelProjection.getExtent() + }) + }) + ], + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + projection: pixelProjection, + center: ol.extent.getCenter(pixelProjection.getExtent()), + zoom: 2 + }) +});