diff --git a/README.md b/README.md index 526553b..a1f6283 100755 --- 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 index dcb549f..347a92b 100755 --- 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 index b0b7915..05ee49d 100755 --- 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;