fix(Leaflet#3) Add dash array option

rendrom · Jul 3, 2018 · 26835e0 · 26835e0
1 parent 472b54a
commit 26835e0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -11,15 +11,16 @@ Check out the [demo](https://cloudybay.github.io/leaflet.latlng-graticule/exampl
 ### Usage example
 
 ```javascript
-    L.latlngGraticule({
-        showLabel: true,
-        zoomInterval: [
-            {start: 2, end: 3, interval: 30},
-            {start: 4, end: 4, interval: 10},
-            {start: 5, end: 7, interval: 5},
-            {start: 8, end: 10, interval: 1}
-        ]
-    }).addTo(map);
+L.latlngGraticule({
+    showLabel: true,
+    dashArray: [5, 5],
+    zoomInterval: [
+        {start: 2, end: 3, interval: 30},
+        {start: 4, end: 4, interval: 10},
+        {start: 5, end: 7, interval: 5},
+        {start: 8, end: 10, interval: 1}
+    ]
+}).addTo(map);
 ```
 
 
@@ -30,6 +31,7 @@ Check out the [demo](https://cloudybay.github.io/leaflet.latlng-graticule/exampl
 - **color**: The color of the graticule lines. Default `#aaa`
 - **font**: Font Style for the tick label. Default `12px Verdana`
 - **fontColor**: Color of the tick label. Default `#aaa`
+- **dashArray**: Used to achieve dashed lines. Default `[0,0]`
 - **zoomInterval**: Use different intervals in different zoom levels. You can set for both latitude and longitude lines as the example, or set different intervals for latitude and longitude like below:
 ```javascript
   zoomInterval: {

diff --git a/example/index.html b/example/index.html
@@ -36,6 +36,7 @@
 
         L.latlngGraticule({
             showLabel: true,
+            dashArray: [5, 5],
             zoomInterval: [
                 {start: 2, end: 3, interval: 30},
                 {start: 4, end: 4, interval: 10},

diff --git a/leaflet.latlng-graticule.js b/leaflet.latlng-graticule.js
@@ -15,6 +15,7 @@
             weight: 0.8,
             color: '#aaa',
             font: '12px Verdana',
+            dashArray: [0,0],
             lngLineCurved: 0,
             latLineCurved: 0,
             zoomInterval: [
@@ -298,6 +299,7 @@
                 ctx.lineWidth = this.options.weight;
                 ctx.strokeStyle = this.options.color;
                 ctx.fillStyle = this.options.fontColor;
+                ctx.setLineDash(this.options.dashArray);
 
                 if (this.options.font) {
                     ctx.font = this.options.font;