Merge pull request #268 from tsaiDavid/main

Add example for StaticImage

site/src/components/examples/StaticImage.jsx

@@ -0,0 +1,36 @@
+import Image from '../../../../lib/layer/Image.js';
+import ImageStatic from '../../../../lib/source/ImageStatic.js';
+import Map from '../../../../lib/Map.js';
+import Projection from 'ol/proj/Projection.js';
+import React from 'react';
+import View from '../../../../lib/View.js';
+import {getCenter} from 'ol/extent.js';
+
+const extent = [0, 0, 1024, 968];
+const projection = new Projection({
+  code: 'xkcd-image',
+  units: 'pixels',
+  extent,
+});
+
+function StaticImage() {
+  return (
+    <Map>
+      <View
+        options={{projection, center: getCenter(extent), zoom: 2, maxZoom: 8}}
+      />
+      <Image>
+        <ImageStatic
+          options={{
+            attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
+            url: 'https://imgs.xkcd.com/comics/online_communities.png',
+            projection,
+            imageExtent: extent,
+          }}
+        />
+      </Image>
+    </Map>
+  );
+}
+
+export default StaticImage;

site/src/content/examples/static-image.mdx

@@ -0,0 +1,11 @@
+---
+title: 'Static Image'
+level: 0
+description: |
+  This example uses a [static image](https://xkcd.com/256/) as a layer source.
+  The map view is configured with a custom projection that translates image coordinates directly into map coordinates.
+---
+
+import StaticImage from '../../components/examples/StaticImage.jsx';
+
+<StaticImage client:only="react" />