Provide faster setStyle implementation

This work sponsored by [Integrated Transport
Planning](https://www.itpworld.net) and the World Bank.

Performance still wasn't good enough when styling 20000 features at
once. Turns out it's something to do with how shiny sends different data
types between R and JS.

Shiny passes arrays much faster than objects. I don't know if the delay
is in encoding or transmission. You can then reassemble the required
objects in JS basically for free.

The same optimisation will probably be possible for addPolylines, etc.
At the moment shiny sends an array of arrays of arrays of objects of
arrays.  Which is unnecessarily convoluted and requires the creation of
N small objects and at least 4N small arrays.

I suspect that it will be faster to send a smaller number of larger
arrays -- something like the format provided by st_coordinates -- or
possibly to use a space efficient encoding scheme like Google's encoded
polyline (plugin available for leaflet).

Author: cmcaine

R/methods.R

@@ -48,8 +48,12 @@ setView <- function(map, lng, lat, zoom, options = list()) {
 #'   setStyle("zones", styles)
 #' }
 #' @export
-setStyle = function(map, group, styles, label = NULL) {
-    invokeMethod(map, NULL, "setStyle", group, styles, label)
+setStyle = function(map, group, styles, label = NULL, offset = 0) {
+    invokeMethod(map, NULL, "setStyle", group, styles, label, offset)
+}
+
+setStyleFast = function(map, group, color, label = NULL) {
+    invokeMethod(map, NULL, "setStyleFast", group, color, label)
 }
 
 #' @describeIn map-methods Flys to a given location/zoom-level using smooth pan-zoom.

inst/htmlwidgets/leaflet.js

@@ -1285,21 +1285,34 @@ exports.default = methods;
 /** Much more performant way to style loaded geometry */
 
 methods.setStyle = function (group, styles, labels) {
+  var offset = arguments.length <= 3 || arguments[3] === undefined ? 0 : arguments[3];
+
   window.map = this;
   var layers = this.layerManager.getLayerGroup(group).getLayers();
 
   if (styles) {
     for (var i = 0; i < styles.length; i++) {
-      layers[i].setStyle(styles[i]);
+      layers[i + offset].setStyle(styles[i]);
     }
   }
   if (labels) {
     for (var _i = 0; _i < styles.length; _i++) {
-      layers[_i].bindTooltip(labels[_i]);
+      layers[_i + offset].bindTooltip(labels[_i]);
     }
   }
 };
 
+/** Much more performant way to style loaded geometry */
+methods.setStyleFast = function (group, colors, labels) {
+  window.map = this;
+  var layers = this.layerManager.getLayerGroup(group).getLayers();
+
+  for (var i = 0; i < colors.length; i++) {
+    layers[i].setStyle({ color: colors[i], fillColor: colors[i] });
+    layers[i].bindTooltip(labels[i]);
+  }
+};
+
 function mouseHandler(mapId, layerId, group, eventName, extraInfo) {
   return function (e) {
     if (!_htmlwidgets2.default.shinyMode) return;

javascript/src/methods.js

@@ -14,22 +14,33 @@ let methods = {};
 export default methods;
 
 /** Much more performant way to style loaded geometry */
-methods.setStyle = function(group, styles, labels) {
+methods.setStyle = function(group, styles, labels, offset = 0) {
   window.map = this;
   let layers = this.layerManager.getLayerGroup(group).getLayers();
 
   if (styles) {
     for (let i = 0; i < styles.length; i++) {
-      layers[i].setStyle(styles[i]);
+      layers[i + offset].setStyle(styles[i]);
     }
   }
   if (labels) {
     for (let i = 0; i < styles.length; i++) {
-      layers[i].bindTooltip(labels[i]);
+      layers[i + offset].bindTooltip(labels[i]);
     }
   }
 };
 
+/** Much more performant way to style loaded geometry */
+methods.setStyleFast = function(group, colors, labels) {
+  window.map = this;
+  let layers = this.layerManager.getLayerGroup(group).getLayers();
+
+  for (let i = 0; i < colors.length; i++) {
+    layers[i].setStyle({color: colors[i], fillColor: colors[i]})
+    layers[i].bindTooltip(labels[i]);
+  }
+};
+
 function mouseHandler(mapId, layerId, group, eventName, extraInfo) {
   return function(e) {
     if (!HTMLWidgets.shinyMode) return;