Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
mapbox-gl-controls
Advanced tools
mapbox-gl-controls - npm Package Compare versions
Comparing version 1.2.3 to 1.3.0
@@ -29,2 +29,7 @@ function _classCallCheck(instance, Constructor) { | ||
| /** | ||
| * @param {object} options | ||
| * @param {boolean} [options.instant=true] - Show compass if bearing is 0 | ||
| */ | ||
| var Compass = | ||
@@ -31,0 +36,0 @@ /*#__PURE__*/ |
@@ -32,43 +32,10 @@ import mapboxgl from 'mapbox-gl'; | ||
| var SOURCE_SYMBOL = 'controls-source-symbol'; | ||
| /** | ||
| * Fires map `ruler.on` and `ruler.off`events at the beginning and at the end of measuring. | ||
| * @param {object} options | ||
| * @param {string} [options.units='kilometers'] - Any units [@turf/distance](https://github.com/Turfjs/turf/tree/master/packages/turf-distance) supports | ||
| * @param {function} [options.labelFormat] - Accepts number and returns label. | ||
| * Can be used to convert value to any measuring units | ||
| */ | ||
| var geoLineString = function geoLineString() { | ||
| var coordinates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; | ||
| return { | ||
| type: 'Feature', | ||
| properties: {}, | ||
| geometry: { | ||
| type: 'LineString', | ||
| coordinates: coordinates | ||
| } | ||
| }; | ||
| }; | ||
| var geoPoint = function geoPoint() { | ||
| var coordinates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; | ||
| var labels = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; | ||
| return { | ||
| type: 'FeatureCollection', | ||
| features: coordinates.map(function (c, i) { | ||
| return { | ||
| type: 'Feature', | ||
| properties: { | ||
| text: labels[i] | ||
| }, | ||
| geometry: { | ||
| type: 'Point', | ||
| coordinates: c | ||
| } | ||
| }; | ||
| }) | ||
| }; | ||
| }; | ||
| var defaultLabelFormat = function defaultLabelFormat(number) { | ||
| if (number < 1) { | ||
| return "".concat((number * 1000).toFixed(), " m"); | ||
| } | ||
| return "".concat(number.toFixed(2), " km"); | ||
| }; | ||
| var Ruler = | ||
@@ -258,2 +225,42 @@ /*#__PURE__*/ | ||
| function geoLineString() { | ||
| var coordinates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; | ||
| return { | ||
| type: 'Feature', | ||
| properties: {}, | ||
| geometry: { | ||
| type: 'LineString', | ||
| coordinates: coordinates | ||
| } | ||
| }; | ||
| } | ||
| function geoPoint() { | ||
| var coordinates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; | ||
| var labels = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; | ||
| return { | ||
| type: 'FeatureCollection', | ||
| features: coordinates.map(function (c, i) { | ||
| return { | ||
| type: 'Feature', | ||
| properties: { | ||
| text: labels[i] | ||
| }, | ||
| geometry: { | ||
| type: 'Point', | ||
| coordinates: c | ||
| } | ||
| }; | ||
| }) | ||
| }; | ||
| } | ||
| function defaultLabelFormat(number) { | ||
| if (number < 1) { | ||
| return "".concat((number * 1000).toFixed(), " m"); | ||
| } | ||
| return "".concat(number.toFixed(2), " km"); | ||
| } | ||
| export default Ruler; |
@@ -23,11 +23,19 @@ function _classCallCheck(instance, Constructor) { | ||
| var stylesDefault = [{ | ||
| var defaultStyles = [{ | ||
| label: 'Streets', | ||
| styleName: 'Mapbox Streets', | ||
| styleUrl: 'mapbox://styles/mapbox/streets-v9' | ||
| styleUrl: 'mapbox://styles/mapbox/streets-v11' | ||
| }, { | ||
| label: 'Satellite', | ||
| styleName: 'Satellite', | ||
| styleUrl: 'mapbox://styles/mapbox/satellite-v9' | ||
| styleName: 'Mapbox Satellite Streets', | ||
| styleUrl: 'mapbox://sprites/mapbox/satellite-streets-v11' | ||
| }]; | ||
| /** | ||
| * @param {object} options | ||
| * @param {object} [options.styles] - Style params | ||
| * @param {string} [options.styles.label] - Style label to display on switcher | ||
| * @param {string} [options.styles.styleName] - [Style name from spec](https://docs.mapbox.com/mapbox-gl-js/style-spec/#root-name) | ||
| * @param {string} [options.styles.styleUrl] - Style url | ||
| * @param {function} [options.onChange] - Triggered on style change. Accepts `style` object | ||
| */ | ||
@@ -37,6 +45,9 @@ var Styles = | ||
| function () { | ||
| function Styles(styles) { | ||
| function Styles() { | ||
| var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| _classCallCheck(this, Styles); | ||
| this.styles = styles || stylesDefault; | ||
| this.styles = options.styles || defaultStyles; | ||
| this.onChange = options.onChange; | ||
| } | ||
@@ -61,2 +72,4 @@ | ||
| _this.map.setStyle(style.styleUrl); | ||
| if (_this.onChange) _this.onChange(style); | ||
| }); | ||
@@ -63,0 +76,0 @@ |
| { | ||
| "name": "mapbox-gl-controls", | ||
| "version": "1.2.3", | ||
| "version": "1.3.0", | ||
| "license": "MIT", | ||
@@ -10,18 +10,20 @@ "homepage": "https://bravecow.github.io/mapbox-gl-controls/", | ||
| "watch:css": "postcss src/theme.scss --watch --output theme.css", | ||
| "build": "rollup --config && postcss src/theme.scss --output theme.css && cp ./theme.css ./docs" | ||
| "build": "rollup --config && postcss src/theme.scss --output theme.css && cp ./theme.css ./docs", | ||
| "docs": "documentation readme src/** --section=API --markdown-toc=false" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.4.4", | ||
| "@babel/preset-env": "^7.4.4", | ||
| "eslint": "^5.16.0", | ||
| "eslint-config-airbnb-base": "^13.1.0", | ||
| "eslint-plugin-import": "^2.17.2", | ||
| "mapbox-gl": "^0.54.0", | ||
| "postcss-cli": "^6.1.2", | ||
| "@babel/core": "^7.5.5", | ||
| "@babel/preset-env": "^7.5.5", | ||
| "documentation": "^12.1.1", | ||
| "eslint": "^6.1.0", | ||
| "eslint-config-airbnb-base": "^14.0.0", | ||
| "eslint-plugin-import": "^2.18.2", | ||
| "mapbox-gl": "^1.2.1", | ||
| "postcss-cli": "^6.1.3", | ||
| "postcss-import": "^12.0.1", | ||
| "postcss-nested": "^4.1.2", | ||
| "rollup": "^1.11.3", | ||
| "rollup-plugin-babel": "^4.3.2", | ||
| "rollup-plugin-commonjs": "^9.3.4", | ||
| "rollup-plugin-node-resolve": "^4.2.3" | ||
| "rollup": "^1.19.4", | ||
| "rollup-plugin-babel": "^4.3.3", | ||
| "rollup-plugin-commonjs": "^10.0.2", | ||
| "rollup-plugin-node-resolve": "^5.2.0" | ||
| }, | ||
@@ -28,0 +30,0 @@ "dependencies": { |
126
README.md
@@ -5,16 +5,132 @@ # Mapbox Controls | ||
| ## Usage | ||
| ### Install | ||
| ```bash | ||
| npm install mapbox-gl-controls | ||
| ``` | ||
| ### Include styles | ||
| ```html | ||
| <link href="mapbox-gl-controls/theme.css" rel="stylesheet"> | ||
| ``` | ||
| ### Ruler Control | ||
| Ruler is similar to Google Maps Ruler. With draggable points. | ||
| ```javascript | ||
| import RulerControl from 'mapbox-gl-controls/lib/ruler'; | ||
| ### Style Control | ||
| map.addControl(new RulerControl(), 'top-right'); | ||
| map.on('ruler.on', () => console.log('ruler: on')); | ||
| map.on('ruler.off', () => console.log('ruler: off')); | ||
| Google maps-like styles switcher. | ||
| // with miles: | ||
| map.addControl(new RulerControl({ | ||
| units: 'miles', | ||
| labelFormat: n => `${n.toFixed(2)} ml`, | ||
| }), 'top-right'); | ||
| ``` | ||
| ### Styles Control | ||
| ```javascript | ||
| import StylesControl from 'mapbox-gl-controls/lib/styles'; | ||
| // with default styles: | ||
| map.addControl(new StylesControl(), 'top-left'); | ||
| // with custom styles: | ||
| map.addControl(new StylesControl([ | ||
| { | ||
| label: 'Streets', | ||
| styleName: 'Mapbox Streets', | ||
| styleUrl: 'mapbox://styles/mapbox/streets-v9', | ||
| }, { | ||
| label: 'Satellite', | ||
| styleName: 'Satellite', | ||
| styleUrl: 'mapbox://styles/mapbox/satellite-v9', | ||
| }, | ||
| ]), 'top-left'); | ||
| ``` | ||
| ### Compass Control | ||
| Compass control with arrows to rotate map. | ||
| ```javascript | ||
| import CompassControl from 'mapbox-gl-controls/lib/compass'; | ||
| map.addControl(new CompassControl(), 'top-right'); | ||
| ``` | ||
| ### Zoom Control | ||
| Just zoom in and zoom out buttons in single control. | ||
| ```javascript | ||
| import ZoomControl from 'mapbox-gl-controls/lib/zoom'; | ||
| map.addControl(new ZoomControl(), 'top-right'); | ||
| ``` | ||
| ### Language Control | ||
| ```javascript | ||
| import LanguageControl from 'mapbox-gl-controls/lib/language'; | ||
| // with browser detect: | ||
| map.addControl(new LanguageControl()); | ||
| // with custom language: | ||
| const languageControl = new LanguageControl({ | ||
| language: 'ru', | ||
| }); | ||
| map.addControl(languageControl); | ||
| // change language to multi language after control has been added: | ||
| languageControl.setLanguage('mul'); | ||
| ``` | ||
| ### API | ||
| <!-- Generated by documentation.js. Update this documentation by updating the source code. --> | ||
| #### Compass | ||
| ##### Parameters | ||
| - `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** (optional, default `{}`) | ||
| - `options.instant` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Show compass if bearing is 0 (optional, default `true`) | ||
| #### Language | ||
| Language can be set dynamically with `.setLanguage(lang)` method. | ||
| ##### Parameters | ||
| - `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** (optional, default `{}`) | ||
| - `options.supportedLanguages` **[array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)?** (Supported languages)[https://docs.mapbox.com/help/troubleshooting/change-language/] | ||
| - `options.language` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** One of the supported languages to apply | ||
| - `options.excludedLayerIds` **[array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)** Array of layer id to exclude from localization (optional, default `[]`) | ||
| - `options.getLanguageField` **[function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** Accepts language and returns language field. | ||
| By default fields are `name_LANGUAGE` and `name` for multi language (mul). | ||
| #### Ruler | ||
| Fires map `ruler.on` and `ruler.off`events at the beginning and at the end of measuring. | ||
| ##### Parameters | ||
| - `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** (optional, default `{}`) | ||
| - `options.units` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Any units [@turf/distance](https://github.com/Turfjs/turf/tree/master/packages/turf-distance) supports (optional, default `'kilometers'`) | ||
| - `options.labelFormat` **[function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** Accepts number and returns label. | ||
| Can be used to convert value to any measuring units | ||
| #### Styles | ||
| ##### Parameters | ||
| - `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** (optional, default `{}`) | ||
| - `options.styles` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?** Style params | ||
| - `options.styles.label` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Style label to display on switcher | ||
| - `options.styles.styleName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** [Style name from spec](https://docs.mapbox.com/mapbox-gl-js/style-spec/#root-name) | ||
| - `options.styles.styleUrl` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Style url | ||
| - `options.onChange` **[function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** Triggered on style change. Accepts `style` object |
@@ -5,2 +5,7 @@ import iconCCW from './icon-ccw'; | ||
| /** | ||
| * @param {object} options | ||
| * @param {boolean} [options.instant=true] - Show compass if bearing is 0 | ||
| */ | ||
| class Compass { | ||
@@ -7,0 +12,0 @@ constructor(options = {}) { |
@@ -5,2 +5,2 @@ export default ` | ||
| </svg> | ||
| ` | ||
| `; |
@@ -10,32 +10,10 @@ import mapboxgl from 'mapbox-gl'; | ||
| const geoLineString = (coordinates = []) => ({ | ||
| type: 'Feature', | ||
| properties: {}, | ||
| geometry: { | ||
| type: 'LineString', | ||
| coordinates, | ||
| }, | ||
| }); | ||
| /** | ||
| * Fires map `ruler.on` and `ruler.off`events at the beginning and at the end of measuring. | ||
| * @param {object} options | ||
| * @param {string} [options.units='kilometers'] - Any units [@turf/distance](https://github.com/Turfjs/turf/tree/master/packages/turf-distance) supports | ||
| * @param {function} [options.labelFormat] - Accepts number and returns label. | ||
| * Can be used to convert value to any measuring units | ||
| */ | ||
| const geoPoint = (coordinates = [], labels = []) => ({ | ||
| type: 'FeatureCollection', | ||
| features: coordinates.map((c, i) => ({ | ||
| type: 'Feature', | ||
| properties: { | ||
| text: labels[i], | ||
| }, | ||
| geometry: { | ||
| type: 'Point', | ||
| coordinates: c, | ||
| }, | ||
| })), | ||
| }); | ||
| const defaultLabelFormat = (number) => { | ||
| if (number < 1) { | ||
| return `${(number * 1000).toFixed()} m`; | ||
| } | ||
| return `${number.toFixed(2)} km`; | ||
| }; | ||
| class Ruler { | ||
@@ -125,3 +103,3 @@ constructor(options = {}) { | ||
| this.map.removeSource(SOURCE_SYMBOL); | ||
| this.markers.forEach(m => m.remove()); | ||
| this.markers.forEach((m) => m.remove()); | ||
| this.map.off('click', this.mapClickListener); | ||
@@ -203,1 +181,35 @@ this.map.off('style.load', this.styleLoadListener); | ||
| export default Ruler; | ||
| function geoLineString(coordinates = []) { | ||
| return { | ||
| type: 'Feature', | ||
| properties: {}, | ||
| geometry: { | ||
| type: 'LineString', | ||
| coordinates, | ||
| }, | ||
| }; | ||
| } | ||
| function geoPoint(coordinates = [], labels = []) { | ||
| return { | ||
| type: 'FeatureCollection', | ||
| features: coordinates.map((c, i) => ({ | ||
| type: 'Feature', | ||
| properties: { | ||
| text: labels[i], | ||
| }, | ||
| geometry: { | ||
| type: 'Point', | ||
| coordinates: c, | ||
| }, | ||
| })), | ||
| }; | ||
| } | ||
| function defaultLabelFormat(number) { | ||
| if (number < 1) { | ||
| return `${(number * 1000).toFixed()} m`; | ||
| } | ||
| return `${number.toFixed(2)} km`; | ||
| } |
@@ -1,16 +0,26 @@ | ||
| const stylesDefault = [ | ||
| const defaultStyles = [ | ||
| { | ||
| label: 'Streets', | ||
| styleName: 'Mapbox Streets', | ||
| styleUrl: 'mapbox://styles/mapbox/streets-v9', | ||
| styleUrl: 'mapbox://styles/mapbox/streets-v11', | ||
| }, { | ||
| label: 'Satellite', | ||
| styleName: 'Satellite', | ||
| styleUrl: 'mapbox://styles/mapbox/satellite-v9', | ||
| styleName: 'Mapbox Satellite Streets', | ||
| styleUrl: 'mapbox://sprites/mapbox/satellite-streets-v11', | ||
| }, | ||
| ]; | ||
| /** | ||
| * @param {object} options | ||
| * @param {object} [options.styles] - Style params | ||
| * @param {string} [options.styles.label] - Style label to display on switcher | ||
| * @param {string} [options.styles.styleName] - [Style name from spec](https://docs.mapbox.com/mapbox-gl-js/style-spec/#root-name) | ||
| * @param {string} [options.styles.styleUrl] - Style url | ||
| * @param {function} [options.onChange] - Triggered on style change. Accepts `style` object | ||
| */ | ||
| class Styles { | ||
| constructor(styles) { | ||
| this.styles = styles || stylesDefault; | ||
| constructor(options = {}) { | ||
| this.styles = options.styles || defaultStyles; | ||
| this.onChange = options.onChange; | ||
| } | ||
@@ -30,2 +40,3 @@ | ||
| this.map.setStyle(style.styleUrl); | ||
| if (this.onChange) this.onChange(style); | ||
| }); | ||
@@ -44,3 +55,3 @@ this.nodes.push(node); | ||
| }); | ||
| const styleNames = this.styles.map(style => style.styleName); | ||
| const styleNames = this.styles.map((style) => style.styleName); | ||
| const currentStyleIndex = styleNames.indexOf(this.map.getStyle().name); | ||
@@ -47,0 +58,0 @@ if (currentStyleIndex !== -1) { |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.39%
52383
- Number of package files
- increased by3.85%
27
- Number of lines in readme file
- increased by580%
136
Worsened metrics
- Dev dependency count
- increased by7.69%
14
- Lines of code
- decreased by-6.86%
1263
No dependency changes