Added polyline offset plugin support with example data and script

R/dependencies.R

@@ -25,6 +25,9 @@ leafletDependencies <- list(
   omnivore = function() {
     leafletOmnivoreDependencies()
   },
+  polylineoffset = function() {
+    leafletPolylineoffsetDependencies()
+  },
 
   # the ones below are not really expected to be used directly
   # but are included for completeness sake.

R/layers.R

@@ -1128,6 +1128,7 @@ addPolylines <- function(
   fill = FALSE,
   fillColor = color,
   fillOpacity = 0.2,
+  offset = NULL,
   dashArray = NULL,
   smoothFactor = 1.0,
   noClip = FALSE,
@@ -1143,9 +1144,12 @@ addPolylines <- function(
 
   options <- c(options, filterNULL(list(
     stroke = stroke, color = color, weight = weight, opacity = opacity,
-    fill = fill, fillColor = fillColor, fillOpacity = fillOpacity,
+    fill = fill, fillColor = fillColor, fillOpacity = fillOpacity, offset = offset,
     dashArray = dashArray, smoothFactor = smoothFactor, noClip = noClip
   )))
+
+  map$dependencies <- c(map$dependencies, leafletPolylineoffsetDependencies())
+
   pgons <- derivePolygons(data, lng, lat, missing(lng), missing(lat), "addPolylines")
   invokeMethod(map, data, "addPolylines", pgons, layerId, group, options,
                popup, popupOptions, safeLabel(label, data), labelOptions, highlightOptions) %>%

R/plugin-polylineoffset.R

@@ -0,0 +1,10 @@
+leafletPolylineoffsetDependencies <- function() {
+  list(
+    htmltools::htmlDependency(
+      "leaflet-polylineoffset",
+      "1.1.1",
+      system.file("htmlwidgets/lib/leaflet-polylineoffset", package = "leafletfmm"),
+      script = "leaflet.polylineoffset.js"
+    )
+  )
+}

inst/htmlwidgets/leaflet.yaml

@@ -22,3 +22,7 @@ dependencies:
     version: 1.3.1 # match leaflet version
     src: "htmlwidgets/lib/rstudio_leaflet"
     stylesheet: rstudio_leaflet.css
+  - name: leaflet-polylineoffset
+    version: 1.1.1 # match leaflet version
+    src: "htmlwidgets/plugins/leaflet-polylineoffset"
+    stylesheet: leaflet.polylineoffset.js

inst/htmlwidgets/lib/leaflet-polylineoffset/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Benjamin Becquet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

inst/htmlwidgets/lib/leaflet-polylineoffset/README.md

@@ -0,0 +1,49 @@
+Leaflet Polyline Offset
+===
+Works with Leaflet >= 1.0.
+
+This plugin adds to Leaflet `Polyline`s the ability to be drawn with a relative pixel offset, without modifying their actual `LatLng`s. The offset value can be either negative or positive, for left- or right-side offset, and remains constant across zoom levels.
+
+## Install with NPM
+
+```bash
+npm install leaflet-polylineoffset
+```
+
+## Use cases and demos
+
+Line offsetting is the process of drawing a line parallel to an existant one, at a fixed distance. It's not a simple (x,y) translation of the whole shape, as it shouldn't overlap. It can be used to visually emphasize different properties of the same linear feature, or achieve complex composite styling.
+
+This plugin brings this feature to Leaflet, to apply to client-side vectors.
+
+Demos are clearer than words:
+* [Basic demo](http://bbecquet.github.io/Leaflet.PolylineOffset/examples/example.html). The dashed line is the "model", with no offset applied. Red is with a -10px offset, green is with a 5px offset. The three are distinct `Polyline` objects but uses the same coordinate array.
+* [Cycle lanes](http://bbecquet.github.io/Leaflet.PolylineOffset/examples/example_cycle.html). Drawing a road with two directions of cycle lanes, a main one and one shared.
+* [Bus lines](http://bbecquet.github.io/Leaflet.PolylineOffset/examples/example_bus.html). A more complex demo. Offsets are computed automatically depending on the number of bus lines using the same segment. Other non-offset polylines are used to achieve the white and black outline effect.
+
+## Usage
+
+The plugin adds offset capabilities directly to the `L.Polyline` class.
+```javascript
+// Instantiate a normal Polyline with an 'offset' options, in pixels.
+var pl = L.polyline([[48.8508, 2.3455], [48.8497, 2.3504], [48.8494, 2.35654]], {
+  offset: 5
+});
+
+// Setting the 'offset' property through the 'setStyle' method won't work.
+// If you want to set the offset afterwards, use 'setOffset'.
+pl.setOffset(-10);
+
+// To cancel the offset, simply set it to 0
+pl.setOffset(0);
+```
+
+## License
+MIT.
+
+## Contributors
+* [Benjamin Becquet](https://github.com/bbecquet) (original author)
+* [sanderd17](https://github.com/sanderd17)
+* [jellevoost](https://github.com/jellevoost)
+* [ghybs](https://github.com/ghybs)
+* [BartWaardenburg](https://github.com/BartWaardenburg)

inst/htmlwidgets/lib/leaflet-polylineoffset/examples/example.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
+    <title>Leaflet Polyline Offset example</title>
+
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    <style>
+      * { margin: 0; padding: 0; }
+      html, body { height: 100%; }
+      #map { width:100%; height:100%; }
+    </style>
+
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script src="../leaflet.polylineoffset.js"></script>
+    <script>
+			window.onload = function() {
+				var map = new L.Map('map', {
+					center: [58.0, -11.0],
+					zoom: 4,
+					layers: [
+						L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
+							minZoom: 0,
+							maxZoom: 18,
+							attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
+						})
+					]
+				});
+
+			  var ll = [[58.44773, -28.65234], [53, -23.33496], [53, -14.32617], [58.1707, -10.37109], [59, -13], [57, -15], [57, -18], [60, -18], [63, -5], [59, -7], [58, -3], [56, -3], [60, -4]];
+
+			  var orig = L.polyline(ll, {
+					weight: 2,
+					dashArray: '5,10',
+					color: 'black',
+					opacity: 0.3
+			  }).addTo(map);
+
+			  var leftPolyline = L.polyline(ll, {
+					color: '#f00',
+					opacity: 1,
+					offset: -5
+			  }).addTo(map);
+
+			  var rightPolyline = L.polyline(ll, {
+					color: '#080',
+					opacity: 1,
+					offset: 10
+			  }).addTo(map);
+			};
+		</script>
+  </head>
+
+  <body>
+    <div id="map"></div>
+  </body>
+</html>