diff --git a/.eslintrc.js b/.eslintrc.js index aad33221..3ca4f190 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -27,11 +27,7 @@ module.exports = { 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, - 'no-console': process.env.NODE_ENV === 'production' - ? [2, { - 'allow': ['error', 'warn'] - }] - : 0, + 'no-console': process.env.NODE_ENV === 'production' ? [2, { 'allow': ['error', 'warn'] }] : 0, 'comma-dangle': ['error', 'always-multiline'], }, } diff --git a/.gitignore b/.gitignore index d58f498a..e5ae349f 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,34 @@ # .nfs files are created when an open file is removed but is still being accessed .nfs* +### macOS ### +# General +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + ### Node template node_modules # Logs diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml index 6b326c6b..5b897998 100644 --- a/.idea/codeStyles/Project.xml +++ b/.idea/codeStyles/Project.xml @@ -2,9 +2,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -12,19 +61,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -50,6 +181,10 @@ + + + + @@ -78,20 +213,23 @@ + - - - - - - + + + + + + + + @@ -99,6 +237,109 @@ + + + + + + + true + + + + + + + + true + + + + + + + + + + true + true + + + + + + + + + + true + true + + + + + + + + + + true + true + + + + + + + + + true + + + + + + + + true + true + + + + + + + + + + true + true + + + + + + + + + + true + true + + + + + + + + + + + + + + + @@ -121,8 +362,17 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Default.xml b/.idea/inspectionProfiles/Default.xml index 6a23a214..4b90faf0 100644 --- a/.idea/inspectionProfiles/Default.xml +++ b/.idea/inspectionProfiles/Default.xml @@ -4,7 +4,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -50,7 +120,7 @@ - + @@ -65,16 +135,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml index 7f6ffce9..cfcfda2e 100644 --- a/.idea/inspectionProfiles/profiles_settings.xml +++ b/.idea/inspectionProfiles/profiles_settings.xml @@ -1,6 +1,5 @@ - diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml index 9cdc0c17..fd029570 100644 --- a/.idea/jsLibraryMappings.xml +++ b/.idea/jsLibraryMappings.xml @@ -1,7 +1,8 @@ - - + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml index d56696c5..cd5d6810 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -4,7 +4,7 @@ - + diff --git a/.idea/modules.xml b/.idea/modules.xml index 93ced671..8318b828 100644 --- a/.idea/modules.xml +++ b/.idea/modules.xml @@ -2,7 +2,7 @@ - + diff --git a/vuelayers.iml b/.idea/vuelayers.iml similarity index 100% rename from vuelayers.iml rename to .idea/vuelayers.iml diff --git a/.travis.yml b/.travis.yml index f199bc9a..b16edf49 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,4 @@ +dist: trusty sudo: required addons: apt: @@ -17,6 +18,7 @@ before_install: - export CHROME_BIN=chromium-browser - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start + - sleep 3 install: - nvm install $NODE_VERSION - nvm use $NODE_VERSION diff --git a/build/rollup.js b/build/rollup.js index 885d11d0..75a0de37 100644 --- a/build/rollup.js +++ b/build/rollup.js @@ -62,13 +62,25 @@ function getAllPackages () { globName: config.fullname, amdName: config.name, }, + { + entry: utils.resolve('src/mixin/index.js'), + jsName: 'mixin', + pkgName: 'mixin', + }, + { + entry: utils.resolve('src/ol-ext/index.js'), + jsName: 'ol-ext', + pkgName: 'ol-ext', + }, + { + entry: utils.resolve('src/rx-ext/index.js'), + jsName: 'rx-ext', + pkgName: 'rx-ext', + }, ] return Promise.all([ packagesFromPath(utils.resolve('src/component'), utils.resolve('src/component')), - packagesFromPath(utils.resolve('src/mixin'), srcPath), - packagesFromPath(utils.resolve('src/ol-ext'), srcPath), - packagesFromPath(utils.resolve('src/rx-ext'), srcPath), packagesFromPath(utils.resolve('src/util'), srcPath), ]).then(otherPackages => { return packages.concat(otherPackages.reduce((all, packages) => all.concat(packages), [])) @@ -128,12 +140,15 @@ function bundleOptions (format, package, env = 'development') { if (!parentId) { return false } - if (/\.(sass|vue)$/i.test(id)) { + if (/\.(sass|s?css|vue)$/i.test(id)) { return false } // embeddable - const embeddableRegExp = /(\.\/|src\/)(install)/i - if (embeddableRegExp.test(id)) { + const embeddableRegExp = /\/(mixin|ol-ext|rx-ext)\//i + if ( + embeddableRegExp.test(parentId) && + (/^\.\//.test(id) || embeddableRegExp.test(id)) + ) { return false } // check internal component imports @@ -174,21 +189,22 @@ function bundleOptions (format, package, env = 'development') { options.output.globals = (id) => { if (id === 'vue') return 'Vue' - if (ol[id] != null) { - return ol[id] - } + // if (ol[id] != null) { + // return ol[id] + // } } options.input.external = (id, parent, resolved) => { if (['vue'].includes(id)) return true - if (!resolved && /^ol\/.+/.test(id)) { - ol[id] = id.replace(/\//g, '.') - return true - } + // if (!resolved && /^ol\/.+/.test(id)) { + // ol[id] = id.replace(/\//g, '.') + // return true + // } return false } options.replaces['process.env.NODE_ENV'] = `'${env}'` + options.replaces['process.env.VUELAYERS_DEBUG'] = JSON.stringify(process.env.NODE_ENV !== 'production') // options.minify = true // process.env.BABEL_ENV = 'es5-production' // options.defines.IS_STANDALONE = true @@ -231,7 +247,7 @@ function makeBundle (options = {}) { indentedSyntax: true, includePaths: [ utils.resolve('src'), - utils.resolve('src/sass'), + utils.resolve('src/styles'), utils.resolve('node_modules'), ], }, diff --git a/build/utils.js b/build/utils.js index a78a20cb..0a3b0e70 100644 --- a/build/utils.js +++ b/build/utils.js @@ -62,7 +62,7 @@ function cssLoaders (options) { sass: generateLoaders('sass', { includePaths: [ resolve('src'), - resolve('src/sass'), + resolve('src/styles'), resolve('node_modules'), ], indentedSyntax: true, @@ -70,7 +70,7 @@ function cssLoaders (options) { scss: generateLoaders('sass', { includePaths: [ resolve('src'), - resolve('src/sass'), + resolve('src/styles'), resolve('node_modules'), ], }), diff --git a/build/webpack.base.config.js b/build/webpack.base.config.js index 68948ba2..f8f5e9ec 100644 --- a/build/webpack.base.config.js +++ b/build/webpack.base.config.js @@ -1,7 +1,6 @@ const webpack = require('webpack') -const WebpackNotifierPlugin = require('webpack-notifier') const StringReplacePlugin = require('string-replace-webpack-plugin') -const {VueLoaderPlugin} = require('vue-loader') +const { VueLoaderPlugin } = require('vue-loader') const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const utils = require('./utils') @@ -47,9 +46,7 @@ module.exports = { // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify new UglifyJsPlugin({ uglifyOptions: { - compress: { - warnings: false, - }, + warnings: false, }, cache: true, sourceMap: true, @@ -78,6 +75,15 @@ module.exports = { formatter: require('eslint-friendly-formatter'), }, }, + { + test: /\.(js|vue|s?[ca]ss)$/, + loader: utils.compileVarsReplaceLoader(), + enforce: 'pre', + include: [ + utils.resolve('src'), + utils.resolve('test'), + ], + }, { test: /\.js$/, loader: 'babel-loader', @@ -104,16 +110,13 @@ module.exports = { // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin(Object.assign({}, config.replaces, { 'process.env.NODE_ENV': `'${process.env.NODE_ENV}'`, + 'process.env.VUELAYERS_DEBUG': process.env.NODE_ENV !== 'production', })), new webpack.BannerPlugin({ banner: config.banner, raw: true, entryOnly: true, }), - new WebpackNotifierPlugin({ - title: config.fullname, - alwaysNotify: false, - }), ], performance: { maxEntrypointSize: 1024 * 1024, // 1Mb @@ -130,5 +133,11 @@ module.exports = { open: true, hot: true, contentBase: config.outputPath, + clientLogLevel: 'info', + compress: true, + overlay: { warnings: false, errors: true }, + headers: { + 'Access-Control-Allow-Origin': '*', + }, }, } diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 47cfbb65..7eec3c73 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -51,6 +51,12 @@ * [vl-style-box](/docs/component/style-box.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) + * [vl-style-icon](/docs/component/icon-style.md) + * [vl-style-reg-shape](/docs/component/reg-shape-style.md) + * [vl-style-stroke](/docs/component/stroke-style.md) + * [vl-style-text](/docs/component/text-style.md) * Mixins diff --git a/docs/component/bingmaps-source.md b/docs/component/bingmaps-source.md index 7f116790..1f6f31ae 100644 --- a/docs/component/bingmaps-source.md +++ b/docs/component/bingmaps-source.md @@ -5,11 +5,13 @@ `vl-source-bingmaps` adds ability to display tile data from Bing Maps. To use this source you should get **API key** at https://www.bingmapsportal.com. -## Versions +## ES6 Module -`vl-source-bingmaps` is a part of **BingmapsSource** module: +```javascript +import { BingmapsSource } from 'vuelayers' -- **ES6**: https://unpkg.com/vuelayers/lib/bingmaps-source/ +Vue.use(BingmapsSource) +``` ## Usage diff --git a/docs/component/circle-geom.md b/docs/component/circle-geom.md index 5e537237..35e6e2d5 100644 --- a/docs/component/circle-geom.md +++ b/docs/component/circle-geom.md @@ -1 +1,61 @@ # vl-geom-circle + +> The circle geometry. + +`vl-geom-circle` can be used in a [`vl-feature`](/docs/component/feature.md) to draw circles on the map. + +## ES6 Module + +```javascript +import { CircleGeom } from 'vuelayers' + +Vue.use(CircleGeom); +``` + +## Usage + + + + + + +## Properties + +### coordinates + +- **Type**: `number[]` +- **Default**: `[0, 0]` + +The center coordinate of the circle in the unit specified by the view's [`projection`](/docs/quickstart.md#global-data-projection). + +### radius + +- **Type**: `number` +- **Default**: `0` + +The radius of the circle in the unit specified by the view's [`projection`](/docs/quickstart.md#global-data-projection). diff --git a/docs/component/circle-style.md b/docs/component/circle-style.md index 40bfa5cb..cb455b7a 100644 --- a/docs/component/circle-style.md +++ b/docs/component/circle-style.md @@ -1 +1,119 @@ # vl-style-circle + +> Styles points as circles. + +Use it inside [`vl-style-box`](/docs/component/style-box.md) to style points as circles. + +## ES6 Module + +```javascript +import { CircleStyle } from 'vuelayers' + +Vue.use(CircleStyle) +``` + +## Usage + +Styling a feature inside a vector layer. + + + + + + +Styling the whole layer + + + + + + +## Properties + +### radius + +- **Type**: `number` + +Radius in pixels of the circle. diff --git a/docs/component/draw-interaction.md b/docs/component/draw-interaction.md index 843275b6..44dc5fd3 100644 --- a/docs/component/draw-interaction.md +++ b/docs/component/draw-interaction.md @@ -1 +1,9 @@ # vl-interaction-draw + +## ES6 Module + +```javascript +import { DrawInteraction } from 'vuelayers' + +Vue.use(DrawInteraction) +``` diff --git a/docs/component/feature.md b/docs/component/feature.md index d8b88bbc..b625c367 100644 --- a/docs/component/feature.md +++ b/docs/component/feature.md @@ -13,11 +13,13 @@ components, without geometry component nothing will be rendered. Custom feature styles can be applied with [`vl-style-*`](/docs/component/circle-style.md) components placed inside default slot. -## Versions +## ES6 Module -`vl-feature` component is a part of **Feature** module: +```javascript +import { Feature } from 'vuelayers' -- **ES6**: https://unpkg.com/vuelayers/lib/feature/ +Vue.use(Feature) +``` ## Usage diff --git a/docs/component/fill-style.md b/docs/component/fill-style.md new file mode 100644 index 00000000..8a133e02 --- /dev/null +++ b/docs/component/fill-style.md @@ -0,0 +1,175 @@ +# vl-style-fill + +> 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. + +## ES6 Module + +```javascript +import { FillStyle } from 'vuelayers' + +Vue.use(FillStyle) +``` + +## Usage + +Styling points like circles with filling. + + + + + + +Styling all features with filling in a layer. + + + + + + +## Properties + +### color + +- **Type**: `string`, `array` + +The color either in hexadecimal or as RGB array with red, green, and blue values between 0 and 255 and alpha between 0 and 1 inclusive. diff --git a/docs/component/func-style.md b/docs/component/func-style.md new file mode 100644 index 00000000..aa292cda --- /dev/null +++ b/docs/component/func-style.md @@ -0,0 +1,9 @@ +# vl-style-func + +## ES6 Module + +```javascript +import { StyleFunc } from 'vuelayers' + +Vue.use(StyleFunc) +``` diff --git a/docs/component/geoloc.md b/docs/component/geoloc.md index b13a375b..3d8201a5 100644 --- a/docs/component/geoloc.md +++ b/docs/component/geoloc.md @@ -6,11 +6,13 @@ The [Geolocation API](https://www.w3.org/TR/geolocation-API/) is used to locate a user's position. You can place it to the **default slot** of [`vl-map`](/docs/component/map.md) component. -## Versions +## ES6 Module -`vl-geoloc` is a part of **Geoloc** module: +```javascript +import { Geoloc } from 'vuelayers' -- **ES6**: https://unpkg.com/vuelayers/lib/geoloc/ +Vue.use(Geoloc) +``` ## Usage diff --git a/docs/component/icon-style.md b/docs/component/icon-style.md new file mode 100644 index 00000000..22fde7e6 --- /dev/null +++ b/docs/component/icon-style.md @@ -0,0 +1,9 @@ +# vl-style-icon + +## ES6 Module + +```javascript +import { IconStyle } from 'vuelayers' + +Vue.use(IconStyle) +``` diff --git a/docs/component/image-layer.md b/docs/component/image-layer.md index 41a7024d..d06b7e04 100644 --- a/docs/component/image-layer.md +++ b/docs/component/image-layer.md @@ -5,11 +5,13 @@ `vl-layer-image` components can render any server-rendered image, it is a container for raster source, like [`vl-source-image-static`](/docs/component/image-static-source.md). -## Versions +## ES6 Module -`vl-layer-image` component is a part of **ImageLayer** module: +```javascript +import { ImageLayer } from 'vuelayers' -- **ES6**: https://unpkg.com/vuelayers/lib/image-layer/ +Vue.use(ImageLayer) +``` ## Usage diff --git a/docs/component/image-static-source.md b/docs/component/image-static-source.md index 6d7559ba..ac2a3b5c 100644 --- a/docs/component/image-static-source.md +++ b/docs/component/image-static-source.md @@ -1,3 +1,9 @@ # vl-image-static-source -// TODO +## ES6 Module + +```javascript +import { ImageStaticSource } from 'vuelayers' + +Vue.use(ImageStaticSource) +``` diff --git a/docs/component/image-wms-source.md b/docs/component/image-wms-source.md index 650dfa20..0b0c5a6d 100644 --- a/docs/component/image-wms-source.md +++ b/docs/component/image-wms-source.md @@ -1,3 +1,9 @@ # vl-image-wms-source -// TODO +## ES6 Module + +```javascript +import { ImageWmsSource } from 'vuelayers' + +Vue.use(ImageWmsSource) +``` diff --git a/docs/component/line-string-geom.md b/docs/component/line-string-geom.md index ba6b3431..77bcd860 100644 --- a/docs/component/line-string-geom.md +++ b/docs/component/line-string-geom.md @@ -1 +1,51 @@ # vl-geom-line-string + +> The single line geometry. + +`vl-geom-line-string` can be used inside a [`vl-feature`](/docs/component/feature.md) to draw lines on the map. + +## ES6 Module + +```javascript +import { LineStringGeom } from 'vuelayers' + +Vue.use(LineStringGeom) +``` + + + + + + +## Properties + +### coordinates + +- **Type**: `number[][]` + +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/map.md b/docs/component/map.md index fb0fc8e6..bb4757e7 100644 --- a/docs/component/map.md +++ b/docs/component/map.md @@ -2,19 +2,21 @@ > The core component of VueLayers -It is a main container for all other VueLayers components and has one `default` +This is the main container for all other VueLayers components and has one `default` slot to place them all. Usually you will use it together with [`vl-view`](/docs/component/view.md) component to setup `zoom`, `center`, `projection` and other view related propeties for the map. -## Module system +## ES6 Module -`vl-map` component is a part of **Map** module: +```javascript +import { Map } from 'vuelayers' -- **ES6**: https://unpkg.com/vuelayers/lib/map/ +Vue.use(Map) +``` ## Usage -Example of simple map. +Example of a simple map. See also documentation of [`vl-view`](/docs/component/view.md) component. @@ -50,7 +52,7 @@ See also documentation of [`vl-view`](/docs/component/view.md) component. - **Type**: `Object, boolean` - **Default**: `true` -Options for default controls added to the map by default. Set to `false` to disable +Options for default controls are added to the map by default. Set to `false` to disable all map controls. Object value is used to configure controls. ### keyboard-event-target @@ -135,7 +137,7 @@ Pointer events that emits [`ol.MapBrowserEvent`](http://openlayers.org/en/latest - `pointerdrag` - `pointermove` -Other events that emits [`ol.MapEvent`](http://openlayers.org/en/latest/apidoc/module-ol_MapEvent-MapEvent.html) +Other events that emit [`ol.MapEvent`](http://openlayers.org/en/latest/apidoc/module-ol_MapEvent-MapEvent.html) - `movestart` - `moveend` diff --git a/docs/component/modify-interaction.md b/docs/component/modify-interaction.md index 011c9015..589cb7b6 100644 --- a/docs/component/modify-interaction.md +++ b/docs/component/modify-interaction.md @@ -1 +1,9 @@ # vl-interaction-modify + +## ES6 Module + +```javascript +import { ModifyInteraction } from 'vuelayers' + +Vue.use(ModifyInteraction) +``` diff --git a/docs/component/multi-line-string-geom.md b/docs/component/multi-line-string-geom.md index f86755b4..21b5333b 100644 --- a/docs/component/multi-line-string-geom.md +++ b/docs/component/multi-line-string-geom.md @@ -1 +1,51 @@ # vl-geom-multi-line-string + +> The multiple line geometry. + +`vl-geom-multi-line-string` can be used inside a [`vl-feature`](/docs/component/feature.md) to draw multiple lines on the map. + +## ES6 Module + +```javascript +import { MultiLineStringGeom } from 'vuelayers' + +Vue.use(MultiLineStringGeom) +``` + + + + + + +## Properties + +### coordinates + +- **Type**: `number[][][]` + +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 6345904a..ad548c6d 100644 --- a/docs/component/multi-point-geom.md +++ b/docs/component/multi-point-geom.md @@ -1 +1,51 @@ # 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 +import { MultiPointGeom } from 'vuelayers' + +Vue.use(MultiPointGeom) +``` + + + + + + +## 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 7a078bfe..b9309f61 100644 --- a/docs/component/multi-polygon-geom.md +++ b/docs/component/multi-polygon-geom.md @@ -1 +1,51 @@ # 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 +import { MultiPolygonGeom } from 'vuelayers' + +Vue.use(MultiPolygonGeom) +``` + + + + + + +## 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/osm-source.md b/docs/component/osm-source.md index e193f134..d9deb3e3 100644 --- a/docs/component/osm-source.md +++ b/docs/component/osm-source.md @@ -1 +1,9 @@ # vl-source-osm + +## ES6 Module + +```javascript +import { OsmSource } from 'vuelayers' + +Vue.use(OsmSource) +``` diff --git a/docs/component/overlay.md b/docs/component/overlay.md index 9286ede5..10886c96 100644 --- a/docs/component/overlay.md +++ b/docs/component/overlay.md @@ -7,11 +7,13 @@ the map. It has **default** scoped slot to render your custom content. You can place it any component with slot inside the map components tree to easily bind it to some coordinate (for example: inside `vl-feature` or `vl-view`). -## Versions +## ES6 Module -`vl-overlay` component is a part of **Overlay** module: +```javascript +import { Overlay } from 'vuelayers' -- **ES6**: https://unpkg.com/vuelayers/lib/overlay/ +Vue.use(Overlay) +``` ## Usage diff --git a/docs/component/point-geom.md b/docs/component/point-geom.md index b7d01de3..c382e8e1 100644 --- a/docs/component/point-geom.md +++ b/docs/component/point-geom.md @@ -1 +1,51 @@ # 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 +import { PointGeom } from 'vuelayers' + +Vue.use(PointGeom) +``` + + + + + + +## 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 3469dcb6..78053d9b 100644 --- a/docs/component/polygon-geom.md +++ b/docs/component/polygon-geom.md @@ -1 +1,87 @@ # 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 +import { PolygonGeom } from 'vuelayers' + +Vue.use(PolygonGeom) +``` + +## Usage + +A simple polygon. + + + + + + +In the following example there is a polygon with a hole in it. + + + + + + +## 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). diff --git a/docs/component/reg-shape-style.md b/docs/component/reg-shape-style.md new file mode 100644 index 00000000..5488fbaa --- /dev/null +++ b/docs/component/reg-shape-style.md @@ -0,0 +1,9 @@ +# vl-style-reg-shape + +## ES6 Module + +```javascript +import { RegShapeStyle } from 'vuelayers' + +Vue.use(RegShapeStyle) +``` diff --git a/docs/component/select-interaction.md b/docs/component/select-interaction.md index a9bf578f..fef28a27 100644 --- a/docs/component/select-interaction.md +++ b/docs/component/select-interaction.md @@ -1 +1,9 @@ # vl-interaction-select + +## ES6 Module + +```javascript +import { SelectInteraction } from 'vuelayers' + +Vue.use(SelectInteraction) +``` diff --git a/docs/component/snap-interaction.md b/docs/component/snap-interaction.md index 03da1303..ceeddba1 100644 --- a/docs/component/snap-interaction.md +++ b/docs/component/snap-interaction.md @@ -1 +1,9 @@ # vl-interaction-snap + +## ES6 Module + +```javascript +import { SnapInteraction } from 'vuelayers' + +Vue.use(SnapInteraction) +``` diff --git a/docs/component/sputnik-source.md b/docs/component/sputnik-source.md index 3261e438..8dc6a43b 100644 --- a/docs/component/sputnik-source.md +++ b/docs/component/sputnik-source.md @@ -1 +1,9 @@ # vl-source-sputnik + +## ES6 Module + +```javascript +import { SputnikSource } from 'vuelayers' + +Vue.use(SputnikSource) +``` diff --git a/docs/component/stroke-style.md b/docs/component/stroke-style.md new file mode 100644 index 00000000..93b3556f --- /dev/null +++ b/docs/component/stroke-style.md @@ -0,0 +1,173 @@ +# vl-style-stroke + +> 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. + +## ES6 Module + +```javascript +import { StrokeStyle } from 'vuelayers' + +Vue.use(StrokeStyle) +``` + +## Usage + + + + + + +## Properties + +### Color + +- **Type**: `array`, `string` + +Stroke color. Either in hexadecimal or as RGBA array with red, green, and blue values betweeen 0 and 255 and alpha value between 0 and 1 inclusive. + +### lineCap + +- **Type**: `string` +- **Default**: `round`, + +How to style the ends of the lines if any. Options are `round`, `butt`, and `square`. + +### lineJoin + +- **Type**: `string` +- **Default**: `round`, + +How to style line segment joints. Choices are `round`, `bevel`, `miter` + +### lineDash + +- **Type**: `array` + +An Array of numbers that specify distances to alternately draw a line and a gap. + +### lineDashOffset + +- **Type**: `number` +- **Default**: `0` + +Offsets the starting point of the dash pattern by the given amount. + +### miterLimit + +- **Type**: `number` +- **Default**: `10` + +When to cut corners on sharp angles. For reference check [this entry](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit) on Mozilla Developer Network. + +### Width + +- **Type**: `Number` +- **Default**: `1.25` + +Width of the stroke. diff --git a/docs/component/style-box.md b/docs/component/style-box.md index 87ae9fd0..f4df35ed 100644 --- a/docs/component/style-box.md +++ b/docs/component/style-box.md @@ -1 +1,153 @@ # vl-style-box + +> A container for a collection of styles + +Use it inside [`vl-feature`](/docs/component/feature.md) or [`vl-layer-vector`](/docs/component/vector-layer.md) to give custom styles to vector features. + +## ES6 Module + +```javascript +import { StyleBox } from 'vuelayers' + +Vue.use(StyleBox) +``` + +## Usage + +Styling a feature. + + + + + + +Styling the whole layer. + + + + + + +## Properties + +### z-index + +- **Type**: `number` +- **Default**: `0` + +### condition + +- **Type**: `Function | Boolean` +- **Default**: `true` diff --git a/docs/component/text-style.md b/docs/component/text-style.md new file mode 100644 index 00000000..7f1b4514 --- /dev/null +++ b/docs/component/text-style.md @@ -0,0 +1,9 @@ +# vl-style-text + +## ES6 Module + +```javascript +import { TextStyle } from 'vuelayers' + +Vue.use(TextStyle) +``` diff --git a/docs/component/tile-layer.md b/docs/component/tile-layer.md index d48b6bd4..015aae2f 100644 --- a/docs/component/tile-layer.md +++ b/docs/component/tile-layer.md @@ -6,11 +6,13 @@ grids organized by zoom levels. It should be used together with tiled source components like [`vl-source-xyz`](/docs/component/xyz-source.md), [`vl-source-wmts`](/docs/component/wmts-source.md), [`vl-source-osm`](/docs/component/osm-source.md). -## Versions +## ES6 Module -`vl-layer-tile` component is a part of **TileLayer** module: +```javascript +import { TileLayer } from 'vuelayers' -- **ES6**: https://unpkg.com/vuelayers/lib/tile-layer/ +Vue.use(TileLayer) +``` ## Usage diff --git a/docs/component/vector-layer.md b/docs/component/vector-layer.md index 516f3b12..a6a50d30 100644 --- a/docs/component/vector-layer.md +++ b/docs/component/vector-layer.md @@ -2,19 +2,21 @@ > Renders vector data -`vl-layer-vector` can render vector from verious backend services. It should be +`vl-layer-vector` can render vector from various backend services. It should be used with together with [`vl-source-vector`](/docs/component/vector-source.md) component. -## Versions +## ES6 Module -`vl-layer-vector` is a part of **VectorLayer** module: +```javascript +import { VectorLayer } from 'vuelayers' -- **ES6**: https://unpkg.com/vuelayers/lib/vector-layer/ +Vue.use(VectorLayer) +``` ## Usage Example below shows how you can use `vl-layer-vector` and [`vl-source-vector`](/docs/component/vector-source.md) to render some -vector vector features from remote backend. +vector features from remote backend. diff --git a/docs/component/vector-source.md b/docs/component/vector-source.md index df723129..c9ea7097 100644 --- a/docs/component/vector-source.md +++ b/docs/component/vector-source.md @@ -5,9 +5,13 @@ `vl-source-vector` can be used together with [`vl-layer-vector`](/docs/component/vector-layer.md) to draw any vector data on the map. -# Versions +## ES6 Module -- **ES6**: https://unpkg.com/vuelayers/lib/vector-source/ +```javascript +import { VectorSource } from 'vuelayers' + +Vue.use(VectorSource) +``` ## Usage diff --git a/docs/component/vector-tile-layer.md b/docs/component/vector-tile-layer.md index 366db897..a9af3c93 100644 --- a/docs/component/vector-tile-layer.md +++ b/docs/component/vector-tile-layer.md @@ -5,11 +5,13 @@ `vl-layer-vector-tile` can render tiled vector data in grids organized by zoom levels. It should be used together with [`vl-source-vector-tile`](/docs/component/vector-tile-source.md) component. -## Versions +## ES6 Module -`vl-layer-vector-tile` component is a part of **VectorTileLayer** module: +```javascript +import { VectorTileLayer } from 'vuelayers' -- **ES6**: https://unpkg.com/vuelayers/lib/vector-tile-layer/ +Vue.use(VectorTileLayer) +``` ## Usage diff --git a/docs/component/vector-tile-source.md b/docs/component/vector-tile-source.md index 32ba6704..45e721dd 100644 --- a/docs/component/vector-tile-source.md +++ b/docs/component/vector-tile-source.md @@ -1 +1,9 @@ # vl-source-vector-tile + +## ES6 Module + +```javascript +import { VectorTileSource } from 'vuelayers' + +Vue.use(VectorTileSource) +``` diff --git a/docs/component/view.md b/docs/component/view.md index a592d99a..494a9925 100644 --- a/docs/component/view.md +++ b/docs/component/view.md @@ -5,11 +5,14 @@ `vl-view` is the component to act upon to change the **center**, **resolution** and **rotation** of the map. -## Versions +## ES6 Module -`vl-view` component is a part of **Map** module: +```javascript +// vl-view component comes with vl-map +import { Map } from 'vuelayers' -- **ES6**: https://unpkg.com/vuelayers/lib/map/ +Vue.use(Map) +``` ## Usage diff --git a/docs/component/wms-source.md b/docs/component/wms-source.md index b865cf39..8a46da87 100644 --- a/docs/component/wms-source.md +++ b/docs/component/wms-source.md @@ -1 +1,18 @@ # vl-source-wms + +## ES6 Module + +```javascript +import { WmsSource } from 'vuelayers' + +Vue.use(WmsSource) +``` + +## Properties + +### extParams + +- **Type**: `object` +- **Example**: `{tiled: true, tilesOrigin: [0, 0]}` + +Extra parameters to be passed to the `TileWMS` constructor. Corresponds to [`params`](https://openlayers.org/en/latest/apidoc/module-ol_source_TileWMS.html) except that other properties like `layers` are specified separately. diff --git a/docs/component/wmts-source.md b/docs/component/wmts-source.md index 46dd4be8..e7260d39 100644 --- a/docs/component/wmts-source.md +++ b/docs/component/wmts-source.md @@ -1 +1,9 @@ # vl-source-wmts + +## ES6 Module + +```javascript +import { WmtsSource } from 'vuelayers' + +Vue.use(WmtsSource) +``` diff --git a/docs/component/xyz-source.md b/docs/component/xyz-source.md index 0953c550..e7210a93 100644 --- a/docs/component/xyz-source.md +++ b/docs/component/xyz-source.md @@ -1 +1,9 @@ # vl-source-xyz + +## ES6 Module + +```javascript +import { XyzSource } from 'vuelayers' + +Vue.use(XyzSource) +``` diff --git a/docs/home.md b/docs/home.md index aa367f52..e47c6e62 100644 --- a/docs/home.md +++ b/docs/home.md @@ -7,10 +7,10 @@ [![License](https://img.shields.io/github/license/ghettovoice/vuelayers.svg)](https://github.com/ghettovoice/vuelayers/blob/master/LICENSE) + frameborder="0" scrolling="0" class="github-button vld-github-btn" width="140px" height="30px"> + frameborder="0" scrolling="0" class="github-button vld-github-btn" width="140px" height="30px"> ## Overview diff --git a/docs/index.html b/docs/index.html index 7a7b0d55..8cb07597 100644 --- a/docs/index.html +++ b/docs/index.html @@ -22,7 +22,7 @@ - + diff --git a/test/main.js b/test/main.js index d6b95b45..f92e3f07 100644 --- a/test/main.js +++ b/test/main.js @@ -3,6 +3,9 @@ import Vue from 'vue' import VueLayers from '@' import App from './app.vue' +Vue.performance = true +Vue.productionTip = true + Vue.use(VueLayers, { // dataProjection: 'EPSG:4326', }) diff --git a/test/umd.html b/test/umd.html index 17f7c9e7..4d0208a0 100644 --- a/test/umd.html +++ b/test/umd.html @@ -17,28 +17,123 @@ body * { box-sizing: border-box; } + + #app { + display: flex; + flex-direction: column; + } + + #map { + flex: 1 1 auto; + } - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + test + + + + + +