add symbolOffet as a pattern option, for a relative pixel offset to apply to symbols

README.md

@@ -50,6 +50,7 @@ Property | Type | Required | Description
 `endOffset`| *see below* | No | Minimum offset of the last pattern symbol, from the end point of the line. Default: 0.
 `repeat`| *see below* | Yes | Repetition interval of the pattern symbols. Defines the distance between each consecutive symbol's anchor point.
 `symbol`| Symbol factory | Yes | Instance of a symbol factory class.
+`symbolOffset`| Number | No | Relative pixel offset to apply to symbols, so they don't overlap the path. [PolylineOffset](https://github.com/bbecquet/Leaflet.PolylineOffset) is required in order to use this option
 
 `offset`, `endOffset` and `repeat` can be each defined as a number, in pixels, or in percentage of the line's length, as a string (ex: `'10%'`).
 

leaflet.polylineDecorator.js

@@ -270,6 +270,7 @@ L.PolylineDecorator = L.FeatureGroup.extend({
         var pattern = {
             cache: [],
             symbolFactory: patternDef.symbol,
+            symbolOffset: patternDef.symbolOffset,
             isOffsetInPixels: false,
             isEndOffsetInPixels: false,
             isRepeatInPixels: false
@@ -349,7 +350,20 @@ L.PolylineDecorator = L.FeatureGroup.extend({
             return dirPoints;
         }
 
-        var offset, endOffset, repeat, pathPixelLength = null, latLngs = this._paths[pathIndex];
+        var offset, endOffset, repeat, latLngs, pathPixelLength = null;
+        if (pattern.symbolOffset) {
+          latLngs = [];
+          for (var i = 0; i < this._paths[pathIndex].length; i++) {
+            latLngs[i] = this._map.latLngToLayerPoint(this._paths[pathIndex][i]);
+          }
+          latLngs = L.PolylineOffset.offsetPoints(latLngs, pattern.symbolOffset);
+          for (var i = 0; i < latLngs.length; i++) {
+            latLngs[i] = this._map.layerPointToLatLng(latLngs[i]);
+          }
+        } else {
+          latLngs = this._paths[pathIndex];
+        }
+
         if(pattern.isOffsetInPixels) {
             pathPixelLength =  L.LineUtil.PolylineDecorator.getPixelLength(latLngs, this._map);
             offset = pattern.offset/pathPixelLength;

src/L.PolylineDecorator.js

@@ -102,6 +102,7 @@ L.PolylineDecorator = L.FeatureGroup.extend({
         var pattern = {
             cache: [],
             symbolFactory: patternDef.symbol,
+            symbolOffset: patternDef.symbolOffset,
             isOffsetInPixels: false,
             isEndOffsetInPixels: false,
             isRepeatInPixels: false
@@ -181,7 +182,20 @@ L.PolylineDecorator = L.FeatureGroup.extend({
             return dirPoints;
         }
 
-        var offset, endOffset, repeat, pathPixelLength = null, latLngs = this._paths[pathIndex];
+        var offset, endOffset, repeat, latLngs, pathPixelLength = null;
+        if (pattern.symbolOffset) {
+          latLngs = [];
+          for (var i = 0; i < this._paths[pathIndex].length; i++) {
+            latLngs[i] = this._map.latLngToLayerPoint(this._paths[pathIndex][i]);
+          }
+          latLngs = L.PolylineOffset.offsetPoints(latLngs, pattern.symbolOffset);
+          for (var i = 0; i < latLngs.length; i++) {
+            latLngs[i] = this._map.layerPointToLatLng(latLngs[i]);
+          }
+        } else {
+          latLngs = this._paths[pathIndex];
+        }
+
         if(pattern.isOffsetInPixels) {
             pathPixelLength =  L.LineUtil.PolylineDecorator.getPixelLength(latLngs, this._map);
             offset = pattern.offset/pathPixelLength;