vl-overlay: complete doc page, add more properties to scoped slot #34

docs/component/overlay.md

@@ -23,17 +23,20 @@ Example below shows how to add custom content on to the map.
 <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 :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
-
-      <vl-layer-tile id="osm">
-          <vl-source-osm></vl-source-osm>
-      </vl-layer-tile>
-
-      <vl-overlay id="overlay" :position="overlayCoordinate">
-          <div class="overlay-content">
-              Hello world!
-          </div>
-      </vl-overlay>
+    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+    <vl-layer-tile id="osm">
+      <vl-source-osm></vl-source-osm>
+    </vl-layer-tile>
+
+    <vl-overlay id="overlay" :position="overlayCoordinate">
+      <template slot-scope="scope">
+        <div class="overlay-content">
+          Hello world!<br>
+          Position: {{ scope.position }}
+        </div>
+      </template>
+    </vl-overlay>
   </vl-map>
 </template>
 
@@ -89,8 +92,43 @@ and `top-right`.
 - **Type**: `boolean`
 - **Default**: `true`
 
-Whether pointer event propagation from overlay element to the map viewport should be stopped.
+Whether pointer event propagation from overlay element to the map viewport should be stopped. When set to `true`
+the overlay will be placed in the same container with map controls.
 
 ### insert-first
 
 - **Type**: `boolean`
+- **Default**: `true`
+
+Determines whether the overlay will be prepended or appended in the overlay container. 
+When [`stop-event`](#stop-event) is set to `true` you will probably set `insert-first` to `true` 
+so the overlay is displayed below controls.  
+
+### auto-pan
+
+- **Type**: `boolean`
+- **Default**: `false`
+
+Enables map panning when the overlay will be added, so the overlay will be visible in the current viewport.
+
+### auto-pan-margin
+
+- **Type**: `boolean`
+- **Default**: `20`
+
+The margin (in pixels) between the overlay and the viewport borders.
+
+### auto-pan-animation
+
+- **Type**: `Object`
+- **Default**: `undefined` 
+
+The animation options used to pan the overlay into view.
+
+## Events
+
+All events emit the new property value as argument.
+
+- `update:position`
+- `update:offset`
+- `update:positioning`

src/component/overlay/overlay.vue

@@ -1,7 +1,7 @@
 <template>
   <div :id="[$options.name, id].join('-')" :class="$options.name" style="display: none">
     <div>
-      <slot :id="id" :position="position"/>
+      <slot :id="id" :position="position" :offset="offset" :positioning="positioning"/>
     </div>
   </div>
 </template>
@@ -49,8 +49,14 @@
       type: Boolean,
       default: true,
     },
-    insertFirst: Boolean,
-    autoPan: Boolean,
+    insertFirst: {
+      type: Boolean,
+      default: true,
+    },
+    autoPan: {
+      type: Boolean,
+      default: false,
+    },
     autoPanMargin: {
       type: Number,
       default: 20,
@@ -199,7 +205,8 @@
 
     const ft = 100
     const changes = Observable::mergeObs(
-      observableFromOlChangeEvent(this.$overlay, 'position', true, ft, () => this.pointToDataProj(this.$overlay.getPosition())),
+      observableFromOlChangeEvent(this.$overlay, 'position', true, ft,
+        () => this.pointToDataProj(this.$overlay.getPosition())),
       observableFromOlChangeEvent(this.$overlay, [
         'offset',
         'positioning',