Update docs for v0.12

ghettovoice · Feb 24, 2022 · 9af6b04 · 9af6b04
1 parent 6f6f815
commit 9af6b04
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 82 deletions.
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -49,7 +49,7 @@
 
   * Style
 
-    * [vl-style-box](/docs/component/style-box.md)
+    * [vl-style](/docs/component/style.md)
     * [vl-style-circle](/docs/component/circle-style.md)
     * [vl-style-fill](/docs/component/fill-style.md)
     * [vl-style-func](/docs/component/func-style.md)

diff --git a/docs/component/circle-style.md b/docs/component/circle-style.md
@@ -2,14 +2,14 @@
 
 > Styles points as circles.
 
-Use it inside [`vl-style-box`](/docs/component/style-box.md) to style points as circles.
+Use it inside [`vl-style`](/docs/component/style.md) to style points as circles.
 
 ## ES6 Module
 
 ```javascript
-import { CircleStyle } from 'vuelayers'
+import { Style } from 'vuelayers'
 
-Vue.use(CircleStyle)
+Vue.use(Style)
 ```
 
 ## Usage
@@ -29,18 +29,18 @@ Styling a feature inside a vector layer.
       </vl-layer-tile>
 
       <vl-layer-vector>
-        <vl-feature>
-          <vl-geom-point
-            :coordinates="[12.492442,41.890170]" 
-          ></vl-geom-point>
-
-          <vl-style-box>
-            <vl-style-circle :radius="20">
-              <vl-style-fill color="white"></vl-style-fill>
-              <vl-style-stroke color="red"></vl-style-stroke>
-            </vl-style-circle>
-          </vl-style-box>
-        </vl-feature>
+        <vl-source-vector>
+          <vl-feature>
+            <vl-geom-point :coordinates="[12.492442,41.890170]"></vl-geom-point>
+
+            <vl-style>
+              <vl-style-circle :radius="20">
+                <vl-style-fill color="white"></vl-style-fill>
+                <vl-style-stroke color="red"></vl-style-stroke>
+              </vl-style-circle>
+            </vl-style>
+          </vl-feature>
+        </vl-source-vector>
       </vl-layer-vector>
     </vl-map>
   </div>
@@ -76,12 +76,12 @@ Styling the whole layer
       <vl-layer-vector>
         <vl-source-vector :features="points"></vl-source-vector>
 
-        <vl-style-box>
+        <vl-style>
           <vl-style-circle :radius="20">
             <vl-style-fill color="white"></vl-style-fill>
             <vl-style-stroke color="red"></vl-style-stroke>
           </vl-style-circle>
-        </vl-style-box>
+        </vl-style>
       </vl-layer-vector>
     </vl-map>
   </div>

diff --git a/docs/component/fill-style.md b/docs/component/fill-style.md
@@ -2,14 +2,14 @@
 
 > Color the filling of a polygon or mulipolygon in a vector layer
 
-Use it inside [`vl-style-box`](/docs/component/style-box.md) along with [`vl-style-stroke`](/docs/component/stroke-style.md) to style polygons and other shapes with area like circles.
+Use it inside [`vl-style`](/docs/component/style.md) along with [`vl-style-stroke`](/docs/component/stroke-style.md) to style polygons and other shapes with area like circles.
 
 ## ES6 Module
 
 ```javascript
-import { FillStyle } from 'vuelayers'
+import { Style } from 'vuelayers'
 
-Vue.use(FillStyle)
+Vue.use(Style)
 ```
 
 ## Usage
@@ -29,18 +29,18 @@ Styling points like circles with filling.
       </vl-layer-tile>
 
       <vl-layer-vector>
-        <vl-feature>
-          <vl-geom-point
-            :coordinates="[12.492442,41.890170]"
-          ></vl-geom-point>
-
-          <vl-style-box>
-            <vl-style-circle :radius="20">
-              <vl-style-fill color="white"></vl-style-fill>
-              <vl-style-stroke color="red"></vl-style-stroke>
-            </vl-style-circle>
-          </vl-style-box>
-        </vl-feature>
+        <vl-source-vector>
+          <vl-feature>
+            <vl-geom-point :coordinates="[12.492442,41.890170]"></vl-geom-point>
+
+            <vl-style>
+              <vl-style-circle :radius="20">
+                <vl-style-fill color="white"></vl-style-fill>
+                <vl-style-stroke color="red"></vl-style-stroke>
+              </vl-style-circle>
+            </vl-style>
+          </vl-feature>
+        </vl-source-vector>
       </vl-layer-vector>
     </vl-map>
   </div>
@@ -76,10 +76,10 @@ Styling all features with filling in a layer.
       <vl-layer-vector>
         <vl-source-vector :features="features"></vl-source-vector>
 
-        <vl-style-box>
+        <vl-style>
           <vl-style-fill color="white"></vl-style-fill>
           <vl-style-stroke color="red"></vl-style-stroke>
-        </vl-style-box>
+        </vl-style>
       </vl-layer-vector>
     </vl-map>
   </div>

diff --git a/docs/component/image-layer.md b/docs/component/image-layer.md
@@ -43,13 +43,13 @@ Taken from OpenLayers [Static Image Example](http://openlayers.org/en/latest/exa
   // create custom projection for image 
   // NOTE: VueLayers.olExt available only in UMD build
   // in ES build it should be imported explicitly from 'vuelayers/lib/ol-ext'
-  let customProj = VueLayers.olExt.createProj({
+  let customProj = new ol.proj.Projection({
     code: 'xkcd-image',
     units: 'pixels',
     extent,
   })
   // add it to the list of known projections
-  VueLayers.olExt.addProj(customProj)
+  ol.proj.addProjection(customProj)
 
   export default {
     data () {

diff --git a/docs/component/stroke-style.md b/docs/component/stroke-style.md
@@ -2,14 +2,14 @@
 
 > Style the stroke of a line or polygon.
 
-Use it inside [`vl-style-box`](/docs/component/style-box.md) to style lines and polygons or inside [`vl-style-circle`](/docs/component/circle-style.md) to style circles.
+Use it inside [`vl-style`](/docs/component/style.md) to style lines and polygons or inside [`vl-style-circle`](/docs/component/circle-style.md) to style circles.
 
 ## ES6 Module
 
 ```javascript
-import { StrokeStyle } from 'vuelayers'
+import { Style } from 'vuelayers'
 
-Vue.use(StrokeStyle)
+Vue.use(Style)
 ```
 
 ## Usage
@@ -29,14 +29,14 @@ Vue.use(StrokeStyle)
       <vl-layer-vector>
         <vl-source-vector :features="features"></vl-source-vector>
 
-        <vl-style-box>
+        <vl-style>
           <vl-style-fill color="white"></vl-style-fill>
           <vl-style-stroke
             color="red"
             :width="3"
-            :line-dash="[3, 5, 30, 5]"
-          ></vl-style-stroke>
-        </vl-style-box>
+            :line-dash="[3, 5, 30, 5]">
+          </vl-style-stroke>
+        </vl-style>
       </vl-layer-vector>
     </vl-map>
   </div>

diff --git a/docs/component/style-box.md → docs/component/style.md b/docs/component/style-box.md → docs/component/style.md
@@ -1,4 +1,4 @@
-# vl-style-box
+# vl-style
 
 > A container for a collection of styles
 
@@ -7,9 +7,9 @@ Use it inside [`vl-feature`](/docs/component/feature.md) or [`vl-layer-vector`](
 ## ES6 Module
 
 ```javascript
-import { StyleBox } from 'vuelayers'
+import { Style } from 'vuelayers'
 
-Vue.use(StyleBox)
+Vue.use(Style)
 ```
 
 ## Usage
@@ -34,12 +34,12 @@ Styling a feature.
             :coordinates="[12.492442,41.890170]"
           ></vl-geom-point>
 
-          <vl-style-box>
+          <vl-style>
             <vl-style-circle :radius="20">
               <vl-style-fill color="white"></vl-style-fill>
               <vl-style-stroke color="red"></vl-style-stroke>
             </vl-style-circle>
-          </vl-style-box>
+          </vl-style>
         </vl-feature>
       </vl-layer-vector>
     </vl-map>

diff --git a/docs/component/tile-layer.md b/docs/component/tile-layer.md
@@ -27,7 +27,7 @@ and with [`vl-source-sputnik`](/docs/component/sputnik-source.md).
     <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
 
     <vl-layer-tile>
-      <vl-source-sputnik></vl-source-sputnik>
+      <vl-source-osm></vl-source-osm>
     </vl-layer-tile>
 
     <vl-layer-tile id="wmts">

diff --git a/docs/index.html b/docs/index.html
@@ -21,8 +21,8 @@
 
   <link rel="stylesheet" href="//unpkg.com/docsify@4.6.10/lib/themes/vue.css">
 
-  <link rel="stylesheet" href="//unpkg.com/vuep@0.8.0/dist/vuep.min.css">
-  <link rel="stylesheet" href="//unpkg.com/vuelayers@latest/dist/vuelayers.min.css">
+  <link rel="stylesheet" href="//unpkg.com/vuep@latest/dist/vuep.min.css">
+  <link rel="stylesheet" href="//unpkg.com/vuelayers@v0.12.0-rc.28/dist/vuelayers.min.css">
 
   <style>
     .cover-main pre {
@@ -86,8 +86,8 @@
   <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.0/build/ol.js"></script>
   <script src="//unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
   <script src="//unpkg.com/vue@2/dist/vue.min.js"></script>
-  <script src="//unpkg.com/vuep@0.8.0/dist/vuep.min.js"></script>
-  <script src="//unpkg.com/vuelayers@latest/dist/vuelayers.umd.min.js"></script>
+  <script src="//unpkg.com/vuep@latest/dist/vuep.min.js"></script>
+  <script src="//unpkg.com/vuelayers@v0.12.0-rc.28/dist/vuelayers.umd.min.js"></script>
   <script src="//unpkg.com/fakerator@0.3.0/dist/fakerator.js"></script>
 
   <script src="//unpkg.com/docsify-edit-on-github@1.0.1/index.js"></script>

diff --git a/docs/misc/ol-ext.md b/docs/misc/ol-ext.md
@@ -3,45 +3,46 @@
 > 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. 
+use it for example for style building in style functions, coordinates projection transforming and more. 
 
 It is published as separate sub-package in **ES6** version and should be imported explicitly:
 
 ```js
-import * as olExt from 'vuelayers/lib/ol-ext'
-
-let myProj = olExt.createProj({
-  code: 'xkcd-image',
-  units: 'pixels',
-  extent,
-})
-olExt.addProj(myProj)
-```
-
-or you can use only part of helpers
-
-```js
-import { createProj, addProj } from 'vuelayers/lib/ol-ext'
-
-let myProj = createProj({
-  code: 'xkcd-image',
-  units: 'pixels',
-  extent,
+import { createStyle } from 'vuelayers/dist/ol-ext'
+
+const style = createStyle({
+  imageRadius: 10,
+  imageStrokeColor: '#fff',
+  imageFillColor: '#3399cc',
+  text: 'qwerty',
+  textFillColor: '#fff',
 })
-addProj(myProj)
+// with OpenLayers native API
+// import { Style, Circle, Fill, Stroke, Text } from 'ol/style'
+// style = new Style({
+//   image: new Circle({
+//     radius: 10,
+//     fill: new Fill({ color: '#3399cc' }),
+//     stroke: new Stroke({ color: '#fff' }),
+//   }),
+//   text: new Text({
+//     text: size.toString(),
+//     fill: new Fill({ color: '#fff' }),
+//   }),
+// })
 ```
 
 In **UMD** version it is exported to `VueLayers.olExt` path.
 
 ```html
-<script src="https://unpkg.com/vuelayers@latest/lib/index.umd.js"></script>
+<script src="https://unpkg.com/vuelayers@latest/dist/vuelayers.umd.js"></script>
 <script>
-  let customProj = VueLayers.olExt.createProj({
-    code: 'xkcd-image',
-    units: 'pixels',
-    extent,
+  const style = VueLayers.olExt.createStyle({
+    imageRadius: 10,
+    imageStrokeColor: '#fff',
+    imageFillColor: '#3399cc',
+    text: 'qwerty',
+    textFillColor: '#fff',
   })
-  VueLayers.olExt.addProj(customProj)
 </script>
 ```