From ac0135e9e88d2f5f2a1279af2bd4b30ee51facdf Mon Sep 17 00:00:00 2001
From: Abraham Toriz <awonderfulcode@gmail.com>
Date: Fri, 28 Jun 2019 13:28:58 -0400
Subject: [PATCH] finish documenting all the geometries

---
 docs/component/line-string-geom.md       |  8 +--
 docs/component/multi-line-string-geom.md |  6 +-
 docs/component/multi-point-geom.md       | 42 +++++++++++++
 docs/component/multi-polygon-geom.md     | 42 +++++++++++++
 docs/component/point-geom.md             | 42 +++++++++++++
 docs/component/polygon-geom.md           | 78 ++++++++++++++++++++++++
 6 files changed, 211 insertions(+), 7 deletions(-)

diff --git a/docs/component/line-string-geom.md b/docs/component/line-string-geom.md
index 83b53b1e..77bcd860 100644
--- a/docs/component/line-string-geom.md
+++ b/docs/component/line-string-geom.md
@@ -12,9 +12,9 @@ import { LineStringGeom } from 'vuelayers'
 Vue.use(LineStringGeom)
 ```
 
-<vuep template="#static-features-example"></vuep>
+<vuep template="#line-string-geom-example"></vuep>
 
-<script v-pre type="text/x-template" id="static-features-example">
+<script v-pre type="text/x-template" id="line-string-geom-example">
 <template>
   <vl-map data-projection="EPSG:4326" style="height: 400px">
     <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
@@ -24,7 +24,7 @@ Vue.use(LineStringGeom)
     </vl-layer-tile>
 
     <vl-feature>
-      <vl-geom-line-string :coordinates="[[116.544921,40.451633],[116.545264,40.451649],[116.545865,40.451698],[116.546144,40.451551],[116.546337,40.451274],[116.546788,40.451143],[116.547324,40.451078],[116.547539,40.450996],[116.547839,40.450719],[116.548440,40.450506],[116.548933,40.450604],[116.549448,40.450604],[116.550242,40.450376],[116.550865,40.450163],[116.551702,40.449935],[116.552581,40.449576]]"></vl-geom-circle>
+      <vl-geom-line-string :coordinates="[[116.544921,40.451633],[116.545264,40.451649],[116.545865,40.451698],[116.546144,40.451551],[116.546337,40.451274],[116.546788,40.451143],[116.547324,40.451078],[116.547539,40.450996],[116.547839,40.450719],[116.548440,40.450506],[116.548933,40.450604],[116.549448,40.450604],[116.550242,40.450376],[116.550865,40.450163],[116.551702,40.449935],[116.552581,40.449576]]"></vl-geom-line-string>
     </vl-feature>
   </vl-map>
 </template>
@@ -48,4 +48,4 @@ Vue.use(LineStringGeom)
 
 - **Type**: `number[][]`
 
-An array of pairs of coordinates indicating each point of the line in units of the map's [`projection`](/docs/quickstart.md#global-data-projection).
+An array of pairs of coordinates as specified by the [geojson spec](https://tools.ietf.org/html/rfc7946#section-3.1.4) in units of the map's [`projection`](/docs/quickstart.md#global-data-projection).
diff --git a/docs/component/multi-line-string-geom.md b/docs/component/multi-line-string-geom.md
index 5e7c4343..21b5333b 100644
--- a/docs/component/multi-line-string-geom.md
+++ b/docs/component/multi-line-string-geom.md
@@ -12,9 +12,9 @@ import { MultiLineStringGeom } from 'vuelayers'
 Vue.use(MultiLineStringGeom)
 ```
 
-<vuep template="#static-features-example"></vuep>
+<vuep template="#multi-line-string-geom-example"></vuep>
 
-<script v-pre type="text/x-template" id="static-features-example">
+<script v-pre type="text/x-template" id="multi-line-string-geom-example">
 <template>
   <vl-map data-projection="EPSG:4326" style="height: 400px">
     <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
@@ -48,4 +48,4 @@ Vue.use(MultiLineStringGeom)
 
 - **Type**: `number[][][]`
 
-An array of lines, each of which is an array of pairs of coordinates indicating each point of each line in units of the map's [`projection`](/docs/quickstart.md#global-data-projection).
+An array of lines, each of which is a [line string](https://tools.ietf.org/html/rfc7946#section-3.1.4) in units of the map's [`projection`](/docs/quickstart.md#global-data-projection).
diff --git a/docs/component/multi-point-geom.md b/docs/component/multi-point-geom.md
index 5321566f..ad548c6d 100644
--- a/docs/component/multi-point-geom.md
+++ b/docs/component/multi-point-geom.md
@@ -1,5 +1,9 @@
 # vl-geom-multi-point
 
+> A multiple point feature.
+
+`vl-geom-multi-point` can be used inside a [`vl-feature`](/docs/component/feature.md) to draw multiple points at once.
+
 ## ES6 Module
 
 ```javascript
@@ -7,3 +11,41 @@ import { MultiPointGeom } from 'vuelayers'
 
 Vue.use(MultiPointGeom)
 ```
+
+<vuep template="#multi-poing-geom-example"></vuep>
+
+<script v-pre type="text/x-template" id="multi-poing-geom-example">
+<template>
+  <vl-map data-projection="EPSG:4326" style="height: 400px">
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile>
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-feature>
+      <vl-geom-multi-point :coordinates="[[116.544921,40.451633],[116.545264,40.451649],[116.545865,40.451698],[116.546144,40.451551],[116.546337,40.451274],[116.546788,40.451143],[116.547324,40.451078],[116.547539,40.450996],[116.547839,40.450719],[116.548440,40.450506],[116.548933,40.450604],[116.549448,40.450604],[116.550242,40.450376],[116.550865,40.450163],[116.551702,40.449935],[116.552581,40.449576]]"></vl-geom-multi-point>
+    </vl-feature>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 17,
+        center: [116.54875,40.45064],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### coordinates
+
+- **Type**: `number[][]`
+
+An array of [points](https://tools.ietf.org/html/rfc7946#section-3.1.2) in units of the map's [`projection`](/docs/quickstart.md#global-data-projection).
diff --git a/docs/component/multi-polygon-geom.md b/docs/component/multi-polygon-geom.md
index 4a8d12e1..b9309f61 100644
--- a/docs/component/multi-polygon-geom.md
+++ b/docs/component/multi-polygon-geom.md
@@ -1,5 +1,9 @@
 # vl-geom-multi-polygon
 
+> The multiple polygon geometry.
+
+`vl-geom-multi-polygon` can be used inside a [`vl-feature`](/docs/component/feature.md) to draw multiple polygons at once on the map.
+
 ## ES6 Module
 
 ```javascript
@@ -7,3 +11,41 @@ import { MultiPolygonGeom } from 'vuelayers'
 
 Vue.use(MultiPolygonGeom)
 ```
+
+<vuep template="#multi-polygon-geom-example"></vuep>
+
+<script v-pre type="text/x-template" id="multi-polygon-geom-example">
+<template>
+  <vl-map data-projection="EPSG:4326" style="height: 400px">
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile>
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-feature>
+      <vl-geom-multi-polygon :coordinates="[[[[-98.844959,19.691586],[-98.842749,19.690980],[-98.842170,19.693122],[-98.844358,19.693667],[-98.844959,19.691586]]],[[[-98.847770,19.684212],[-98.849079,19.680596],[-98.845453,19.679585],[-98.844466,19.683384],[-98.847770,19.684212]]]]"></vl-geom-multi-polygon>
+    </vl-feature>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [-98.8449,19.6869],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### coordinates
+
+- **Type**: `number[][][][]`
+
+An array of [polygons](https://geojson.org/geojson-spec.html#polygon) with coordinates in the map's [`projection`](/docs/quickstart.md#global-data-projection).
diff --git a/docs/component/point-geom.md b/docs/component/point-geom.md
index 7c5514aa..c382e8e1 100644
--- a/docs/component/point-geom.md
+++ b/docs/component/point-geom.md
@@ -1,5 +1,9 @@
 # vl-geom-point
 
+> A single point.
+
+`vl-geom-point` can be used inside a [`vl-feature`](/docs/component/feature.md) to draw a single points.
+
 ## ES6 Module
 
 ```javascript
@@ -7,3 +11,41 @@ import { PointGeom } from 'vuelayers'
 
 Vue.use(PointGeom)
 ```
+
+<vuep template="#point-geom-example"></vuep>
+
+<script v-pre type="text/x-template" id="point-geom-example">
+<template>
+  <vl-map data-projection="EPSG:4326" style="height: 400px">
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile>
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-feature>
+      <vl-geom-point :coordinates="[38.726634,9.003391]"></vl-geom-point>
+    </vl-feature>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [38.7241,9.0048],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### coordinates
+
+- **Type**: `number[]`
+
+This point's coordinates in units of the map's [`projection`](/docs/quickstart.md#global-data-projection).
diff --git a/docs/component/polygon-geom.md b/docs/component/polygon-geom.md
index 3e80ecfb..78053d9b 100644
--- a/docs/component/polygon-geom.md
+++ b/docs/component/polygon-geom.md
@@ -1,5 +1,9 @@
 # vl-geom-polygon
 
+> A single polygon geometry.
+
+`vl-geom-polygon` can be used inside a [`vl-feature`](/docs/component/feature.md) to draw a single polygon on the map. The polygon may contain holes in it, check the usage section for more info on this.
+
 ## ES6 Module
 
 ```javascript
@@ -7,3 +11,77 @@ import { PolygonGeom } from 'vuelayers'
 
 Vue.use(PolygonGeom)
 ```
+
+## Usage
+
+A simple polygon.
+
+<vuep template="#polygon-geom-example"></vuep>
+
+<script v-pre type="text/x-template" id="polygon-geom-example">
+<template>
+  <vl-map data-projection="EPSG:4326" style="height: 400px">
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile>
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-feature>
+      <vl-geom-polygon :coordinates="[[[-98.844959,19.691586],[-98.842749,19.690980],[-98.842170,19.693122],[-98.844358,19.693667],[-98.844959,19.691586]]]"></vl-geom-polygon>
+    </vl-feature>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [-98.8449,19.6869],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+In the following example there is a polygon with a hole in it.
+
+<vuep template="#polygon-with-hole-example"></vuep>
+
+<script v-pre type="text/x-template" id="polygon-with-hole-example">
+<template>
+  <vl-map data-projection="EPSG:4326" style="height: 400px">
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile>
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-feature>
+      <vl-geom-polygon :coordinates="[[[-67.489700,-18.379940],[-67.467727,-18.463978],[-67.406616,-18.518678],[-67.318038,-18.568154],[-67.234954,-18.521283],[-67.233581,-18.425547],[-67.313919,-18.366907],[-67.422409,-18.344097],[-67.489700,-18.379940]],[[-67.405242,-18.403397],[-67.341384,-18.406654],[-67.294006,-18.445741],[-67.329025,-18.496540],[-67.379150,-18.470491],[-67.405242,-18.403397]]]"></vl-geom-polygon>
+    </vl-feature>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 11,
+        center: [-67.3675,-18.4601],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### coordinates
+
+- **Type**: `number[][][]`
+
+A [polygon](https://tools.ietf.org/html/rfc7946#section-3.1.6) with coordinates in the map's [`projection`](/docs/quickstart.md#global-data-projection).