✨ Add ImageLayer component and related stories for OpenLayers integration

Author: BenXel

src/lib/index.ts

@@ -8,6 +8,7 @@ export { addMarker, removeMarker, getMarkerImage } from './marker-func';
 
 export { LayerGroup } from './layers/LayerGroup';
 export { TileLayer } from './layers/TileLayer';
+export { ImageLayer } from './layers/ImageLayer';
 export { VectorLayer } from './layers/VectorLayer';
 export { GraticuleLayer } from './layers/GraticuleLayer';
 export { HeatmapLayer } from './layers/HeatmapLayer';

src/lib/layers/ImageLayer.tsx

@@ -0,0 +1,39 @@
+import { Map as OlMap} from 'ol';
+import { useEffect, useRef } from 'react';
+import OlImageLayer from 'ol/layer/Image';
+import { useMap } from '../Map';
+import { useGroup } from './LayerGroup';
+
+export function ImageLayer(props: any) {
+  const map = useMap();
+  const group = useGroup();
+  const layerRef = useRef(new OlImageLayer(props)); // single instance
+
+  useEffect(() => {
+    if (!map && !group) return;
+
+    const layer = layerRef.current; // same instance every time
+    props.name && layer.set('name', props.name);
+    const target = group || map;
+
+    if (target) {
+      if (target instanceof OlMap) {
+        target.addLayer(layer);
+      } else {
+        target.getLayers().push(layer);
+      }
+    }
+
+    return () => {
+      if (target) {
+        if (target instanceof OlMap) {
+          target.removeLayer(layer);
+        } else {
+          target.getLayers().remove(layer);
+        }
+      }
+    };
+  }, [map, group]);
+
+  return null;
+}

src/stories/layers/ImageLayer/ImageLayer.mdx

@@ -0,0 +1,49 @@
+import { Story, Meta } from '@storybook/blocks';
+import * as ImageStories from './ImageLayer.stories';
+ 
+<Meta of={ImageStories} />
+ 
+# {'<ImageLayer />'}
+ 
+A react representative of `new ImageLayer(...)`  
+https://openlayers.org/en/latest/apidoc/module-ol_layer_Image-ImageLayer.html
+<Story of={ImageStories.Primary} />
+
+### Usage
+```typescript
+import {useRef} from 'react';
+import ImageWMS from 'ol/source/ImageWMS';
+import OSM from 'ol/source/OSM';
+import {Map, ImageLayer, View} from 'react-openlayers';
+
+export default function(props) {
+  const mapRef = useRef();
+  const source = new ImageWMS({
+      url: 'https://ahocevar.com/geoserver/wms',
+      params: {'LAYERS': 'topp:states'},
+      ratio: 1,
+      serverType: 'geoserver',
+    })
+  return (
+    <Map ref={mapRef}>
+      <ImageLayer source={source} extent={[-13884991, 2870341, -7455066, 6338219]} properties={{key: 'myLayer'}}/>
+      <View center={[-10997148, 4569099]} zoom={4}/>
+    </Map>
+  );
+}
+```
+
+### props
+
+| Prop   | type         | description |
+| ------ | -----------  | ------------|
+| source | ImageSource  | Source for this layer. | 
+| extent | Extent       | The bounding extent for layer rendering. The layer will not be rendered outside of this extent. |
+| zIndex | number       | The z-index for layer rendering. At rendering time, the layers will be ordered, first by Z-index and then by position. |
+| properties | Object   | Arbitrary observable properties. Can be accessed with `#get()` and `#set()` |
+| ...    | ...          | For more, refer to Openlayers documentation |
+
+### props
+
+You can pass any props defined in the 
+[Openlayers documentation](https://openlayers.org/en/latest/apidoc/module-ol_layer_Image-ImageLayer.html)

src/stories/layers/ImageLayer/ImageLayer.stories.tsx

@@ -0,0 +1,23 @@
+import ImageWMS from 'ol/source/ImageWMS';
+import { Map, View, ImageLayer } from '../../../lib';
+
+export default {
+  title: 'Layers/ImageLayer',
+}
+
+export const Primary = {
+  render: (props) => {
+    const source = new ImageWMS({
+      url: 'https://ahocevar.com/geoserver/wms',
+      params: {'LAYERS': 'topp:states'},
+      ratio: 1,
+      serverType: 'geoserver',
+    })
+    return <Map>
+      <ImageLayer source={source}
+        extent={[-13884991, 2870341, -7455066, 6338219]}
+        properties={{key: 'myLayer'}} />
+      <View center={[-10997148, 4569099]} zoom={4}/>
+    </Map>
+  }
+}