tile layer doc page #34

docs/component/image-layer.md

@@ -1,6 +1,6 @@
 # vl-layer-image
 
-> Any image from raster source
+> Renders 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).
@@ -14,7 +14,7 @@ raster source, like [`vl-source-image-static`](component/image-static-source.md)
 
 ## Usage
 
-Example below show how to use `vl-layer-image` component together with [`vl-source-image-static`](component/image-static-source.md)
+Example below shows 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) 

docs/component/tile-layer.md

@@ -1,3 +1,123 @@
 # vl-layer-tile
 
-// TODO...
+> Renders tiled images organized in grids
+
+`vl-layer-tile` can render images from sources that provide pre-rendered, tiled images in
+grids organized by zoom levels. It should be used together with tiled source components like
+[`vl-source-xyz`](component/xyz-source.md), [`vl-source-wmts`](component/wmts-source.md), [`vl-source-osm`](component/osm-source.md).
+
+## Versions
+
+`vl-layer-tile` component is a part of **TileLayer** module:
+
+- **ES6**: https://unpkg.com/vuelayers/lib/_esm/tile-layer/
+- **CommonJS**: https://unpkg.com/vuelayers/lib/tile-layer/
+
+## Usage
+
+Example below shows how to use `vl-layer-tile` component together with [`vl-source-wmts`](component/wmts-source.md)
+and with [`vl-source-sputnik`](component/sputnik-source.md).
+
+<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" 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-sputnik></vl-source-sputnik>
+    </vl-layer-tile>
+
+    <vl-layer-tile id="wmts">
+      <vl-source-wmts :attributions="attribution" :url="url" :layer-name="layerName" :matrix-set="matrixSet" :format="format" 
+                      :style-name="styleName"></vl-source-image-static>
+    </vl-layer-tile>
+  </vl-map>
+</template>
+
+<script>
+  export default {
+    data () {
+      return { 
+        zoom: 2,
+        center: [-90, 50],
+        rotation: 0,
+        url: 'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',
+        layerName: '0',
+        matrixSet: 'EPSG:3857',
+        format: 'image/png',
+        styleName: 'default',
+        attribution: 'Tiles © <a href="https://services.arcgisonline.com/arcgis/rest/' +
+                                        'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>',
+      }
+    },
+  }
+</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.
+
+### preload
+
+- **Type**: `number`
+- **Default**: `0`
+
+Low-resolution tiles up to `preload` level will be load. 

src/component/mapbox-source/source.vue

@@ -7,7 +7,7 @@
   import { coalesce } from '../../util/minilo'
 
   const MAPBOX_URL_TEMPLATE = 'https://{a-c}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}{tileNameSuffix}.{tileFormat}?access_token={accessToken}'
-  const MAPBOX_ATTRIBUTIONS = '&copy; <a href="https://www.mapbox.com/">MapBox</a>, ' + (new Date().getFullYear())
+  const MAPBOX_ATTRIBUTIONS = '&copy; <a href="https://www.mapbox.com/" target="_blank">MapBox</a>, ' + (new Date().getFullYear())
 
   const props = {
     accessToken: {

src/component/osm-source/source.vue

@@ -5,7 +5,7 @@
   import OSMSource from 'ol/source/osm'
   import xyzSource from '../../mixin/xyz-source'
 
-  const OSM_ATTRIBUTIONS = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.'
+  const OSM_ATTRIBUTIONS = '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors.'
   const OSM_URL_TEMPLATE = 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
   const OSM_MAX_ZOOM = 19
 

src/component/sputnik-source/source.vue

@@ -6,9 +6,8 @@
   import xyzSource from '../../mixin/xyz-source'
 
   const SPUTNIK_URL_TEMPLATE = 'http://tiles.maps.sputnik.ru/{z}/{x}/{y}.png?apikey={apikey}'
-  const SPUTNIK_ATTRIBUTIONS = '<a href="http://maps.sputnik.ru/">Спутник</a> ' +
-    '&copy; <a href="http://rt.ru/">Ростелеком</a> ' +
-    '&copy; <a href="https://openstreetmap.org/">Openstreetmap</a>, ' +
+  const SPUTNIK_ATTRIBUTIONS = '<a href="http://maps.sputnik.ru/" target="_blank">Спутник</a> ' +
+    '&copy; <a href="http://rt.ru/" target="_blank">Ростелеком</a>, ' +
     (new Date().getFullYear())
 
   const props = {