vl-layer-image doc page #34

export getExtentCenter helper

docs/_sidebar.md

@@ -13,13 +13,14 @@
 
   * Layer
 
-    * [vl-layer-vector](component/vector-layer.md)
     * [vl-layer-image](component/image-layer.md)
     * [vl-layer-tile](component/tile-layer.md)
+    * [vl-layer-vector](component/vector-layer.md)
 
   * Source
 
     * [vl-source-bing-maps](component/bing-maps-source.md)
+    * [vl-source-image-static](component/image-static-source.md)
     * [vl-source-osm](component/osm-source.md)
     * [vl-source-vector](component/vector-source.md)
 
@@ -35,6 +36,6 @@
 
   * Style
 
-    * [vl-style-box](component/style-box)
+    * [vl-style-box](component/style-box.md)
 
-* Mixins
+* Mixins

docs/component/bing-maps-source.md

@@ -9,8 +9,8 @@ this source you should get **API key** at https://www.bingmapsportal.com.
 
 `vl-source-bing-maps` is a part of **BingMapsSource** module:
 
-* **ES6**: https://unpkg.com/vuelayers/lib/_esm/bing-maps-source/
-* **CommonJS**: https://unpkg.com/vuelayers/lib/bing-maps-source/
+- **ES6**: https://unpkg.com/vuelayers/lib/_esm/bing-maps-source/
+- **CommonJS**: https://unpkg.com/vuelayers/lib/bing-maps-source/
 
 ## Usage
 

docs/component/feature.md

@@ -17,8 +17,8 @@ components placed inside default slot.
 
 `vl-feature` component is a part of **Feature** module:
 
-* **ES6**: https://unpkg.com/vuelayers/lib/_esm/feature/
-* **CommonJS**: https://unpkg.com/vuelayers/lib/feature/
+- **ES6**: https://unpkg.com/vuelayers/lib/_esm/feature/
+- **CommonJS**: https://unpkg.com/vuelayers/lib/feature/
 
 ## Usage
 

docs/component/geoloc.md

@@ -10,8 +10,8 @@ a user's position. You can place it to the **default slot** of [`vl-map`](compon
 
 `vl-geoloc` is a part of **Geoloc** module:
 
-* **ES6**: https://unpkg.com/vuelayers/lib/_esm/geoloc/
-* **CommonJS**: https://unpkg.com/vuelayers/lib/geoloc/
+- **ES6**: https://unpkg.com/vuelayers/lib/_esm/geoloc/
+- **CommonJS**: https://unpkg.com/vuelayers/lib/geoloc/
 
 ## Usage
 

docs/component/image-layer.md

@@ -1,3 +1,125 @@
 # vl-layer-image
 
-// TODO...
+> Any image from raster source
+
+`vl-layer-image` components can render any server-rendered image, it is a container for
+raster source, like [`vl-source-image-static`](component/image-static-source.md).
+
+## Versions
+
+`vl-layer-image` component is a part of **ImageLayer** module:
+
+- **ES6**: https://unpkg.com/vuelayers/lib/_esm/image-layer/
+- **CommonJS**: https://unpkg.com/vuelayers/lib/image-layer/
+
+## Usage
+
+Example below show how to use `vl-layer-image` component together with [`vl-source-image-static`](component/image-static-source.md)
+to render custom image on the map. The map view is configured with a custom projection that translates image coordinates 
+directly into map coordinates. Information about `olExt` usage mini library you can find [here](misc/ol-ext.md).   
+Taken from OpenLayers [Static Image Example](http://openlayers.org/en/latest/examples/static-image.html) 
+
+<vuep template="#usage-example"></vuep>
+
+<script v-pre type="text/x-template" id="usage-example">
+<template>
+  <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" style="height: 400px">
+    <vl-view :projection="projection" :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-image id="xkcd">
+      <vl-source-image-static :url="imgUrl" :size="imgSize" :extent="imgExtent" :projection="projection"></vl-source-image-static>
+    </vl-layer-tile>
+  </vl-map>
+</template>
+
+<script>
+  // 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.
+  let size = [1024, 968]
+  let extent = [0, 0, ...size]
+  // create custom projection for image 
+  let customProj = VueLayers.olExt.createProj({
+    code: 'xkcd-image',
+    units: 'pixels',
+    extent,
+  })
+  // add it to the list of known projections
+  VueLayers.olExt.addProj(customProj)
+
+  export default {
+    data () {
+      return { 
+        zoom: 2,
+        maxZoom: 8,
+        center: [size[0] / 2, size[1] / 2],
+        rotation: 0,
+        projection: customProj.getCode(),
+        imgUrl: 'https://imgs.xkcd.com/comics/online_communities.png',
+        imgCopyright: '© <a href="http://xkcd.com/license.html">xkcd</a>',
+        imgSize: size,
+        imgExtent: extent,
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### id
+
+- **Type**: `string | number`
+- **Default**: `uuid.v4()`
+
+Some unique layer identifier,
+
+### extent
+
+- **Type**: `number[]`
+- **Default**: `undefined`
+
+The bounding extent for layer rendering. The layer will not be rendered outside of this extent.
+
+### visible
+
+- **Type**: `boolean`
+- **Default**: `true`
+
+Whether the layer will be visible on the map.
+
+### opacity
+
+- **Type**: `number`
+- **Default**: `1`
+
+Layer opacity value between `[0, 1]`.
+
+### overlay
+
+- **Type**: `boolean`
+- **Default**: `false`
+
+When set to `true` the layer will be rendered as overlay. The map will not manage this layer in its layers collection, 
+and the layer will be rendered on top.
+
+### min-resolution
+
+- **Type**: `number`
+- **Default**: `undefined`
+
+The minimum resolution (inclusive) at which this layer will be visible.
+
+### max-resolution
+
+- **Type**: `number`
+- **Default**: `undefined`
+
+The maximum resolution (exclusive) below which this layer will be visible.
+
+### z-index
+
+- **Type**: `number`
+- **Default**: `0`
+
+The z-index for layer rendering.   

docs/component/image-static-source.md

@@ -0,0 +1,3 @@
+# vl-image-static-source
+
+// TODO

docs/component/map.md

@@ -10,8 +10,8 @@ component to setup `zoom`, `center`, `projection` and other view related propeti
 
 `vl-map` component is a part of **Map** module:
 
-* **ES6**: https://unpkg.com/vuelayers/lib/_esm/map/
-* **CommonJS**: https://unpkg.com/vuelayers/lib/map/
+- **ES6**: https://unpkg.com/vuelayers/lib/_esm/map/
+- **CommonJS**: https://unpkg.com/vuelayers/lib/map/
 
 ## Usage
 

docs/component/overlay.md

@@ -11,8 +11,8 @@ it to some coordinate (for example: inside `vl-feature` or `vl-view`).
 
 `vl-overlay` component is a part of **Overlay** module:
 
-* **ES6**: https://unpkg.com/vuelayers/lib/_esm/overlay/
-* **CommonJS**: https://unpkg.com/vuelayers/lib/overlay/
+- **ES6**: https://unpkg.com/vuelayers/lib/_esm/overlay/
+- **CommonJS**: https://unpkg.com/vuelayers/lib/overlay/
 
 ## Usage
 

docs/component/view.md

@@ -9,8 +9,8 @@ and **rotation** of the map.
 
 `vl-view` component is a part of **Map** module:
 
-* **ES6**: https://unpkg.com/vuelayers/lib/_esm/map/
-* **CommonJS**: https://unpkg.com/vuelayers/lib/map/
+- **ES6**: https://unpkg.com/vuelayers/lib/_esm/map/
+- **CommonJS**: https://unpkg.com/vuelayers/lib/map/
 
 ## Usage
 

docs/misc/ol-ext.md

@@ -0,0 +1,16 @@
+# ol-ext
+
+> Mini library with OpenLayers related helpers
+
+`ol-ext` module provides a set of small helpers to work with native OpenLayers API in the functional style. You can
+use it for example for style building in style functions, or creating and registering custom projections,
+coordinates projection transforming and more. 
+
+It is published as separate sub-package in **CommonJS** and **ES6** versions:
+
+- **ES6**: https://unpkg.com/vuelayers/lib/_esm/ol-ext/
+- **CommonJS**: https://unpkg.com/vuelayers/lib/ol-ext/  
+
+In **UMD** version it is exported to `VueLayers.olExt` path.
+
+// TODO examples

src/mixin/layer.js

@@ -33,7 +33,10 @@ const props = /** @lends module:mixin/layer# */{
     type: Number,
     default: 1,
   },
-  overlay: Boolean,
+  overlay: {
+    type: Boolean,
+    default: false,
+  },
   visible: {
     type: Boolean,
     default: true,

src/ol-ext/extent.js

@@ -6,6 +6,7 @@ import olproj from 'ol/proj'
 import { EXTENT_CORNER, PROJ_UNIT } from './consts'
 
 export const {
+  getCenter: getExtentCenter,
   getWidth: getExtentWidth,
   getHeight: getExtentHeight,
   boundingExtent,