Add strokeWidth and currentStrokeWidth

README.md

@@ -86,6 +86,8 @@ The `l-choropleth-layer` component pass the this information through its [defaul
 * **max**: The highest value on the domain set
 * **strokeColor**: String with the color to use for each of the polygons' stroke color (in hex format). (e.g.: ```"e7d090"```). If a value is not specified ```fff``` is used.
 * **currentStrokeColor**: String with the color to use for the stroke of the currently polygon that the user is hovering over. (e.g.: ```"e7d090"```). If a value is not specified ```666``` is used.
+* **strokeWidth**: Number with the width of the stroke for each polygon. (default: ```2```).
+* **currentStrokeWidth**: Number with the width of the stroke for the currently hovered polygon. (default: ```5```).
 
 As seen on the example, usually you'll pass these values to the `l-info-control` and `l-reference-chart` components.
 

src/components/ChoroplethLayer.vue

@@ -11,7 +11,7 @@ import { getMin, getMax, normalizeValue, getColor, validNumber } from "../util"
 
 function mouseover({ target }) {
   target.setStyle({
-    weight: 5,
+    weight: this.currentStrokeWidth,
     color: `#${this.currentStrokeColor}`,
     dashArray: ""
   })
@@ -40,7 +40,7 @@ function mouseover({ target }) {
 
 function mouseout({ target }) {
   target.setStyle({
-    weight: 2,
+    weight: this.strokeWidth,
     color: `#${this.strokeColor}`,
     dashArray: ""
   })
@@ -62,7 +62,9 @@ export default {
     zoom: Number,
     mapOptions: Object,
     strokeColor: {type: String, default: 'fff'},
-    currentStrokeColor: {type: String, default:'666'}
+    currentStrokeColor: {type: String, default:'666'},
+    strokeWidth: {type: Number, default: 2},
+    currentStrokeWidth: {type: Number, default: 5}
   },
   mounted() {
     if (this.$parent._isMounted) {
@@ -81,20 +83,20 @@ export default {
           if (!item) {
             return {
               color: "white",
-              weight: 2
+              weight: this.strokeWidth
             }
           }
           let valueParam = Number(item[this.value.key])
           if (!validNumber(valueParam)) {
             return {
               color: "white",
-              weight: 2
+              weight: this.strokeWidth
             }
           }
           const { min, max } = this
 
           return {
-            weight: 2,
+            weight: this.strokeWidth,
             opacity: 1,
             color: `#${this.strokeColor}`,
             dashArray: "3",