Merge pull request #44 from mblomdahl/feature/min-radius

Feature/minRadius and maxRadius

Author: mblomdahl

README.md

@@ -78,6 +78,8 @@ myCircle.on('contextmenu', function (mapMouseEvent) {
     -   `options.fillOpacity` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** Fill opacity (optional, default `0.25`)
     -   `options.refineStroke` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** Adjust circle polygon precision based on radius and zoom
             (i.e. prettier circles at the expense of performance) (optional, default `false`)
+    -   `options.minRadius` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** Minimum radius (optional, default `10`)
+    -   `options.maxRadius` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** Maximum radius (optional, default `1100000`)
     -   `options.properties` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** Property metadata for Mapbox GL JS circle object (optional, default `{}`)
 
 #### on

example/index.js

@@ -61,6 +61,8 @@ const editableOpts = {
     strokeOpacity: 0.85,
     fillColor: '#29AB87',
     fillOpacity: 0.2,
+    minRadius: 100,
+    maxRadius: 500000,
     debugEl: document.body.appendChild(document.createElement('div'))
 };
 

index.html

@@ -140,6 +140,7 @@
 
     var editableCircleOpts = {
         editable: true,
+        minRadius: 50,
         debugEl: document.getElementById('debug')
     };
 

lib/main.js

@@ -126,7 +126,7 @@ class MapboxCircle {
 
     /** @param {number} newRadius Meter radius. */
     set radius(newRadius) {
-        this._currentRadius = Math.min(Math.max(this._minRadius, newRadius), this._maxRadius);
+        this._currentRadius = Math.min(Math.max(this.options.minRadius, newRadius), this.options.maxRadius);
         this._updateCircle();
         this._animate();
     }
@@ -157,6 +157,8 @@ class MapboxCircle {
      * @param {?number} [options.fillOpacity=0.25] Fill opacity
      * @param {?boolean} [options.refineStroke=false] Adjust circle polygon precision based on radius and zoom
      *     (i.e. prettier circles at the expense of performance)
+     * @param {?number} [options.minRadius=10] Minimum radius
+     * @param {?number} [options.maxRadius=1100000] Maximum radius
      * @param {?Object} [options.properties={}] Property metadata for Mapbox GL JS circle object
      * @public
      */
@@ -170,8 +172,6 @@ class MapboxCircle {
 
         /** @const {[number,number]} */ this._lastCenterLngLat = [centerLng, centerLat];
         /** @const {[number,number]} */ this._currentCenterLngLat = [centerLng, centerLat];
-        /** @const {number} */ this._minRadius = 1e1;
-        /** @const {number} */ this._maxRadius = 1.1e6;
         /** @const {number} */ this._lastRadius = Math.round(radius);
         /** @const {number} */ this._currentRadius = Math.round(radius);
         /** @const {Object} */ this.options = _.extend({
@@ -182,6 +182,8 @@ class MapboxCircle {
             fillColor: '#FB6A4A',
             fillOpacity: 0.25,
             refineStroke: false,
+            minRadius: 10,
+            maxRadius: 1.1e6,
             properties: {},
             debugEl: null
         }, options);