Merge pull request #65 from BenukEl/develop

Add imageLayer

Author: allenhwkim

README.md

@@ -37,13 +37,14 @@ export default function(props) {
 | ol/Feature | `<Marker />` | ol/Feature customized as a map maker. |
 
 ### Layers
-| OpenLayers Object  | React Component    | Description  | 
-| --------------     | ---------------    | ------------ |
+| OpenLayers Object  | React Component       | Description  | 
+| --------------     | ---------------       | ------------ |
 | ol/layer/Graticule |  `<GraticuleLayer />` | Displays a graticule (grid of latitude and longitude lines) on the map. |
-| ol/layer/Heatmap |  `<HeatmapLayer />` | Displays a heatmap based on vector data. |
-| ol/layer/Tile |  `<TileLayer />` | Displays tiled images, such as those from a tile server. |
-| ol/layer/Vector |  `<VectorLayer />` | Displays vector data, such as points, lines, and polygons. |
-| ol/layer/WebGLTile |  `<WebGLLayer />` | Displays tiled images using WebGL for rendering. |
+| ol/layer/Heatmap   |  `<HeatmapLayer />`   | Displays a heatmap based on vector data. |
+| ol/layer/Tile      |  `<TileLayer />`      | Displays tiled images, such as those from a tile server. |
+| ol/layer/Image     |  `<ImageLayer />`     | Displays full image, such as those from a pure wms server. |
+| ol/layer/Vector    |  `<VectorLayer />`    | Displays vector data, such as points, lines, and polygons. |
+| ol/layer/WebGLTile |  `<WebGLLayer />`     | Displays tiled images using WebGL for rendering. |
 
 ### Controls
 | OpenLayers Object  | React Component    | Description  | 

package-lock.json

@@ -27,7 +27,7 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "ol": "^10.4.0",
+    "ol": "^10.5.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
@@ -61,6 +61,6 @@
     "storybook": "^8.6.12",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.23.0",
-    "vite": "^6.3.4"
+    "vite": "^6.3.5"
   }
 }

package.json

@@ -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/index.ts

@@ -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/lib/layers/ImageLayer.tsx

@@ -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.mdx

@@ -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>
+  }
+}